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

window.open(url,"_blank")//跳转页面利用浏览器打开pdf（浏览器打开pdf可复制）this.gkbSrc=pdf.createLoadingTask('api接口')this.gkbSrc =pdf.createLoadingTask(api接口）1.下载安装vue-pdf插件。5.在data设置初始值。

qq_48378883

2803人浏览 · 2023-06-19 14:25:33

qq_48378883 · 2023-06-19 14:25:33 发布

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

      }

    },