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

效果图

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

npm install vue-pdf --save

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

<el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close='closeDialog'>
        <div class="pdf" v-show="fileType === 'pdf'">
            <pdf :src="pdfsrc" :page='i' style="width:50%;margin-left:400px;"></pdf>
       	</div>
    </el-dialog>

3.处理逻辑（.vue）

<script>
import pdf from 'vue-pdf' // 引入插件
  components: { pdf },
  data() {
    return {
      viewVisible: false,
      fileType: 'pdf',
      pdfsrc: '',  // 文件地址
    };
  },
  methods: {
    // 预览
    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)
        }
    },
    closeDialog(done){
     done()
    }
  }
};
</script>

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

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

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

	<el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close='closeDialog'>
        <div class="pdf" v-show="fileType === 'pdf'">
          <div v-for="i in numPages" :key="i">
            <pdf :src="pdfsrc" :page='i' style="width:50%;margin-left:400px;"></pdf>
          </div>
       	</div>
    </el-dialog>

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 .到此可以愉快的玩耍了，美滋滋。。。