vue 项目使用pdfjs 以及企业章不显示的解决

第一坑，下载pdfjs-dist 一定要指定版本

指定版本
yarn add pdfjs-dist@2.2.228  

直接上代码

//模板

<template>

  <div class="center">

    <div class="contor">

      <button

        @click="prev"

      >上一页</button>

      <span>

        <span v-text="page_num" /> /

        <span v-text="page_count" />

      </span>

      <button

        @click="next"

      >下一页</button>

      <button

        @click="addscale"

      >放大</button>

      <button

        @click="minus"

      >缩小</button>

    </div>

    <canvas id="the-canvas" class="canvasstyle" />

  </div>

</template>

// js代码

<script>

// import PDFJS from 'pdfjs-dist'

const PDFJS = require('pdfjs-dist')

PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min')

 

export default {

    name: 'Uploading',

    components: {

    },

    data () {

    return {

      pdfUrl: 'https://***/A388.pdf',     // 修改为自己的pdf地址

      pdfDoc: null, // pdfjs 生成的对象

      pageNum: 1, //

      pageRendering: false,

      pageNumPending: null,

      scale: 1.7, // 放大倍数

      page_num: 0, // 当前页数

      page_count: 0, // 总页数

      maxscale: 2.2, // 最大放大倍数

      minscale: 1.2 // 最小放大倍数

    }

  },

  computed: {

    ctx () {

      const id = document.getElementById('the-canvas')

      console.log('id', id)

      return id.getContext('2d')

    }

  },

  methods: {

    onClickLeft () {

      window.history.go(-1)

    },

    init (pdfUrl) {

      const _this = this

      // 初始化pdf

      PDFJS.getDocument(pdfUrl).then(function (pdfDoc_) {

        _this.pdfDoc = pdfDoc_

        _this.page_count = _this.pdfDoc.numPages

        _this.renderPage(_this.pageNum)

      })

    },

    renderPage (num) {

      // 渲染pdf

      const vm = this

      this.pageRendering = true

      const canvas = document.getElementById('the-canvas')

      // Using promise to fetch the page

      this.pdfDoc.getPage(num).then(function (page) {

        var viewport = page.getViewport(vm.scale)

        // alert(vm.canvas.height)

        canvas.height = viewport.height

        vm.pdfWidth = canvas.width = viewport.width

        // Render PDF page into canvas context

        var renderContext = {

          canvasContext: vm.ctx,

          viewport: viewport

        }

        var renderTask = page.render(renderContext)

        // Wait for rendering to finish

        renderTask.promise.then(function () {

          vm.pageRendering = false

          if (vm.pageNumPending !== null) {

            // New page rendering is pending

            vm.renderPage(vm.pageNumPending)

            vm.pageNumPending = null

          }

        })

      })

      vm.page_num = vm.pageNum

    },

    addscale () {

      // 放大

      if (this.scale >= this.maxscale) {

        return

      }

      this.scale += 0.5

      this.queueRenderPage(this.pageNum)

    },

    minus () {

      // 缩小

      if (this.scale <= this.minscale) {

        return

      }

      this.scale -= 0.5

      this.queueRenderPage(this.pageNum)

    },

    prev () {

      // 上一页

      const vm = this

      if (vm.pageNum <= 1) {

        return

      }

      vm.pageNum--

      vm.queueRenderPage(vm.pageNum)

    },

    next () {

      // 下一页

      const vm = this

      if (vm.pageNum >= vm.page_count) {

        return

      }

      vm.pageNum++

      vm.queueRenderPage(vm.pageNum)

    },

    queueRenderPage (num) {

      if (this.pageRendering) {

        this.pageNumPending = num

      } else {

        this.renderPage(num)

      }

    }

  },

  mounted () {

  // 解决字体问题

    const CMAP_URL = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/'

    const obj = {}

    obj.url = this.$route.query.agreementPdfUrl // pdf文件地址，根据情景自行修改

    obj.url = 'https://****/Yg628.pdf'

    obj.cMapUrl = CMAP_URL

    obj.cMapPacked = true

    this.init(obj)

  }

 

}

</script>

 

代码结束

pdf 文件必须允许 跨域访问   https://***/A388.pdf   这里要求服务端设置允许pdf文件跨域

 

第一种方法：网上普遍的方法——注释法

注释掉pdf.worker.js里的这三行代码：【我的是新版pdf.js 在19867行】

// if (data.fieldType === "Sig") {
//   data.fieldValue = null;
//   this.setFlags(_util.AnnotationFlag.HIDDEN);
// }

   

也可以看这个 https://blog.youkuaiyun.com/s_y_w123/article/details/108869862