使用 pdf.js 渲染 PDF，但它不起作用，并且我没有收到任何错误消息来帮助我调试问题

Question

我正在尝试构建一个 Flask 应用程序，在其中上传 pdf 文件，并在提交到后端之前预览它们。

我正在使用的脚本如下：

const imageUploadValidation = (function () {
  "use strict";

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

  const onFilePicked = function (event) {
    // Select file Nodelist containing 1 file
    const files = event.target.files;
    const filename = files[0].name;
    if (filename.lastIndexOf(".") <= 0) {
      return alert("Please add a valid file!");
    }

    const fileReader = new FileReader();

    fileReader.onload = function (e) {
      const pdfData = e.target.result;

      let loadingTask = pdfjsLib.getDocument({ data: pdfData })
      loadingTask.promise.then(function (pdf) {
          console.log("PDF loaded", pdf);

          pdf.getPage(1).then((page) => {
            console.log("page loaded", page);
            // var scale = 1.5;
            // var viewport = page.getViewport({ scale: scale });

            var iframe = document.getElementById("image-preview");
            iframe.src = page
            // var context = canvas.getContext("2d");
            // canvas.height = viewport.height;
            // canvas.width = viewport.width;

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

            // var renderTask = page.render(renderContext);
            // renderTask.promise.then(function () {
            //   console.log("Page rendered");
            // });
          });
        })
        .catch((error) => {
          console.log(error);
        });
    };
    const pdf = fileReader.readAsArrayBuffer(files[0]);
    console.log("read as Data URL", pdf);
  };

  const Constructor = function (selector) {
    const publicAPI = {};

    const changeHandler = (e) => {
      // console.log(e)
      onFilePicked(e);
    };

    publicAPI.init = function (selector) {
      // Check for errors.
      const fileInput = document.querySelector(selector);
      if (!selector || typeof selector !== "string") {
        throw new Error("Please provide a valid selector");
      }

      fileInput.addEventListener("change", changeHandler);
    };

    publicAPI.init(selector);
    return publicAPI;
  };

  return Constructor;
})();

imageUploadValidation("form input[type=file]");

加载任务承诺似乎永远不会运行。在那之前一切似乎都很顺利。我不熟悉这个 Promise 语法，所以我无法确定问题是否存在或我如何传递 pdf 文件。

PS 注释掉的代码是我进行此设置的原始方式，未注释的只是我测试不同的方式。

Answer 1

检查数据类型

首先，您可能想检查从您返回的内容FileReader，特别是数据类型是什么pdfData。如果您查看文档（直接链接），getDocument则需要一个 Unit8Array 或二进制字符串。

添加缺少的参数

您遇到的下一个问题是您在调用中缺少必需的参数getDocument。以下是所需的最少参数：

var args = {
    url: 'https://example.com/the-pdf-to-load.pdf',
    cMapUrl: "./cmaps/",
    cMapPacked: true,
}

我从来没有使用data参数来代替，url但只要你提供正确的数据类型，你应该没问题。请注意，这cMapUrl应该是 cmap 文件夹的相对或绝对路径。PDFJS 通常需要这些文件来实际解释 PDF 文件。以下是演示存储库（GitHub 页面）中的所有文件：cmps您需要将这些文件添加到您的项目中。

我建议不要使用datablob 来上传文件，然后您所要做的就是提供 blob URL 作为url. 我不熟悉如何做到这一点，我只知道它在现代浏览器中是可能的。

您的查看器在哪里/您不需要 iFrame 或 Canvas

PDFJS 只需要一个 div 来将 PDF 放入其中。它对某些 CSS 规则很挑剔，例如它必须绝对定位，否则 PDFJS 会生成 0px 高度的页面。

我没有看到PDFViewer或PDFLinkService在你的代码中。看起来您正在尝试自己从头开始构建整个查看器。这是一个不小的努力。当您loadingTask正常工作时，响应应该按如下方式处理：

loadingTask.promise.then(
    // Success function.
    function( doc ) {
        // viewer is holding: new pdfjsViewer.PDFViewer()
        // linkService is: new pdfjsViewer.PDFLinkService()
        viewer.setDocument( doc );
        linkService.setDocument( doc );
    },
    // Error function.
    function( exception ) {
        // What type of error occurred?
        if ( exception.name == 'PasswordException' ) {
            // Password missing, prompt the user and try again.
            elem.appendChild( getPdfPasswordBox() );
        } else {
            // Some other error, stop trying to load this PDF.
            console.error( exception );
        }
        /**
         * Additional exceptions can be reversed engineered from here:
         * https://github.com/mozilla/pdf.js/blob/master/examples/mobile-viewer/viewer.js
         */
    }
);

请注意，它PDFViewer 为您完成了所有艰苦的工作。PDFLinkService如果您希望 PDF 中的链接正常工作，则需要。您确实应该查看现场演示和示例文件。

虽然工作量很大，但是这些示例文件可以专门教您有关 PDFJS 所需了解的所有信息。

示例/示例代码

这是我使用 PDFJS 完成的项目中的一些示例代码。该代码有点高级，但它应该可以帮助您更好地逆向工程 PDFJS 在幕后的工作方式。

pdfObj= 用于存储此 PDF 文件的所有信息和对象的对象。我在一个页面上加载多个 PDF，因此我需要它来将它们彼此分开。

updatePageInfo= 当用户更改 PDF 中的页面时，PDFJS 的 eventBus 调用的我的 customere 函数；当他们从一页滚动到另一页时就会发生这种情况。

pdfjsViewer.DownloadManager= 我允许用户下载 PDF，所以我需要使用它。

pdfjsViewer.EventBus= 处理 PDF 的加载、页面更改等事件。我不是 100% 确定，但我认为PDFViewer需要这样做。

pdfjsViewer.PDFViewer= 是什么处理实际向用户显示您的 PDF。container是页面上要渲染的元素，记住它必须绝对定位。

// Create a new PDF object for this PDF.
var pdfObj = {
    'container': elem.querySelector('.pdf-view-wrapper'),
    'document': null,
    'download': new pdfjsViewer.DownloadManager(),
    'eventBus': new pdfjsViewer.EventBus(),
    'history': null,
    'id': id,
    'linkService': null,
    'loaded': 0,
    'loader': null,
    'pageTotal': 0,
    'src': elem.dataset.pdf,
    'timeoutCount': 0,
    'viewer': null
};

// Update the eventBus to dispatch page change events to our own function.
pdfObj.eventBus.on( 'pagechanging', function pagechange(evt) { 
    updatePageInfo( evt );
} );

// Create and attach the PDFLinkService that handles links and navigation in the viewer.
var linkService = new pdfjsViewer.PDFLinkService( {
    'eventBus': pdfObj.eventBus,
    'externalLinkEnabled': true,
    'externalLinkRel': 'noopener noreferrer nofollow',
    'externalLinkTarget': 2 // Blank
} );
pdfObj.linkService = linkService;

// Create the actual PDFViewer that shows the PDF to the user.
var pdfViewer = new pdfjsViewer.PDFViewer(
    {
        'container': pdfObj.container,
        'enableScripting': false, // Block embeded scripts for security
        'enableWebGL': true,
        'eventBus': pdfObj.eventBus,
        'linkService': pdfObj.linkService,
        'renderInteractiveForms': true, // Allow form fields to be editable
        'textLayerMode': 2
    }
);
pdfObj.viewer = pdfViewer;
pdfObj.linkService.setViewer( pdfObj.viewer );