前端 使用 pdf.js加载PDF文件
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
要在前端使用 pdf.js 加载并显示 PDF 文件，你需要遵循以下步骤：
- 引入
pdf.js库。 - 使用
PDFJS.getDocument()方法加载 PDF 文件。 - 渲染 PDF 页面。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Example</title>
</head>
<body>
<canvas id="pdf-canvas"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
// 使用同步方式加载，简化示例
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
const url = 'your_pdf_file.pdf'; // 替换为你的 PDF 文件 URL
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
// 获取第一页
pdfDoc.getPage(1).then(page => {
// 计算视口大小
const viewport = page.getViewport({ scale: 1.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染页面
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(() => {
console.log('Page rendered!');
});
});
});
</script>
</body>
</html>确保替换 your_pdf_file.pdf 为你的 PDF 文件的实际 URL。这段代码会在网页上显示 PDF 文件的第一页。
注意：实际应用中，你可能需要处理错误，添加更多页面的支持，调整渲染的质量等。
评论已关闭