Vue中将PDF文件完美展示出来的小技巧

前端

2023-06-06 22:42:37

在Vue中实现移动端PDF预览

对于移动端用户而言，能够预览和编辑PDF文档至关重要。借助Vue.js的强大功能，实现这一目标变得轻而易举。本文将深入探讨如何在Vue中实现PDF预览，解决可能遇到的问题，并提供丰富的示例代码。

引入必要的库

首先，我们需要引入一些库来帮助我们实现PDF预览：

pdfjs-dist： 用于解析PDF文档
vue-pdf： 用于在Vue中显示PDF文档

创建Vue组件

接下来，创建一个Vue组件来显示PDF文档，我们可以使用<pdf>标签：

<template>
  <div>
    <pdf :src="pdfSrc" :page="currentPage" @page-change="onPageChange" />
  </div>
</template>

<script>
import { PDFDocument } from 'pdfjs-dist'
import { ref, onMounted, onUpdated, watch } from 'vue'

export default {
  props: {
    pdfSrc: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const pdfDocument = ref(null)
    const currentPage = ref(1)

    onMounted(async () => {
      const data = await fetch(props.pdfSrc).then(res => res.arrayBuffer())
      pdfDocument.value = await PDFDocument.load(data)
    })

    onUpdated(() => {
      renderPage(currentPage.value)
    })

    watch(currentPage, (newPage, oldPage) => {
      if (newPage !== oldPage) {
        renderPage(newPage)
      }
    })

    const renderPage = (pageNumber) => {
      pdfDocument.value.getPage(pageNumber).then((page) => {
        const viewport = page.getViewport({ scale: 1 })
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        canvas.width = viewport.width
        canvas.height = viewport.height

        page.render({
          canvasContext: context,
          viewport
        }).then(() => {
          const dataURL = canvas.toDataURL('image/png')
          this.$emit('page-change', dataURL)
        })
      })
    }

    return {
      pdfDocument,
      currentPage
    }
  }
}
</script>

使用组件

现在，可以在Vue中使用这个组件来显示PDF文档了：

<template>
  <div>
    <pdf :src="'/path/to/pdf.pdf'" />
  </div>
</template>

<script>
import MyPDFComponent from './MyPDFComponent.vue'

export default {
  components: {
    MyPDFComponent
  }
}
</script>