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

相关推荐
烛阴30 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情1 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz1 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258591 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
heart000_12 小时前
128K 长文本处理实战:腾讯混元 + 云函数 SCF 构建 PDF 摘要生成器
人工智能·自然语言处理·pdf
开开心心_Every2 小时前
便捷的Office批量转PDF工具
开发语言·人工智能·r语言·pdf·c#·音视频·symfony
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜053 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界3 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript