js 实现在线预览pdf
时间: 2023-10-20 18:08:35 浏览: 38
可以使用 PDF.js 库来实现在线预览 PDF。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
</head>
<body>
<div id="pdf-viewer"></div>
<script>
// 获取 PDF 文件的 URL
const pdfUrl = "https://example.com/sample.pdf";
// 获取 PDF 页面的容器
const pdfViewer = document.getElementById("pdf-viewer");
// 加载 PDF 文件
pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
// 获取第一页
pdf.getPage(1).then(page => {
// 创建一个缩放比例为 1 的 canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
// 渲染 PDF 页面到 canvas 上
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(() => {
// 将 canvas 添加到页面上
pdfViewer.appendChild(canvas);
});
});
});
</script>
</body>
</html>
```
该代码会从指定的 URL 加载 PDF 文件,然后将第一页渲染到一个 canvas 上,并将该 canvas 添加到页面上。你可以根据自己的需要修改代码,比如增加导航、缩放等功能。