记录Vue.js开发中使用相关插件实现预览PDF文件

Blog原文：多仔 · Enjoy - https://www.l5v.cn/archives/334/

前言

近期在做一个前端项目时，需要在网页中预览本地pdf文件。经过一番搜索，百度上的解决方案推荐使用vue-pdf插件。

但是vue-pdf插件的问题不少，比如：

按照文档编写代码，但是控制台却报错且没有合适的解决方案。

实现打印PDF文档的时候，文字会出现乱码。

其他奇奇怪怪的问题。

而解决vue-pdf产生的问题需要修改vue-pdf的源代码、或者是引入其他第三方插件补丁解决，因此使用起来还是很麻烦的。

经过我深入搜索，发现一个更适合vue项目预览PDF文件的插件：vue-pdf-up，可以说是vue-pdf的升级版。

npmjs地址：https://www.npmjs.com/package/vue-pdf-up

---

解决方案

1、在项目中安装vue-pdf-up：

npm install vue-pdf-up

2、创建一个components，用于设计PDF预览组件：

<template>
  <div>
    <div class="mb-4">
      <vue-pdf-up ref="pdfView" :src="url" :page="pageNum" @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event"
           @link-clicked="page=$event" class="border border-black-op border-2x">vue-pdf-up>
    div>
    <div class="text-center">
      <b-button-group>
        <b-button class="my-1" size="sm" variant="light" @click.stop="prePage">上一页b-button>
        <b-button class="my-1" size="sm" variant="light" @click.stop="nextPage">下一页b-button>
      b-button-group>
      <b-button-group>
        <b-button class="my-1" size="sm" variant="light">当前第 {{pageNum}} 页 / 共 {{pageTotalNum}} 页b-button>
      b-button-group>
    div>
  div>
template>

<script>
import vuePdfUp from 'vue-pdf-up'

export default {
  name: 'BasePdfView',
  components: {
    vuePdfUp
  },
  props: {
    src: {
      default: ''
    }
  },
  data () {
    return {
      url: '',
      pageTotalNum:1,
      curPageNum:0,
      pageNum:1,
      password:''
    }
  },
  mounted () {
    this.getPdfNum(this.src.default)
  },
  methods: {
    getPdfNum(url) {
      let loadingTask = vuePdfUp.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.url = loadingTask
        this.pageTotalNum = pdf.numPages
      }).catch(err => {})
    },
    prePage() {
      this.pageNum = this.pageNum > 1 ? this.pageNum - 1 : this.pageTotalNum
    },
    nextPage() {
      if (this.pageTotalNum > 1) {
        this.pageNum++
        if (this.pageNum > this.pageTotalNum) {
          return this.pageNum = 1
        }
      }
    },
    pageLoaded(e) {
      this.curPageNum = e
    }
  }
}
script>

<style scoped>

style>

3、注册components，并在需要预览的地方使用预览组件：

<base-pdf-view src="PDF链接">base-pdf-view>

---

使用预览组件预览本地PDF文件

1、使用预览组件预览本地PDF文件的方法：

<base-pdf-view :src="require('@/assets/source/agreement/docs/basic.pdf')">base-pdf-view>

2、安装file-loader：

npm install file-loader --save-dev

3、修改vue.config.js：

chainWebpack(config) {
	config.module
	.rule('file')
	.test(/\.pdf$/)
	.use('file-loader')
	.loader('file-loader')
	.options({
	limit: 10000,
	outputPath: 'file'
	})
}

---

打包项目后在根目录出现hash.worker.js

1、在项目打包后会在编译后的文件根目录中生成hash.worker.js，为了将hash.worker.js移动到js专用的文件夹内，需要进入目录node_modules/worker-loader/dist/index.js找到：

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {

修改为

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'js/[hash].worker.js', {

2、安装patch-package：

npm i patch-package --save-dev

3、在package.json中加入以下代码，后续执行npm install命令时，会自动为依赖包打补丁。

"scripts": {
	"postinstall": "patch-package"
}