vue——pdf预览

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

最近项目中有预览pdf文件的需求，调研了几个预览的npm包，最后决定使用pdfh5这个npm包来实现pdf文件预览。下面我们来看下pdfh5在vue项目中的使用方法以及遇到的问题。

pdfh5引用

pdfh5是一个移动端的预览pdf文件的组件库，pdfh5可以直接通过script标签引用，也可以通过npm包来进行引入，这里我们通过npm来在项目中进行引入

npm install pdfh5

pdfh5使用

pdfh5暂时没有对ts的适配，所以暂时ts类型定义为any。

import Pdfh5 from 'pdfh5'
const pdf: Ref<any> = ref(null)

onMounted(() => {
  pdf.value = new Pdfh5('#pdf-box', {
    pdfurl: 'http://localhost:8081/1.pdf'
  })
  pdf.value.on('complete', function (status: string, msg: string, time: string) {
    console.log(status, msg, time)
  })
})

onBeforeUnmount(() => {
  pdf.value.destroy()
})

如上代码，通过new Pdfh5()来进行实例化，实例化的时候需传入一个div元素和要展示的pdf地址pdfurl。实例化之后就可以监听一些加载pdf的事件，例如开始渲染ready、加载完成complete等，可根据自己的业务需要来监听事件完成相应的功能。另外在页面关闭的时候最好销毁掉pdf实例。

代码编写完成，启动项目，发现报如下错误：

此错误是因为在webpack5版本当中，移除了nodejs核心模块的polyfill自动导入，如果在打包的过程当中，使用了nodejs的核心模块（像http、https等），则就直接报错，这时我们需要进行相应的配置，如下：

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  }
})

通过npm安装node-polyfill-webpack-plugin包，然后在vue.config.js文件中进行webpack配置即可。配置完成后重新启动，运行正常。

打开的pdf发现样式错乱，需要在style标签中进行样式的引入，引入之后页面正常，如下：

@import 'pdfh5/css/pdfh5.css';

需注意，pdf预览不支持跨域，如果在本地环境中把加载的pdfurl换成正式环境的pdf链接，则会出现跨域的报错，如下：

所以如果需要预览的pdf地址存在跨域，需要使用代理或让服务端来解决下跨域，就可以正常访问了。