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

多仔ヾ发布于 2021-12-28 • 884 阅读

首页 · 随笔 · 生活 · 学习 · 搜索

· ·

时光大概如你所说，活在当下，看见远方。 - @多仔ヾ

##### 前言

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

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

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

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

（3）其他奇奇怪怪的问题。

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

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

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

-----

##### 解决方案

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

```shell
npm install vue-pdf-up
```

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

```html
<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>

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>
```

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

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

-----

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

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

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

2、安装file-loader：

```shell
npm install file-loader --save-dev
```

3、修改vue.config.js：

```javascript
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找到：

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

修改为

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

2、安装patch-package：

```shell
npm i patch-package --save-dev
```

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

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

如无特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：时光话 - https://www.l5v.cn/archives/334/

上一篇 [学习笔记] JVM之JVM简介

下一篇记录Vue.js开发中使用router-link时url变化，数据不变问题的解决方案

关于 · 归档 · 邻居 · 搜索 · 网站地图