在PDFJS的web/viewer.html页面中,可以通过Blob URL来预览PDF文件。以下是一个示例代码:

<!DOCTYPE html>
<html>
<head>
  <title>PDF Preview</title>
  <style>
    #pdfViewer {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="pdfViewer"></div>

  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
  <script>
    // 获取Blob URL
    var blobUrl = "your_blob_url_here";

    // 创建一个PDFJS viewer实例
    var pdfViewer = document.getElementById('pdfViewer');
    var pdfjsLib = window['pdfjs-dist/build/pdf'];

    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

    var loadingTask = pdfjsLib.getDocument(blobUrl);
    loadingTask.promise.then(function(pdf) {
      // 渲染第一页
      pdf.getPage(1).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport({scale: scale});

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };

        page.render(renderContext).promise.then(function() {
          pdfViewer.appendChild(canvas);
        });
      });
    });
  </script>
</body>
</html>

在上面的代码中,你需要将your_blob_url_here替换为你的Blob URL。然后将代码保存为一个HTML文件,通过浏览器打开该文件,即可预览PDF文件

PDFJS webviewerhtmlfile= 后面只有Blob怎么预览pdf

原文地址: https://www.cveoy.top/t/topic/iA78 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录