PDFJS 使用 Blob URL 预览 PDF 文件
在 PDFJS 的 web/viewer.html 页面中，可以通过 Blob URL 来预览 PDF 文件。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>PDF Preview</title>
<style>
#pdfViewer {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id='pdfViewer'></div>
<script src='https://mozilla.github.io/pdf.js/build/pdf.js'></script>
<script>
// 获取 Blob URL
var blobUrl = 'your_blob_url_here';
// 创建一个 PDFJS viewer 实例
var pdfViewer = document.getElementById('pdfViewer');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument(blobUrl);
loadingTask.promise.then(function(pdf) {
// 渲染第一页
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(function() {
pdfViewer.appendChild(canvas);
});
});
});
</script>
</body>
</html>
在上面的代码中，你需要将your_blob_url_here替换为你的 Blob URL。然后将代码保存为一个 HTML 文件，通过浏览器打开该文件，即可预览 PDF 文件。
原文地址: https://www.cveoy.top/t/topic/qh0R 著作权归作者所有。请勿转载和采集!