Vue项目中使用pdfjs-dist实现在线浏览PDF文件功能
作者：好好好明天会更好
pdfjs-dist是一个用于在浏览器中渲染 PDF 文件的 JavaScript 库,它能够将 PDF 文件解析并渲染为 HTML5 的 canvas 元素,从而实现跨平台、无需插件的 PDF 预览,本文给大家介绍了Vue项目中如何使用pdfjs-dist实现在线浏览PDF文件功能,需要的朋友可以参考下
1. 安装 pdfjs-dist
首先，通过 npm 安装 pdfjs-dist：
npm install pdfjs-dist@2.5.207 --save
2. 配置 Worker 文件路径
pdfjs-dist 需要一个 Worker 文件来处理 PDF 的加载和渲染。需要指定 Worker 文件的路径：
import * as pdfjsLib from 'pdfjs-dist'; import 'pdfjs-dist/build/pdf.worker.entry'; // 确保 worker 文件被引入 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url ).toString();
3. 创建 PDF 查看器组件
在 Vue 组件中，使用 pdfjs-dist 加载并渲染 PDF 文件：
<template>
<div>
<canvas v-for="page in pages" :key="page" :id="`pdf-canvas-${page}`" class="pdf-page" />
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.js',
import.meta.url
).toString();
export default {
data() {
return {
pdfUrl: 'http://example.com/path/to/your.pdf', // PDF 文件路径
pages: 0, // PDF 总页数
};
},
mounted() {
this.loadPdf();
},
methods: {
async loadPdf() {
const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
const pdf = await loadingTask.promise;
this.pages = pdf.numPages; // 获取 PDF 总页数
for (let i = 1; i <= this.pages; i++) {
this.renderPage(pdf, i);
}
},
renderPage(pdf, pageNumber) {
pdf.getPage(pageNumber).then((page) => {
const canvas = document.getElementById(`pdf-canvas-${pageNumber}`);
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例
canvas.width = viewport.width;
canvas.height = viewport.height;
const renderContext = {
canvasContext: context,
viewport,
};
page.render(renderContext);
});
},
},
};
</script>
<style>
.pdf-page {
border: 1px solid #ccc;
margin-bottom: 10px;
}
</style>
到此这篇关于Vue项目中使用pdfjs-dist实现在线浏览PDF文件功能的文章就介绍到这了,更多相关Vue pdfjs-dist在线浏览PDF文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！