Vue3 中使用 PDF.js

简介

PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库，用于处理和显示 PDF 文件。Vue3 是一种流行的 JavaScript 框架，用于构建用户界面。本文将介绍如何在 Vue3 中使用 PDF.js 来实现 PDF 文件的展示和交互。

安装和配置

首先，我们需要安装 Vue3 和 PDF.js 的依赖。打开终端，执行以下命令：

npm install vue@next pdfjs-dist

安装完成后，我们需要在项目的入口文件（通常是 main.js 或 main.ts）中引入 Vue3 和 PDF.js：

import { createApp } from 'vue';
import { pdfjs } from 'pdfjs-dist';

pdfjs.GlobalWorkerOptions.workerSrc = '/path-to/pdf.worker.js'; // 设置 PDF.js 的 worker 地址

import App from './App.vue';

const app = createApp(App);
app.mount('#app');

上述代码设置了 PDF.js 的 worker 地址，确保 PDF.js 能正常加载和使用。

显示 PDF 文件

接下来，我们将在 Vue3 中创建一个用于显示 PDF 文件的组件。在 src 目录下创建一个名为 PdfViewer.vue 的文件，并添加以下代码：

<template>
  <div class="pdf-viewer">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist';

export default {
  name: 'PdfViewer',
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const canvasRef = ref(null);

    onMounted(() => {
      const canvas = canvasRef.value;
      const ctx = canvas.getContext('2d');

      GlobalWorkerOptions.workerSrc = '/path-to/pdf.worker.js';

      getDocument(props.src)
        .promise.then(pdf => {
          pdf.getPage(1).then(page => {
            const viewport = page.getViewport({ scale: 1 });

            canvas.width = viewport.width;
            canvas.height = viewport.height;

            const renderTask = page.render({
              canvasContext: ctx,
              viewport,
            });

            renderTask.promise.then(() => console.log('Page rendered'));
          });
        })
        .catch(err => console.error(err));
    });

    return {
      canvasRef,
    };
  },
};
</script>

<style scoped>
.pdf-viewer {
  width: 100%;
  height: 100%;
}
</style>

上述代码中，我们使用了 Vue3 的 Composition API（ref 和 onMounted）来定义了一个组件 PdfViewer。该组件接受一个 src 属性，用于指定要展示的 PDF 文件的路径。

在 setup 函数中，我们通过 getDocument 方法来加载 PDF 文件，并使用 canvas 元素将 PDF 页面渲染出来。在加载 PDF 文件时，我们设置了 GlobalWorkerOptions.workerSrc，确保正确引入了 PDF.js 的 worker 文件。

在应用中使用

在你的应用中，可以通过以下方式在页面上展示 PDF 文件：

<template>
  <div>
    <h1>PDF Viewer</h1>
    <PdfViewer src="/path-to/demo.pdf" />
  </div>
</template>

<script>
import PdfViewer from './components/PdfViewer.vue';

export default {
  name: 'App',
  components: {
    PdfViewer,
  },
};
</script>

上述代码将在页面上展示一个名为 “PDF Viewer” 的标题，以及一个 PdfViewer 组件，其中的 src 属性指定了要展示的 PDF 文件的路径。

确保将实际的 PDF 文件路径替换为你自己的路径。

运行和测试

完成了上述的组件和配置后，我们可以运行应用来查看 PDF 文件的展示效果。

执行以下命令来运行应用：

npm run serve

在浏览器中访问 http://localhost:8080，你将看到一个页面，其中展示了指定的 PDF 文件。

总结

本文介绍了如何在 Vue3 中使用 PDF.js 来展示和交互 PDF 文件。首先，我们安装了必要的依赖，并在入口文件中配置了 PDF.js。然后，我们创建了一个 Vue3 组件来展示 PDF 文件，并使用了 PDF.js 的 API 来加载和渲染 PDF 页面。最后，我们在应用中使用了该组件，来展示指定的 PDF 文件。