在vue中实现pdf预览功能（vue-pdf 的使用）

1.下载安装vue-pdf插件

npm i vue-pdf -s

2.导入pdf组件

import pdf from 'vue-pdf'

3.注册pdf组件

components: {

RkdjMoreInfo,

RkdjXm,

RkdjWjxx,

RkdjJnml,

RkdjYjmlc,

pdf

},

4.页面中使用pdf组件需要配合el-dialog使用

<el-dialog :visible.sync="pdfgkbDialog" title="概况表" width="50%" center>

<pdf :src="gkbSrc" style="width:100%" ref="pdf"></pdf>

</el-dialog>

5.在data设置初始值

data(){

return {

pdfDialog:false

}}

6.填写pdf的点击事件方法

ClickPdf() {

if(this.dataList[0]==1){

this.gkbSrc=pdf.createLoadingTask('api接口')

let url = ‘api接口’

window.open(url,"_blank") //跳转页面利用浏览器打开pdf （浏览器打开pdf可复制）

this.pdfDialog=true //利用插件打开pdf预览（类型图片预览不可复制）

}

else if(this.dataList[0]==2){

this.gkbSrc =pdf.createLoadingTask(api接口）

let url = ‘api接口’

window.open(url,"_blank")

this.pdfDialog=true

}

},