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

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

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

npm install pdfjs-dist@2.5.207

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

<template>
  <div class="pdf-page">
    <div id="viewerContainer" ref="container">
      <div id="viewer" class="pdfViewer"/>
    </div>
  </div>
</template>
<script>
  import getPdfjsDist from '../../plugins/getPdfjsDist.js'

  export default {
    name: 'Pdf',
    props: {
      url: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'canvas'
      },
      pdfjsDistPath: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        pdfViewer: null,
        pdfLinkService: null,
        currentScale: 'page-width',
        loadingTask: null
      }
    },

    methods: {
      onPagesInit({source}) {
        source.currentScaleValue = this.currentScale
      },
      async pdfLibInit() {
        let pdfjsLib = window.pdfjsLib;
        let pdfjsViewer = window.pdfjsViewer
        if (!pdfjsLib || !pdfjsViewer) {
          try {
            await getPdfjsDist(this.pdfjsDistPath)
            this.CMAP_URL = `${this.pdfjsDistPath}/pdf/cmaps/`;
            pdfjsLib = window.pdfjsLib;
            pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdf/build/pdf.worker.js`
            pdfjsViewer = window.pdfjsViewer
          } catch (error) {
            // console.log(error)
            // pdfjs文件获取失败
            return
          }
        }

        const container = this.$refs.container
        const eventBus = new pdfjsViewer.EventBus();

        // (Optionally) enable hyperlinks within PDF files.
        const pdfLinkService = new pdfjsViewer.PDFLinkService({
          eventBus: eventBus,
        });
        this.pdfLinkService = pdfLinkService
        const pdfViewer = new pdfjsViewer.PDFViewer({
          container: container,
          eventBus: eventBus,
          linkService: pdfLinkService,
          renderer: this.type,
          textLayerMode: 0,
          downloadManager: new pdfjsViewer.DownloadManager({}),
          enableWebGL: true
        });
        this.pdfViewer = pdfViewer
        pdfLinkService.setViewer(pdfViewer);

        eventBus.on("pagesinit", this.onPagesInit);
      },
      renderPdf() {
        if (!this.url) {
          return
        }
        // Loading document.
        if (this.pdfViewer === null || this.pdfLinkService === null) {
          return
        }
        if (this.loadingTask !== null) {
          this.loadingTask.destroy()
          this.loadingTask = null
        }
        this.loadingTask = window.pdfjsLib.getDocument({
          cMapUrl: this.CMAP_URL,
          cMapPacked: true,
          url: this.url,
        });
        return this.loadingTask.promise.then((pdfDocument) => {
          if (pdfDocument.loadingTask.destroyed || !this.url) {
            return
          }
          this.pdfViewer.setDocument(pdfDocument)
          this.pdfLinkService.setDocument(pdfDocument, null);
          this.loadingTask = null
        }).catch(error => {
          console.log(error)
        });
      }
    },
    mounted() {
      this.pdfLibInit().then(() => {
        this.renderPdf()
      })
    },
    watch: {
      url() {
        // 如果存在pdfViewer则取消渲染
        if (this.pdfViewer) {
          this.pdfViewer._cancelRendering()
        }
        this.renderPdf()
      }
    },
  }
</script>

5、页面上引用

<template>
  <div class="report-food-page">
    <header-top title="食物不耐受报告" showReturn="black"></header-top>
    <pdf v-if="pdfUrl" :url="pdfUrl" :type="'canvas'" :pdfjsDistPath="'/src/plugins'"/>
    <div v-else>
      <default-page showText="暂无报告"></default-page>
    </div>
  </div>
</template>

<script>
  import {mapActions, mapGetters, mapMutations} from 'vuex'
  import pdf from '@/components/pdf/pdf.vue'
  import headerTop from '@/components/header/top.vue'
  import defaultPage from '@/components/other/defaultPage.vue'

  export default {
    name: 'reportFood',
    props: {},
    components: {headerTop, defaultPage, pdf},
    data() {
      return {
        pdfUrl: "",
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    mounted() {
      this.loadPDF()
    },
    methods: {
      ...mapMutations(['setLoading']),
      ...mapActions(['findBedLastByPhone']),
      loadPDF() {
        this.pdfUrl = 'https://cdn.xun-qi.cn/manjkc/test.pdf'
      },

    }
  }
</script>

<style lang="less" scoped>
  .report-food-page {
  }
</style>

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

第一：印章不显示：

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

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

效果展示：

image.png
image.png