标签: pdfjs-dist

我遵循了一个关于如何使用 React 实现 Mozilla 的 PDF 查看器的快速教程。我在这里做了一个密码箱。我想知道这是否可以通过导入 pdfjs 的节点模块来实现。因此，不要将包下载到公共文件夹中以将其与导入一起使用：

export default class PDFJs {
  init = (source, element) => {
    const iframe = document.createElement("iframe");

    iframe.src = `/pdfjs-2.5.207-dist/web/viewer.html?file=${source}`;
    iframe.width = "100%";
    iframe.height = "100%";

    element.appendChild(iframe);
  };
}

此外，当 PDF 的源是 URL 时，这种设置不起作用。如果我这样做，我会收到一个错误：

PDF.js v2.5.207（内部版本：0974d6052）消息：文件来源与查看者的来源不匹配

我已经注释掉了在pdfjs-2.5.207-dist/web/viewer.js 中检查文件来源的代码部分：

  //if (origin !== viewerOrigin && protocol !== "blob:") {
  //  throw new Error("file origin does not match viewer's");
  //} 

但是，然后我得到了一个错误：

PDF.js v2.5.207（内部版本：0974d6052）消息：无法获取

我怎样才能解决这个问题？是否可以将这个包像模块一样导入到 react 组件中，我如何将它用于带有 URL 的外部资源的 PDF？

我一直在尝试用 npm install of 替换基于链接的 pdf.js 几个小时pdfjs-dist，因为我注意到我的链接不打算用作 cdns 并且可能变得不稳定，如here所述。

除了几个示例之外，我找不到关于如何使其工作的太多文档，并且当涉及 Webpack 时，它们主要与 React 一起使用，而我只是在 Django 框架中使用 ES6（在所需的 django 目录上静态编译，而不使用webpack 插件。）

在与一位从事 pdf.js 工作的人交换了几条消息后，我的编译错误似乎是由于 Webpack 在内部处理库的方式造成的。这是我所看到的：

WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileAsyncWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
 @ ./node_modules/worker-loader/dist/index.js
 @ ./node_modules/worker-loader/dist/cjs.js
 @ ./node_modules/pdfjs-dist/webpack.js
 @ ./src/js/views/pdfViews.js
 @ ./src/js/index.js

WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
 @ ./node_modules/worker-loader/dist/index.js
 @ ./node_modules/worker-loader/dist/cjs.js
 @ ./node_modules/pdfjs-dist/webpack.js
 @ ./src/js/views/pdfViews.js
 @ ./src/js/index.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not …

我的 pdfjs-dist 版本： "pdfjs-dist": "^2.4.456" 这是导入我的代码：

import PDFJS from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

当我打电话时：

PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker
this.loadingTask = PDFJS.getDocument({ data: self.pdfData })

它返回此错误：[TypeError：无法读取未定义的属性“GlobalWorkerOptions”]

我尝试安慰这个：PDFJS，它返回undefinded

所以当我在互联网上尝试这个解决方案时，我添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>

在我index.html和 add var PDFJS = window['pdfjs-dist/build/pdf'];

然后它就可以完美工作...但我不知道为什么第一种方法对我不起作用...而且我不想从 CDN 使用它，因为我认为它对于我的项目来说不稳定。那么你们能给我指出我在这里错过的一点吗？我试图环顾四周node-modules以找出答案，但我仍然不明白为什么我不能import PDFJS from 'pdfjs-dist'；

我的pdfjs-distreact 应用程序中有依赖项，但它不起作用 - 我不确定我更改了什么导致了这种情况。我跑node v14.16.1，npm v7.9.0，react 17.0.2，react-scripts 4.0.3，和pdfjs-dist 2.7.570。我在运行时收到以下错误消息npm start：

Failed to compile.

./node_modules/pdfjs-dist/build/pdf.js 2407:53
Module parse failed: Unexpected token (2407:53)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 intent: renderingIntent,
|                 renderInteractiveForms: renderInteractiveForms === true,
>                 annotationStorage: annotationStorage?.getAll() || null
|               });
|             }

我已经尝试卸载并重新安装相关软件包，以及npm update、npm audit等等。我也尝试添加 …

我正在尝试在我的项目中实现 PDF.js，但它比预期的要困难。

目前，我可以在 div 内渲染整个 PDF，但无法渲染标准工具栏查看器；您可以在此演示页面顶部看到我想要的示例： https: //mozilla.github.io/pdf.js/web/viewer.html

我的 JS 代码现在看起来像这样：

var url = '/filemanager/example.pdf';
var pdfScale = 1;
PDFJS.workerSrc = '/js/pdfJs/build/pdf.worker.js';

function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: pdfScale };

    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++) …

我试图找到一些关于如何将 mozilla pdf.js 包含到配置了打字稿的 create-react-app 中的文档。不幸的是，我只发现很多人都在问同样的问题，但没有可行的解决方案。
目前我使用以下方法，它似乎有效。但我不确定这是否是一个好方法。

我使用 npm 安装了依赖项，如下所示。

npm install --save @types/pdfjs-dist
npm install --save pdfjs-dist

并以这种方式导入/配置它。

// Import pdf.js    
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/assets/js/pdfjs/pdf.worker.min.js';

// Load pdf
pdfjsLib.getDocument('pdf_url').promise.then((promise: pdfjsLib.PDFDocumentProxy) => {
    console.log(promise.fingerprint);
});

因此，我必须确保文件pdf.worker.js.map和pdf.worker.min.js存在于文件夹中public/assets/js/pdfjs。有没有更优雅的方式解决pdf.js的导入问题？

附上react和pdfjs-dist版本：

"pdfjs-dist": "^2.5.207",
"react": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "^3.7.5"

我正在尝试构建一个 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) => { …

我正在尝试制作可以阅读pdf的简单移动UI，但我计划通过使用我自己制作的pdf阅读来添加许多功能，而不仅仅是使用pdf.js团队制作的查看器，所以我问是否有任何将 pdf 渲染为带有元素的 HTML 的方式，就像他们在查看器上所做的那样，我对画布感到不舒服，任何帮助人员，提前致谢

我正在使用 PDFJS 和查看器。然而，我确实有一个问题，注释没有像 pdfs 演示查看器https://mozilla.github.io/pdf.js/web/viewer.html中那样正确显示。

注释在 pdfs 演示查看器中正确显示：

现在它使用 Chrome 显示在我的应用程序中：

以下是使用我的应用程序在 Safari 中显示的方式：

现在我初始化 pdfs 查看器：

function initPdfjs() {
    // Enable hyperlinks within PDF files.
    pdfLinkService = new (pdfjsViewer as any).PDFLinkService({
        eventBus,
    });

    // Enable find controller.
    pdfFindController = new (pdfjsViewer as any).PDFFindController({
        eventBus,
        linkService: pdfLinkService,
    });

    const container = document.getElementById('viewerContainer');
    if (container) {
        // Initialize PDFViewer
        pdfViewer = new (pdfjsViewer as any).PDFViewer({
            eventBus,
            container,
            removePageBorders: true,
            linkService: pdfLinkService,
            findController: pdfFindController,
        });
        // pdfViewer.textLayerMode = Utils.enableTextSelection() ? …

我在 angular 6 项目中使用 ng2-pdf-viewer，

在项目编译时，它会出现以下错误

node_modules/@types/pdfjs-dist/index.d.ts(63,39) 中的错误：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(65,34)：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(80,31)：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(82,30): 错误 TS2304: 找不到名称“未知”

我的 package.json 文件如下面的帖子

"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@vimeo/player": "^2.10.0",
"@types/node": "10.3.1",
"angular-6-datatable": "~0.8.0",
"angular-6-social-login": "~1.1.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"crypto-js": "~3.1.9-1",
"devextreme": "^19.1.5",
"devextreme-angular": "^19.1.5",
"font-awesome": "~4.7.0",
"jquery": "^3.4.1",
"ng2-drag-drop": "^3.0.2",
"ng2-pdf-viewer": "^6.0.2",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^3.3.0",
"ngx-drag-scroll": "~7.4.2",
"ngx-image-cropper": "~1.3.10",
"ngx-loading": "^3.0.1", …