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

相关推荐
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_6 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy7 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy7 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼7 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子7 小时前
迭代器和生成器
前端·javascript
洋葱头_8 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing8 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人11 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化