那些年使用vue-pdf踩过的坑

最近在vue项目中需要在线预览word,excel,ppt和pdf文件，思来想去最后决定使用vue-pdf来实现pdf文件在原页面中弹窗显示，而其他格式的文件直接跳转新页面预览。

效果图

1.首先在项目中安装vue-pdf

npm install vue-pdf --save

2.在页面引入element-ui的弹窗组件（.vue）

3.处理逻辑（.vue）

4.按照惯例就可以实现预览了，但是这样只能预览第一页，那费什么劲呀？？？

5.下面是填坑时间，容我抽袋烟再回来弄它。

6.言归正传 其实想实现多页预览可以有多种方法，比如我们可以添加 上一页和下一页的按钮，来请求后端。但是我认为不好，前端能解决的事情，坚决不求人。查阅vue-pdf的文档就可以发现。我们可以给它绑定一个页数的属性

7. 逻辑处理添加以下代码

// 预览
    hadlePreview(item){
      console.log("item = ",item)
       //console.log(row.wjYsmc)
        if (!/\.(pdf|PDF)$/.test(item.AttachmentName)) {// 非pdf文件
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + item.AttachmentPath + "/anli?id=" + item.MessageAttachmentId,
            "_blank"
          );
          return false;
        } else { // pdf文件
          let url = item.AttachmentPath + "/anli?id=" + item.MessageAttachmentId
          this.viewVisible = true
          // 以下代码高能
          this.pdfsrc = pdf.createLoadingTask(url)
          this.pdfsrc.then(pdf => {
          this.numPages = pdf.numPages
          }).catch(() => {
          })
        }
    },

8 .到此可以愉快的玩耍了，美滋滋。。。