#vue中使用pdf.js
import pdfjsLib from 'pdfjs-dist';
import * as PdfJs from "pdfjs-dist/legacy/build/pdf.js";
async function loadAndRenderPDF(url: string) {
PdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
const pdfUrl = url;
const loadingTask = PdfJs.getDocument(pdfUrl);
const pdfDocument = await loadingTask.promise;
const numPages = pdfDocument.numPages;
const pdfContainer = document.getElementById("pdfContent") as HTMLElement;
for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
const page = await pdfDocument.getPage(pageNumber);
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport,
};
await page.render(renderContext);
pdfContainer.appendChild(canvas);
pdfContainer.scrollTop = 0;
}
loading.value = false;
}
const init = (url: string) => {
nextTick(() => {
loading.value = true;
const pdfContainer = document.getElementById("pdfContent") as HTMLElement;
pdfContainer.innerHTML = "";
loadAndRenderPDF(url);
});
};```