前端怎么实现pdf转成html展示在页面上,目前做到的将pdf转成img放在页面上,很扯,希望有大佬有更好的方法可以深度解析!
这里使用了pdfjs库!
<!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("./你的pdf文件地址.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>
- 先引入cdn上面的pdf.js包
- 创建父容器实例
- 使用pdfjsLib获取pdf文件并将其promise
- renderPage函数将其转换成img
弊端就是只是做到了将pdf变成img,目前最优解!
通过网上资源查询还了解到一种方法,一个开源的pdf2htmlEX,但是在npm下载的时候报404,并且通过查阅资料发现其并没有node可导入模块!!
pdf2htmlEX 是一个命令行工具，用于将 PDF 文件转换为 HTML 格式。它不是一个直接在前端使用的库或组件。
要在前端使用 pdf2htmlEX，你需要将其作为后端服务或命令行工具运行，并提供一个接口或界面供前端调用。
下面是一种可能的实现方式：
- 在后端创建一个路由或 API 端点，用于接收前端发送的 PDF 文件。
- 在后端使用 pdf2htmlEX 命令行工具，将接收到的 PDF 文件转换为 HTML 格式。
- 将生成的 HTML 文件发送回前端，供展示或进一步处理。
- 。你需要根据你的项目架构和需求，将 pdf2htmlEX 集成到后端服务中，并将转换后的 HTML 文件传递给前端。
在前端部分，你可以使用合适的方式（例如 AJAX 请求或表单提交）向后端发送 PDF 文件，并接收转换后的 HTML 文件进行展示或处理。
请确保在使用 pdf2htmlEX 进行转换时，遵守其许可证要求和相关法律法规。
