Vue3 实现 PDF 文件在线预览功能

我们可以使用 pdf.js 这个库。首先需要安装 pdf.js

vue 复制代码
npm install pdfjs-dist

接下来,我们在 Vue3 项目中创建一个名为 PdfViewer.vue 的组件:

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>

在这个组件中,我们首先导入了 onMountedrefgetDocument。然后,我们创建了一个名为 pdfCanvas 的引用,用于存储 PDF 文件的画布元素。我们还定义了一些变量,如 pdfDoc(用于存储 PDF 文档对象)、pageNum(用于跟踪当前显示的页面)、pageRendering(用于防止在渲染过程中多次触发渲染)和 pageNumPending(用于存储待处理的页面)。

接下来,我们定义了一个名为 renderPage 的函数,该函数接受一个页面编号作为参数。在这个函数中,我们首先将 pageRendering 设置为 true,然后获取指定页面的 PDF 对象。接着,我们创建一个画布元素,并设置其高度和宽度为 PDF 页面的视口大小。然后,我们使用 pdf.js 提供的 render 方法渲染页面,并将渲染结果绘制到画布上。最后,我们将画布元素添加到页面中。

setup 函数中,我们使用 onMounted 钩子在组件挂载时加载 PDF 文件。我们调用 getDocument 函数获取 PDF 文档对象,并将其存储在 pdfDoc 变量中。然后,我们调用 renderPage 函数渲染第一页。

相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴8 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust8 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放8 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
开开心心就好9 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝9 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css