【无标题】Vue 在线预览PDF

预览pdf

• npm install --save vue-pdf (我使用的版本 ^4.3.0)

 <pdf v-loading="isLoading" ref="pdf" v-for="i in numPage" :key="i" :page="i" :src="src" @page-loaded="handle($event)" />

import pdf from 'vue-pdf'
export default {
 components: {
   pdf
 },
 data() {
   return {
     src: '',
     numPage: '',
     isLoading: true,
   }
 },
 created() {
	this.src = pdf.createLoadingTask({
	    url: './测试文件.pdf', // 文件路径
	    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/', // 解决字符丢失
	    cMapacked: true
	  })
   this.src.promise
     .then(pdf => {
       this.numPage = pdf._pdfInfo.numPages
       this.isLoading = false
    })
    .catch(err => {
      this.$message('该文件不存在或破损')
      this.isLoading = false
    })
  },
methods:{
   handle(e) {
     this.isLoading = false
   },
 }
}