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

相关推荐
前端小巷子2 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB241 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安12 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202012 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css