vue+vite中直接打开pdf文件（插件pdfjs-dist）

参考博客：https://www.52pojie.cn/thread-1391808-1-1.html

1、下载插件，需要带版本号，npm程序会下载固定版本的包。为啥要用这个版本，因vue-3.0中使用过高或者过低的版本，会报错。因本人工作进度，也没详细去了解

npm install [email protected]

2、封装pdfjs-dist

找到node-modules>pdfjs-dist>es5文件夹和node-modules>pdfjs-dist里面的cmaps文件夹整个复制到
plugins>pdf(新建pdf文件夹，把那三个小文件夹复制到这里，一个都不能少！！！！！！)

image.png

3、新建文件plugins/getPdfjsDist.js 新建第三方封装 获取文件方法

image.png

  const getJavsScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.onload = resolve
    script.onerror = reject

    script.src = src
    document.body.append(script)
  })
}
const getCss = (href) => {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link')

    link.onload = resolve
    link.onerror = reject

    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('type', 'text/css')
    link.href=href
    document.body.append(link)
  })
}
const getPdfjsDist = (pdfjsDistPath) => {
  console.log(pdfjsDistPath)
  return getJavsScript(`${pdfjsDistPath}/pdf/build/pdf.js`)
    .then(() => {
      return Promise.all([
        getJavsScript(`${pdfjsDistPath}/pdf/web/pdf_viewer.js`),
        getCss(`${pdfjsDistPath}/pdf/web/pdf_viewer.css`)
      ])
    })
}
export default getPdfjsDist

4、新建pdf.vue组件

image.png

5、页面上引用

6、关于某些部分不显示的问题

第一：印章不显示：

if (data.fieldType === "Sig") {
      data.fieldValue = null;
                        // 注释下面这句话
      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}

第二： 查看一下是不是某些文件是不是没有引入，文件路径是否正确

效果展示：

image.png

image.png