vue 项目中pdf文件预览

第一种方法： iframe

<iframe
        src="pdf文件路径"
        height="100%"
        width="100%"
      ></iframe>

第二种方法： 引入依赖 vue-pdf

1.先下载依赖

npm install --save vue-pdf

2.在页面中引入pdf

import pdf from 'vue-pdf'

3.页面代码展示

单页的pdf

<pdf :src="pdf文件"/>

多页的pdf

<pdf v-for="item in numPages" ref="pdf" :key="item" :page="item" :src="pdf文件"/>
data () {
	return {
		numPages: 0
	}
}
mounted () {
	this.getPDFnums(pdf文件)
}，
methods:{
	// 计算pdf页码总数
    getPDFnums(url) {
      // let loadURL = pdf.createLoadingTask(url)
      const loadURL = pdf.createLoadingTask({
        url: url // 你的pdf地址
      })

      loadURL.promise.then(pdf => {
        console.log(pdf)
        this.numPages = pdf.numPages
      }).catch(() => {
      })
    },
}