vue-pdf使用方法和踩坑记录_vue-pdf示例

vue-pdf使用方法和踩坑记录

vue中使用vue-pdf插件完成多页pdf文件预览

安装

npm install --save vue-pdf

示例

单页

<pdf   ref="pdf" :src="pdfUrl"> </pdf>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"***.pdf",//pdf链接/路径（本地文件需要放在public或者static中）
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12

多页

<pdf   ref="pdf" v-for="i in numPages.numPages" :key="i" :src="numPages.url" :page="i"> </pdf>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
         numPages:{
                numPages:0,  //页数
                url:null           //pdf路径
        }
      }
  },
  methods:{
	  async handelPdf(item) {
                // 使用本地的pdf文件 (必须放到public(vue-cli 4+)或者static文件里面)
                this.numPages.numPages = await PDFHandle.createLoadingTask(item.url,{withCredentials: false}).promise.then(pdf => {
                    return pdf.numPages
                }).catch(err => {
                    console.error('pdf加载失败', err);
                })
                this.numPages.url =  item.url
        },
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

踩坑记录

错误
window is not defind
原因
this指向问题
解决方法
修改一下webpack.base.config.js中全局的this指向

或者 vue.config.js中全局的this指向