Vue3实现PDF预览应用|极客教程

Vue3实现PDF预览应用

介绍

在现代Web开发中，PDF文件经常作为一种常见的文档格式被使用。在许多应用场景中，我们可能需要在网页中展示PDF文件，使用户可以在不离开当前页面的情况下查看文档内容。本文将介绍如何利用Vue3框架实现一个简单的PDF预览应用。我们将使用pdfjs-dist库来解析和渲染PDF文件，并结合Vue3的组件化开发来构建一个具有预览功能的Web应用。

技术栈

Vue3：流行的JavaScript框架，用于构建用户界面
pdfjs-dist：用于在Web上处理和渲染PDF文件的库
JavaScript：用于编写逻辑代码
HTML/CSS：用于构建页面结构和样式

实现步骤

1. 安装Vue3

在开始之前，我们需要确保已经安装了Vue3。如果未安装，可以通过以下命令进行安装：

npm install -g @vue/cli
vue create vue3-pdf-app
cd vue3-pdf-app
npm install

2. 安装pdfjs-dist

接下来，我们需要安装pdfjs-dist库，用于处理PDF文件。可以通过以下命令进行安装：

npm install pdfjs-dist

3. 创建PDF组件

在Vue应用中，我们将创建一个名为PdfViewer的组件来承载PDF文件的预览功能。首先在src/components目录下创建一个名为PdfViewer.vue的文件，并编写如下内容：

<template>
  <div>
    <canvas ref="pdfViewer"></canvas>
  </div>
</template>

<script>
import { nextTick } from 'vue';
import pdfjs from 'pdfjs-dist/legacy/build/pdf';

export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.renderPdf();
  },
  methods: {
    async renderPdf() {
      const loadingTask = pdfjs.getDocument(this.src);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const scale = 1.5;
      const viewport = page.getViewport({ scale });
      const canvas = this.$refs.pdfViewer;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext);
    }
  },
  watch: {
    src: {
      immediate: true,
      handler() {
        this.renderPdf();
      }
    }
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid #333;
}
</style>

4. 在App组件中使用PdfViewer组件

现在我们可以在App.vue组件中使用之前创建的PdfViewer组件来实现PDF文件的预览功能。在src目录下的App.vue文件中，修改如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <pdf-viewer :src="pdfUrl" v-if="pdfUrl" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  components: {
    PdfViewer: () => import('./components/PdfViewer.vue')
  },
  setup() {
    const pdfUrl = ref('');

    const handleFileChange = (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = async () => {
        pdfUrl.value = reader.result;
      };
      reader.readAsDataURL(file);
    };

    return {
      pdfUrl,
      handleFileChange
    };
  }
};
</script>