Невозможно загрузить библиотеку pdfjs-dist в Angular, но то же самое работает в JS
Я использую pdfjs-dist library, чтобы просто показать PDF-файл на холсте.
Сначала я попробовал это в JS, который отлично работает с Open Live Server.
Я загрузил pdfjs-dist с помощью команды npm install pdfjs-dist. Затем:
индекс.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 работает нормально. Затем я попытался использовать приведенный выше код и запустить его в angular.
"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-рендеринг.компонент.html:
<h2>Render PDF Example</h2>
<button id = "render-pdf-button">Render PDF</button>
<div id = "pdf-container"></div>pdf-рендеринг.компонент.ц:
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
Даже тот же самый /node_modules/pdfjs-dist/build/pdf.min.mjs доступен, пока я запускаю его через простые js и html (открытый сервер), но в angular он выдает ошибку. Подскажите, как мне устранить эту ошибку?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам необходимо включить его как статический файл в Angular через angular.json (упомянутый вами сервер, вероятно, обслуживает полный корневой каталог, поэтому он включен, а 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/"
}
]
}
}
}
}
}
}
см.: Конфигурация активов
Кстати, лучшим подходом было бы использовать модули и переписать код myapp.js как компонент/сервис Angular:
import * as pdfjsLib from "pdfjs-dist";
@Component({
selector: 'app-pdf-rendering',
})
export class PdfRenderingComponent implements OnInit {
ngOnInit() {
// pdfjsLib stuff
}
}
Если вы получаете pdf.js pdfjs-dist Promise.withResolvers не является функцией после принятого выше ответа, попробуйте перейти по ссылке ниже:
pdf.js pdfjs-dist Promise.withResolvers не является функцией