vue 项目中pdf文件预览

第一种方法： iframe

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

1.先下载依赖

npm install --save vue-pdf

2.在页面中引入pdf

import pdf from 'vue-pdf'

3.页面代码展示

单页的pdf

多页的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(() => {
      })
    },
}