时间戳

首页 > 解决方案 > Google Drive PDF Viewer 有时无法加载 pdf

pdf - Google Drive PDF Viewer 有时无法加载 pdf

问题描述

我正在使用 google drive pdf 查看器，使用以下代码

<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://xxx.xxxxx.com/download/testpdf.pdf" width="100%" height="375"></embed>

奇怪的是 - 它只能间歇性地工作。我不想在 googledrive 上回复。是否有任何查看器脚本可以安装在我的服务器中以便我可以使用它作为替代？如果可能，还请分享一些使用它的示例代码。谢谢

标签： pdfviewer

解决方案

我会推荐 js pdf 查看器替代方案。pdf.js

https://mozilla.github.io/pdf.js/

下面是代码，你需要

  1. 准备好pdf.js
  2. 有 pdf.worker.js 到位

把下面的代码写成“viewer.php”，然后你可以使用另一个php脚本来调用“viewer.php?pdffile=test.pdf”，你就可以开始了。

请注意，旧浏览器可能无法在此查看器上运行。但是目前的智能手机浏览器就可以了。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<style>
body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #000000;
}

 
#the-canvas {
  border: 1px solid black;
  direction: ltr;
  width:100%;
  height:auto;
}

</style>

 
<script src="./pdf.js"></script>

 
<div>  
<button id="prev">▲&lt;/button>
<button id="next">▼&lt;/button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

 

<canvas id="the-canvas"></canvas>

 

<script>

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = "<?php echo $_REQUEST["pdffile"]; ?>";
// Loaded via <script> tag, create shortcut to access PDF.js exports.

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = './pdf.worker.js';

 
var pdfDoc = null,

    pageNum = 1,

    pageRendering = false,

    pageNumPending = null,

    scale = 5,

    canvas = document.getElementById('the-canvas'),

    ctx = canvas.getContext('2d');

 

/**

 * Get page info from document, resize canvas accordingly, and render page.

 * @param num Page number.

 */

function renderPage(num) {

  pageRendering = true;

  // Using promise to fetch the page

  pdfDoc.getPage(num).then(function(page) {

    var viewport = page.getViewport({scale: scale});

    canvas.height = viewport.height;

    canvas.width = viewport.width;

 

    // Render PDF page into canvas context

    var renderContext = {

      canvasContext: ctx,

      viewport: viewport

    };

    var renderTask = page.render(renderContext);

 

    // Wait for rendering to finish

    renderTask.promise.then(function() {

      pageRendering = false;

      if (pageNumPending !== null) {

        // New page rendering is pending

        renderPage(pageNumPending);

        pageNumPending = null;

      }

    });

  });

 

  // Update page counters

  document.getElementById('page_num').textContent = num;

}

 

/**

 * If another page rendering in progress, waits until the rendering is

 * finised. Otherwise, executes rendering immediately.

 */

function queueRenderPage(num) {

  if (pageRendering) {

    pageNumPending = num;

  } else {

    renderPage(num);

  }

}

 

/**

 * Displays previous page.

 */

function onPrevPage() {

  if (pageNum <= 1) {

    return;

  }

  pageNum--;

  queueRenderPage(pageNum);

}

document.getElementById('prev').addEventListener('click', onPrevPage);

 

/**

 * Displays next page.

 */

function onNextPage() {

  if (pageNum >= pdfDoc.numPages) {

    return;

  }

  pageNum++;

  queueRenderPage(pageNum);

}

document.getElementById('next').addEventListener('click', onNextPage);

 

/**

 * Asynchronously downloads PDF.

 */

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {

  pdfDoc = pdfDoc_;

  document.getElementById('page_count').textContent = pdfDoc.numPages;

 

  // Initial/first page rendering

  renderPage(pageNum);

});

</script>

推荐阅读