H5预览PDF的坑

   
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>
    

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