使用到pdf.js与pdf.worker.js,版本为3.2.146
具体实现见代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.pdf_box, #pdf-container {
width: 100vw;
height: 100vh;
overflow: scroll;
}
canvas {
width: 100%;
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<script src="./js/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = "./js/pdf.worker.min.js";
const pdfUrl = {
// 替换为自己的pdf文件地址
url: '034001700111-45763370.pdf',
// 将cmaps目录下载到本地,下载地址见文末
cMapUrl: "../cmaps/",
// 将standard_fonts目录下载到本地,下载地址见文末
standardFontDataUrl: "../standard_fonts/",
cMapPacked: true
};
const targetDom = "pdf-container";
pdfjsLib.getDocument(pdfUrl).promise.then(async (doc) => {
for (let pageNum = 1; pageNum <= doc.numPages; pageNum++) {
await renderPage(doc, pageNum, targetDom);
}
});
function renderPage(pdfDoc, pageNumber, containerId) {
return new Promise((resolve) => {
pdfDoc.getPage(pageNumber).then((page) => {
const scale = window.devicePixelRatio;
const viewport = page.getViewport({ scale });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
document.getElementById(containerId).appendChild(canvas);
const renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext).promise.then(resolve);
});
});
}
</script>
</body>
</html>