无法在 Angular 中加载 pdfjs-dist 库，但在 JS 中也能正常工作

问题描述 投票：0回答：1

我使用 

pdfjs-dist library
来简单地在画布上显示 pdf。

首先我在 JS 中尝试过，使用 Open Live Server 运行得非常好。

我已经使用命令 

npm install pdfjs-dist
下载了 pdfjs-dist。然后：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render PDF</title>
    <!-- <link rel="stylesheet" href="./app.css"> -->
</head>
<body>
    <h2>Render PDF Example</h2>
    <button id="render-pdf-button">Render PDF</button>
    <div id="pdf-container"></div>
    <script type="module" src="./app.js"></script>
</body>
</html>

myapp.js：

import * as pdfjsLib from '/node_modules/pdfjs-dist/build/pdf.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.mjs';
var PDFAnnotate = function(container_id, url) {
    var inst = this;
    this.container_id = container_id;
    this.url = url;
    this.renderPDF = function() {
        var container = document.getElementById(inst.container_id);
        container.innerHTML = '';
        var loadingTask = pdfjsLib.getDocument(inst.url);
        loadingTask.promise.then(function(pdf) {
            inst.number_of_pages = pdf.numPages;
            for (var i = 1; i <= pdf.numPages; i++) {
                (function(pageNum) {
                    pdf.getPage(pageNum).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;
                        container.appendChild(canvas);
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                })(i);
            }
        }, function(reason) {
            console.error(reason);
        });
    };
    this.initRenderButton = function(button_id) {
        var button = document.getElementById(button_id);
        if (button) {
            button.addEventListener('click', function() {
                inst.renderPDF();
            });
        } else {
            console.error('Button element not found.');
        }
    };
};
var pdfAnnotate = new PDFAnnotate('pdf-container', './output.pdf');
pdfAnnotate.initRenderButton('render-pdf-button');

上面的 JS 代码运行良好。然后我尝试使用上面的代码并以角度运行它。

"pdfjs-dist": "^4.4.168",
Angular CLI: 16.0.6
Node: 18.19.0
Package Manager: npm 10.2.3

首先，我在 

pdf-renderer
中创建了文件夹 
src/assests/
并将 
myapp.js
文件粘贴到此处。然后复制其相对路径并添加到
angular.json
标签下的
scripts
中。

然后我使用 

ng create component pdf-rendering
创建了组件。然后：

pdf-rendering.component.html：

<h2>Render PDF Example</h2>
<button id="render-pdf-button">Render PDF</button>
<div id="pdf-container"></div>

pdf-rendering.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pdf-rendering',
  templateUrl: './pdf-rendering.component.html',
  styleUrls: ['./pdf-rendering.component.css']
})
export class PdfRenderingComponent implements OnInit {

  ngOnInit() {
    this.loadScript('assets/pdf-renderer/app.js');
  }
  loadScript(src: string) {
    const script = document.createElement('script');
    script.src = src;
    script.type = 'module';
    document.body.appendChild(script);
  }

}

毕竟我只是在 

app.component.html
中添加了该组件。现在，当我这样做时 
ng serve
，它构建得很好并且应用程序开始运行。

但是它没有显示pdf，它给出了错误：

GET http://localhost:4200/node_modules/pdfjs-dist/build/pdf.min.mjs net::ERR_ABORTED 404 (Not Found)Understand this error

当我通过简单的js和html（开放实时服务器）运行它时，甚至可以访问相同的

/node_modules/pdfjs-dist/build/pdf.min.mjs
，但它给出了角度错误。指导我如何解决此错误？

javascript html angular pdfjs-dist
1个回答
0
投票

您需要通过 

angular.json
在 Angular 中将其启用为静态文件（您提到的服务器可能提供完整的根目录，这就是它启用的原因，而 ng 则没有）

尝试将 pdfjs-dist 文件夹从 node_modules 添加到资产中：

              {
                "glob": "**/*",
                "input": "./node_modules/pdfjs-dist/",
                "output": "/node_modules/pdfjs-dist/"
              }

路径：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "assets": [

              {
                "glob": "**/*",
                "input": "./node_modules/pdfjs-dist/",
                "output": "/node_modules/pdfjs-dist/"
              }
            ]
          }
        }
      }
    }
  }
}

参见：资产配置

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.