vue-pdf的使用方式

项目的协议需要加载pdf文件，如果是ios手机，直接使用window.location = " https://xxx/xxx.pdf"就可以在浏览器自动打开pdf链接，但是安卓手机会弹出让下载的弹框，不能正常显示pdf的内容，所以改成使用vue-pdf。

附上vue-pdf的官方地址：https://www.npmjs.com/package/vue-pdf

yarn:
yarn install vue-pdf

npm:
npm install --save vue-pdf

pdfpage.vue:

<pdf  :src="pdfSrc" ></pdf>

import pdf from 'vue-pdf'
export default {
    components: {
       pdf,
    },
    data() {
      return {
        pdfSrc: '',
      }
    },
    mounted() {
       this.getNumPages("https://xxxxx.com/pdfPolicy/xxx.pdf")
    },
   methods: {
      getNumPages(url) {
        var loadingTask = pdf.createLoadingTask(url)
        loadingTask.promise.then(pdf => {
            this.pdfSrc = loadingTask
        }).catch((err) => {
            console.error('pdf加载失败')
        })
      },
   }
}

最基本的使用方式只能加载首页的内容，没有下滑和切换到下一页的功能，如果是很多页的pdf，则需要在以下两种方式中任选一种，使用户能够通过滑动或者手动切换下一页的方式查看更多内容。
ps：如果pdf的链接和项目不在同一个域名下，会存在跨域问题，打开的页面就是空白的。
我的解决方式是在与项目同域名的服务器里新建文件夹，把pdf文件放进去，这样打包项目之后就能正常浏览协议。

第一种：滑动浏览
一次性加载pdf的全部内容，弊端是页面越多加载速度越慢，有时候后面的内容先出来了，首页还只有一半。优点是最贴近直接用浏览器打开链接的样式，不用手动切换下一页

   <pdf  :src="pdfSrc"  v-for="i in numPages" :key="i"  :page="i"></pdf>

import pdf from 'vue-pdf'
export default {
    components: {
       pdf,
    },
    data() {
      return {
        pdfSrc: '',
        numPages: 1  //  pdf 文件总页数
      }
    },
    mounted() {
       this.getNumPages("https://xxxxx.com/pdfPolicy/xxx.pdf")
    },
   methods: {
      getNumPages(url) {
        var loadingTask = pdf.createLoadingTask(url)
        loadingTask.promise.then(pdf => {
            this.pdfSrc = loadingTask
            this.numPages = pdf.numPages
        }).catch((err) => {
            console.error('pdf加载失败')
        })
      },
   }
}

第二种：分页器（附带旋转、放大、缩小的方法）
这种方式更灵活，但是如果项目自身配置禁止缩放功能的话，还需要手动导入vue-meta-info

yarn add vue-meta-info

main.js:

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

pdfPage.vue

<div>
   <div class="tools">
      <van-button type="default" @click.stop="prePage" class="mr10">上一页</van-button>
      <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
      <van-button type="default" @click.stop="nextPage" class="mr10">下一页</van-button>
      <!-- <van-button type="default" @click.stop="clock" class="mr10">顺时针</van-button>
      <van-button type="default" @click.stop="counterClock" class="mr10">逆时针</van-button> 
      <van-button type="default" @click.stop="scaleBig" class="mr10">放大</van-button>
      <van-button type="default" @click.stop="scaleSmall" class="mr10">缩小</van-button>-->
   </div>
   <pdf
        :src="pdfSrc" 
        :page="pageNum"
        class="pdf"
        ref="wrapper"
        :rotate="pageRotate"  
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)" 
        @num-pages="pageTotalNum=$event" 
        @error="pdfError($event)" 
        @link-clicked="page = $event">
    </pdf>
</div>

import pdf from 'vue-pdf'
import { Button } from 'vant';
export default {
    metaInfo: {   //  这里是给页面修改
          title: '',
          meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
          ]
      },
    components: {
       pdf,
    },
    data() {
      return {
        pdfSrc: '',
        numPages: 1  //  pdf 文件总页数
      }
    },
    mounted() {
       this.getNumPages("https://xxxxx.com/pdfPolicy/xxx.pdf")
    },
   methods: {
     getNumPages(url) {
      var loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then((pdf) => {
          this.pdfSrc = loadingTask;
          this.pageTotalNum = pdf.pageTotalNum;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
     },
    // 上一页函数，
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
    scaleBig() {
      this.scale += 10;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },
    scaleSmall() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -10;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
    },
   }
}