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 函数渲染第一页。

相关推荐
BillKu5 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
DevilSeagull5 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
大怪v6 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
gnip9 小时前
链式调用和延迟执行
前端·javascript
杨天天.9 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu9 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
YU大宗师9 小时前
React面试题
前端·javascript·react.js
给月亮点灯|11 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺11 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3