H5预览PDF的坑

yyhh~2023-10-11 11:06

安装 npm install --save vue-pdf

具体代码块：

javascript 复制代码

   <div class="detail" v-show="preview">
      <div class="pdfTop">
        <div class="left" @click="goBack"></div>
        <div style="font-size: 16px" class="textpdf">{{ name }}</div>
      </div>
      <div class="pdf" v-show="fileType === 'pdf'">
        <div style="overflow: hidden" class="pdfbox">
          <pdf :src="preview" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
        </div>
        <p class="arrow">
          <span @click="changePdfPage(0)" class="turn" :class="{ grey: currentPage == 1 }">上一页</span>
          {{ currentPage }} / {{ pageCount }}
          <span @click="changePdfPage(1)" class="turn" :class="{ grey: currentPage == pageCount }">下一页</span>
        </p>
        <div class="preview-btn" @click="preview = null">关闭预览</div>
      </div>
    </div>

javascript 复制代码

//主要代码   
// 上下滚动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/pdfjs-dist@2.0.943/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 - 简书