手机端浏览器使用vue-pdf实现PDF文件预览(踩坑版)

写在前边：

        踩了N多次坑，耗时1整天，找了网上很多的文章，最后综合各种方法，才得以解决。

        首先PDF预览有很多种情况，pc浏览器的预览相对简单很多，也有很多现成的案例。这里我们只说手机端的实现。我的需求是后端返回一个PDF的下载地址，这个地址在浏览器上打开就是下载PDF文件，本来是想直接让vue-pdf的src直接等于这个下载链接，但是中间碰到了跨域的错误（本地的地址和开发环境不同），这样直接使用有点行不通，后来改成使用axios请求，下载到文件之后，又碰到一堆解析的问题，总结了一下网上各位大神的方法，主要是需要把请求回来的PDF文件流转换成Blob文件，才可以成功。先看效果：

​​​​​​​

        项目中使用的vue,vant2框架。

第一步：先导入框架   package.json的dependencies中添加 ： "vue-pdf": "^4.2.0",

然后执行 npm install

第二部：项目中的使用

 
布局文件：
<template>
  <div class="parent-container">
    <!-- -->
    <div class="head-bar">
      <img class="left" :src="leftImg" @click="goBack" />
      <div class="head-title">操作手册</div>
    </div>

    <div class="div-pdf">
      <pdf
        v-for="item in pageTotal"
        :key="item"
        :src="pdfSrc"
        :page="item"
      ></pdf>
    </div>
  </div>
</template>

js代码：
 // 导入vue-pdf
import pdf from 'vue-pdf'

export default {
    name: 'EagleAppTdrt10OperationInstruction',
    data() {
      return {
        pdfSrc: '',
        pageTotal: 1,
      }
    },
    components: {
      pdf,
    },

mounted(){
        this.$axios
          .get(
            `你的文件下载地址`,
            // 需要添加这个，不添加就会有警告，PDF解析失败
            { responseType: 'blob' }
          )
          .then((res) => {
            const blob = new Blob([res], {
              type: 'application/pdf;charset-UTF-8',
            })
            const url = window.URL.createObjectURL(blob)
            // 到这里就可以显示了，但是只显示了一页
            this.pdfSrc = url
            // 布局中使用了v-for设置出所有的PDF页，后续你可以自己添加上一页下一页的按钮，我目前是直接所有的都显示出来
            this.getNumPages(url)
          })
}

// 设置分页
 getNumPages(url) {
        this.pdfSrc = pdf.createLoadingTask(url)
        this.pdfSrc.promise
          .then((pdf) => {
            this.pageTotal = pdf.numPages
          })
          .catch((err) => {
            console.error('pdf加载失败', err)
          })
      },


css代码：
 .parent-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 100vh;
    background-color: #ffffff;
    overflow-x: hidden;
    .head-bar {
        width: 100%;
      height: 126px;
    }

    .div-pdf {
      width: 100%;
      height: 100%;
    }
}

最后，初学vue，如有不足之处，请多多指正！