<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PDF to HTML</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script>
</head>
<body>
<div id="pdfViewer"></div>
<script>
const container = document.getElementById("pdfViewer");
pdfjsLib.getDocument("./驾驶员管理制度23LD.PDF").promise.then((pdf) => {
const numPages = pdf.numPages;
const pagesPromises = [];
for (let i = 1; i <= numPages; i++) {
pagesPromises.push(renderPage(pdf, i));
}
Promise.all(pagesPromises)
.then((pages) => {
const combinedHtml = pages.join("");
container.innerHTML = combinedHtml;
})
.catch((error) => {
console.error("Error rendering pages:", error);
});
});
function renderPage(pdf, pageNumber) {
return new Promise((resolve, reject) => {
pdf.getPage(pageNumber).then((page) => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport,
};
page
.render(renderContext)
.promise.then(() => {
const html = canvas.toDataURL();
resolve(`< img src="${html}" alt="Page ${pageNumber}">`);
})
.catch((error) => {
console.error(`Error rendering page ${pageNumber}:`, error);
reject(error);
});
});
});
}
</script>
</body>
</html>pdf.js转化成canvas 然后img形式展示
猜你喜欢
转载自blog.csdn.net/m0_57033755/article/details/131727391
今日推荐
周排行