在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使用

       

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

      }

    },