我们可以使用 pdf.js 这个库。首先需要安装 pdf.js：
npm install pdfjs-dist
接下来，我们在 Vue3 项目中创建一个名为 PdfViewer.vue 的组件：
<template> <div class="pdf-viewer"> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import { onMounted, ref } from 'vue'; import { getDocument } from 'pdfjs-dist/webpack'; export default { name: 'PdfViewer', setup() { const pdfCanvas = ref(null); let pdfDoc = null; let pageNum = 1; let pageRendering = false; let pageNumPending = null; function renderPage(num) { pageRendering = true; pdfDoc.getPage(num).then((page) => { const scale = 1.5; const viewport = page.getViewport({ scale: scale }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport, }; const renderTask = page.render(renderContext); renderTask.promise.then(() => { if (!pageRendering) { return; } else { pageRendering = false; if (pageNumPending !== null) { renderPage(pageNumPending); pageNumPending = null; } } }); }); document.getElementById('pdfCanvas').appendChild(canvas); } onMounted(() => { const loadingTask = getDocument('path/to/your/pdf/file.pdf'); loadingTask.promise.then((pdf) => { pdfDoc = pdf; renderPage(pageNum); }); }); return { pdfCanvas, }; }, }; </script>
在这个组件中，我们首先导入了 onMounted、ref 和 getDocument。然后，我们创建了一个名为 pdfCanvas 的引用，用于存储 PDF 文件的画布元素。我们还定义了一些变量，如 pdfDoc（用于存储 PDF 文档对象）、pageNum（用于跟踪当前显示的页面）、pageRendering（用于防止在渲染过程中多次触发渲染）和 pageNumPending（用于存储待处理的页面）。
接下来，我们定义了一个名为 renderPage 的函数，该函数接受一个页面编号作为参数。在这个函数中，我们首先将 pageRendering 设置为 true，然后获取指定页面的 PDF 对象。接着，我们创建一个画布元素，并设置其高度和宽度为 PDF 页面的视口大小。然后，我们使用 pdf.js 提供的 render 方法渲染页面，并将渲染结果绘制到画布上。最后，我们将画布元素添加到页面中。
在 setup 函数中，我们使用 onMounted 钩子在组件挂载时加载 PDF 文件。我们调用 getDocument 函数获取 PDF 文档对象，并将其存储在 pdfDoc 变量中。然后，我们调用 renderPage 函数渲染第一页。
