使用vue-pdf

1. 官网例子： 官网例子

使用教程：

1.安装：

npm install vue-pdf
or:
yarn add vue-pdf
           

1. 导入：

   import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data()
  {
   pdfFileURL: '',
  },
  
  methods: {
   //pdf加载并获取总页数
        getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.pdfFileURL);

            this.numPages = '';

            loadingTask.promise
                .then((pdf) => {
                    this.numPages = pdf.numPages;
                    //console.log('总页数'+this.numPages);
                })
                .catch((err) => {
                    console.error('pdf 加载失败', err);
                });
        },
  }
}
           

循环遍历展示pdf：

<elment>
<pdf ref="pdf" v-for="i in numPages" :key="i" :src="pdfFileURL" :page="i" class="pdf-wrap"></pdf>
</element>