使用Vue.js轻松实现PDF文件在线预览

一、选取需要预览的PDF文件

在Vue.js应用中，我们需要提供选取PDF文件的功能。通过使用element-ui提供的Upload组件，我们可以方便的实现文件上传功能。建立一个上传组件，并配置相关参数：

<template>
  <div class="uploadBox">
    <el-upload
      ref="upload"
      action="http://localhost:3000/upload"
      :on-success="handleSuccess"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="false"
      :before-upload="beforeUpload"
      class="upload-demo"
      :show-file-list="false">
      <el-button slot="trigger" size="small" :loading="uploading">选取文件</el-button>
      <span slot="tip" class="uploadTip">支持PDF文件格式</span>
    </el-upload>
  </div>
</template>

其中，Upload组件的action属性指定文件上传的地址，这里我们使用了本地服务器3000端口。file-list属性绑定一个数组，里面存储着已经选中的PDF文件。auto-upload和multiple属性分别表示选取完文件后是否立即上传和是否可以一次选取多个文件。before-upload方法在开始上传之前做的一些验证，这里我们验证了只允许上传PDF文件。

二、使用pdf.js进行PDF文件渲染

pdf.js是Mozilla开源的一个支持渲染PDF文件的JavaScript库。我们可以利用这个库对PDF文件进行渲染。首先在Vue.js应用中引入pdf.js库：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

然后在Vue.js组件中定义一个canvas元素，并获取canvas的渲染上下文，用来渲染PDF文件的页面：

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

<script>
export default {
  mounted() {
    this.renderPDF();
  },
  methods: {
    async renderPDF() {
      const canvas = this.$refs.pdfViewer
      const context = canvas.getContext('2d')
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1 })
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext);
    }
  }
}
</script>

这里我们使用了pdfjsLib这个库来加载PDF文件，并获取需要渲染的页面。通过getViewport方法获取页面的Viewport对象（包含页面大小和缩放比例等信息），然后通过render方法将页面渲染到canvas上。这样，我们就可以在网页中实现PDF文件的预览功能。

三、完整的代码示例

下面是完整的Vue.js组件代码示例，包含了上传PDF文件和渲染PDF文件的功能。

<template>
  <div class="pdfViewer">
    <canvas ref="pdfViewer"></canvas>
    <div class="uploadBox">
      <el-upload
        ref="upload"
        :action="uploadUrl"
        :on-success="handleSuccess"
        :file-list="fileList"
        :auto-upload="false"
        :multiple="false"
        :before-upload="beforeUpload"
        class="upload-demo"
        :show-file-list="false">
        <el-button slot="trigger" size="small" :loading="uploading">选取文件</el-button>
        <span slot="tip" class="uploadTip">支持PDF文件格式</span>
      </el-upload>
    </div>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  data() {
    return {
      pdfUrl: '',
      fileList: [],
      uploading: false,
      uploadUrl: 'http://localhost:3000/upload'
    }
  },
  mounted() {
    this.renderPDF()
  },
  methods: {
    async renderPDF() {
      const canvas = this.$refs.pdfViewer
      const context = canvas.getContext('2d')
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1 })
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext)
    },
    handleSuccess(response, file, fileList) {
      this.pdfUrl = response.path
      this.fileList = fileList
      this.renderPDF()
    },
    beforeUpload(file) {
      const isPDF = file.type === 'application/pdf'
      if (!isPDF) {
        this.$message.error('只能上传PDF文件')
      }
      return isPDF
    }
  }
}
</script>

以上就是使用Vue.js轻松实现PDF文件在线预览的方法和步骤。通过引入pdf.js库，我们可以轻松的实现PDF文件的渲染。在Vue.js应用中，我们可以通过element-ui的Upload组件提供上传PDF文件的功能。最终实现一个完整的PDF文件在线预览功能。希望本文能够帮助大家。