PDFJs Viewer.html 變成一個 div

Question

有誰知道 pdf.js ( http://mozilla.github.io/pdf.js/web/viewer.html ) 中的 viewer.html 是否可以放在<div> ？

或者更好的是，轉換為 AngularJs 指令（我知道 Angular 有幾個 pdfjs 指令，但沒有一個具有 viewer.html 的質量）。

Answer 1

將您的 pdf 文件 src 放在 iframe 中，如下所示：

<div><iframe src="/pdfjs/viewer.html/{src of PDF file}" style="position: relative;   top: 0;  bottom: 0; left: 0;   width: 100%;   height: 700px;  border: 0"></iframe></div>

它可能會幫助你

Answer 2

您絕對可以將 viewer.html 放在<div> 。

從源頭開始包裝<div id="outerContainer">

在您自己的<div> ，然后您可以根據自己的喜好設置樣式：

<div id="myContainer">
    <div id="outerContainer">

      <div id="sidebarContainer"> 
      </div>  <!-- sidebarContainer -->

      <div id="mainContainer">
      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
      </div>  <!-- overlayContainer -->

    </div> <!-- outerContainer -->
</div>

請注意，使寬度小於約 800 像素會擠壓工具欄項目。

Answer 3

以下示例使用 pdf.js 提供的 javascript api將 pdf 加載到 div 中。 你也可以看到小提琴。

 // If absolute URL from the remote server is provided, configure the CORS // header on that server. var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf'; // Loaded via <script> tag, create shortcut to access PDF.js exports. var pdfjsLib = window['pdfjs-dist/build/pdf']; // The workerSrc property shall be specified. pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; // Asynchronous download of PDF var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { console.log('PDF loaded'); // Fetch the first page var pageNumber = 1; pdf.getPage(pageNumber).then(function(page) { console.log('Page loaded'); var scale = 1.5; var viewport = page.getViewport(scale); // Prepare canvas using PDF page dimensions var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.then(function () { console.log('Page rendered'); }); }); }, function (reason) { // PDF loading error console.error(reason); });

 #the-canvas { border:1px solid black; }

 <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> <h1>PDF.js 'Hello, world!' example</h1> <div> <canvas id="the-canvas"></canvas> </div>