基于最新 pdf.js 在 Vue3 中预览pdf的方法

方法一：将pdf文件渲染成Canvas

1、安装pdfjs-dist

"pdfjs-dist": "^3.5.141"

2、代码

        import { reactive, nextTick, onMounted } from 'vue'import * as PDF from 'pdfjs-dist'const pdfjsWorker = import('pdfjs-dist/build/pdf.worker.entry')PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker// 在public目录下的2.pdfimport pdf from '/2.pdf'const state = reactive({  pdfPath: pdf, // 本地PDF文件路径放在/public中  pdfPages: '', // 页数  pdfWidth: '', // 宽度  pdfSrc: '', // 地址  pdfScale: 1.0, // 放大倍数})let pdfDoc = nullonMounted(() => {  loadFile(state.pdfPath)})function loadFile (url) {  PDF.getDocument(url).promise.then((p) => {    pdfDoc = p    const { numPages } = p    state.pdfPages = numPages    nextTick(() => {      renderPage(1) // 从第一页开始渲染    })  })}function renderPage (num) {  pdfDoc.getPage(num).then((page) => {    const canvas = document.getElementById(`pdfCanvas${num}`)    const ctx = canvas.getContext('2d')    const dpr = window.devicePixelRatio || 1    const bsr      = ctx.webkitBackingStorePixelRatio      || ctx.mozBackingStorePixelRatio      || ctx.msBackingStorePixelRatio      || ctx.oBackingStorePixelRatio      || ctx.backingStorePixelRatio      || 1    const ratio = dpr / bsr    const viewport = page.getViewport({ scale: state.pdfScale })    canvas.width = viewport.width * ratio    canvas.height = viewport.height * ratio    canvas.style.width = '100%'    canvas.style.height = '100%'    state.pdfWidth = `${viewport.width}px`    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)    // 将 PDF 页面渲染到 canvas 上下文中    const renderContext = {      canvasContext: ctx,      viewport,    }    page.render(renderContext)    if (state.pdfPages > num)      renderPage(num + 1)  })}#videoContainer {  height: 842px;}

3、效果

方法二：使用viewer.html

1、下载 pdf.js

下载地址

2、将包放到public中

3、代码

        import { onMounted, ref } from 'vue';const props = defineProps({  fileUrl: {    type: String,    default: '/2.pdf'  }})const pdfUrl = ref(''); // pdf文件地址// pdfjs包的路径const fileUrl = '/pdfjs/web/viewer.html?file='; // pdfjs文件地址onMounted(() => {  pdfUrl.value = fileUrl + encodeURIComponent(props.fileUrl);});.container {  width: 100%;  height: 100%;}

4、效果

说明：方法一的展示效果比方法二的展示效果模糊

参考

【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用

vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流

超详细的vue3使用pdfjs教程