最近做一个electron+vue的项目，有一个这样的功能，点击预览可以对后台返回的url（http的pdf）进行预览，并且进行下载

本想用vue-pdf的，但是一引用就会报错，所以最后用了pdf.js

pdf.js的包下载完之后放在static目录下就可以

预览的时候比较简单，下面的代码就可以实现

<iframe
    frameborder="1"
    :src="tsxzOrxzfy"
    ref="ifr"
    width="100%"
    height="560px"
    scrolling="auto"></iframe>

this.tsxzOrxzfy=`${this.base}?file=` + encodeURIComponent(resp.data.url)//res.data.url是后台返回的路径

下载的时候比较麻烦

<object>
     <iframe
       id="PrintPath"
       frameborder="1"
       :src="tsxzOrxzfy"
       ref="ifr"
       width="100%"
       height="560px"
       scrolling="auto"></iframe>
    </object>

created:{
let that = this
  if (document.getElementById("PrintPath").attachEvent){
   document.getElementById("PrintPath").attachEvent("onload", function(){
    // alert("Local iframe is now loaded.1");
    that.add()
    setTimeout(()=>{
     that.printPaper()
    },3000)
   });
  } else {
   document.getElementById("PrintPath").onload = function(){
    that.add()
    // alert("Local iframe is now loaded.2");
    setTimeout(()=>{
     that.printPaper()
    },3000)
   };
  }
}
methods:{
 printPaper(){
    this.$nextTick(()=>{
     //弹出打印机的打印方法start=======================
     document.getElementById('PrintPath').contentWindow.print(
       {
        //是否是静默打印,true为静默打印，false会弹出打印设置框
        silent: true,
        printBackground: true,
        //打印机的名称，this.print1为在getPrinterList()方法中获取到的打印机名字。
        //注意在demo中这是我打印机的设备，在使用本demo时，先去getPrinterList()中找到你使用的打印机
        deviceName: 'HP Color LaserJet Pro M452 PCL 6'
       },
       data => {
        //这个回调是打印后的回调事件，data为true就是打印成功，为false就打印失败
        console.log("webview success", data);

       }
     );
     //弹出打印机的打印方法end===========================
     this.scrollStyle='position: absolute;right: 11px;top: -10px;'
     this.messageData='正在打印中'
     this.$store.commit('DECREMENT_TRUE_messageToast')
     this.printFlag=true;
     localStorage.removeItem('alaemIndentifyMessage');
     localStorage.removeItem('tstjInfoMessage');
     localStorage.removeItem('xzfysqInfoMessage');
    })
  },
 add: function () {
   var _this = this
   _this.clockTimer = setInterval(function () {
    if (_this.seconds === 0) {
     _this.seconds = 0
     clearInterval(_this.clockTimer)
     _this.backIndex()
    } else {
     _this.seconds -= 1
    }
   }, 1000)
  }
}