用 Vue 中的 PDF.js 在线预览 PDF 文件流：你的文件，随时随地畅享！

2023-05-14 08:32:59

如何在 Vue 中使用 PDF.js 预览 PDF 文件

简介

在现代 Web 开发中，提供用户友好的文档查看体验至关重要。PDF.js 是一款出色的 JavaScript 库，可以轻松地将 PDF 文件解析和呈现到浏览器中。本文将引导您逐步了解如何在 Vue 应用程序中集成 PDF.js，从而实现在线 PDF 预览。

安装 PDF.js

首先，通过以下命令安装 PDF.js：

npm install pdfjs-dist

配置 Vue 应用程序

在 Vue 应用程序中，在 main.js 文件中配置 PDF.js：

import Vue from 'vue'
import VuePDF from 'pdfjs-dist'

Vue.use(VuePDF)

创建 PDF 预览组件

接下来，创建一个 PdfPreview 组件来处理 PDF 文件的呈现：

<template>
  <div>
    <canvas ref="pdfCanvas" style="width: 100%; height: 100%;"></canvas>
  </div>
</template>

<script>
import Vue from 'vue'
import { PDFJS } from 'pdfjs-dist'

export default {
  props: {
    pdfFile: {
      type: File,
      required: true
    }
  },
  data() {
    return {
      pdfDocument: null,
      currentPage: 1,
      totalPages: 0,
      canvasContext: null
    }
  },
  mounted() {
    this.canvasContext = this.$refs.pdfCanvas.getContext('2d')
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      this.pdfDocument = await PDFJS.getDocument(this.pdfFile).promise
      this.totalPages = this.pdfDocument.numPages
      this.renderPage(this.currentPage)
    },
    async renderPage(pageNumber) {
      const page = await this.pdfDocument.getPage(pageNumber)
      const viewport = page.getViewport({ scale: 1 })
      this.$refs.pdfCanvas.width = viewport.width
      this.$refs.pdfCanvas.height = viewport.height
      await page.render({ canvasContext: this.canvasContext, viewport })
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage += 1
        this.renderPage(this.currentPage)
      }
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage -= 1
        this.renderPage(this.currentPage)
      }
    }
  }
}
</script>

使用 PDF 预览组件

在 Vue 组件中使用 PdfPreview 组件：

<template>
  <div>
    <pdf-preview :pdf-file="pdfFile"></pdf-preview>
  </div>
</template>

<script>
import Vue from 'vue'
import PdfPreview from './components/PdfPreview.vue'

export default {
  components: {
    PdfPreview
  },
  data() {
    return {
      pdfFile: null
    }
  },
  methods: {
    async loadPdf(file) {
      this.pdfFile = file
    }
  }
}
</script>