H5预览PDF的坑

安装 npm install --save vue-pdf

具体代码块：

   

      

        

        
{{ name }}
      
      

        

          
        
        

          上一页
          {{ currentPage }} / {{ pageCount }}
          下一页
        
        
关闭预览
      
    

//主要代码   
// 上下滚动pdf加载
    loadPdf(videoUrl) {//videoUrl后端返回的PDF地址
     //开始用的这个代码有问题移动端提示this.preview没有promise这个方法，所以换了一种方法
      // this.preview.promise.then((pdf) => {
      //   console.log('pdf', pdf)
      //   if (pdf && pdf._pdfInfo.numPages) {
      //     this.$nextTick(() => {
      //       this.numPages = pdf._pdfInfo.numPages // pdf总页数
      //     })
      //   }
      // })
      this.vuePdf = require('vue-pdf')
      let CMAP_URL = 'https://unpkg.com/[email protected]/cmaps/'
      this.vuePdf.default.createLoadingTask)
      this.preview = this.vuePdf.default.createLoadingTask({
        cMapUrl: CMAP_URL,
        cMapPacked: true,
        url: videoUrl
      })
      this.currentPage = 1
    }

基本上就可以直接用了（自己调以下样式就好了）

中途出现了一个坑就是后端给我返回的是http形式的pdf，而我的项目是https的导致在本地运行的时候pdf正常显示，移动端就一片空白。找了半天问题。呜呜呜呜呜害我换了pdf.js又换了iframe都有这个问题

统一一下http形式就可以了。

感谢以下博主：

移动端实现预览pdf - 简书