关于vue预览pdf的记录（vue-pdf，pdf.js，iframe标签）

最近项目要生成一个电子协议pdf,然后再前端实现预览操作，最开始图方便直接用了vue-pdf插件，但是这个插件很坑，下文会详细记录，后来又用iframe标签直接显示pdf文件，这个标签能显示项目内的pdf文件，对应后端返回的pdf文件流却无法直接显示。但我这项目后端只能返回文件流的形式，所以没办法，继续找方法，最终用pdf.js实现了改功能。

一.vue-pdf

1.首先安装

npm install --save vue-pdf

2.在项目中引用

        完整代码如下：

<template>
    <div>
         <pdf :src="src" ref="myPdfComponent"></pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  components:{
      pdf,
      CMapReaderFactory
  },
  data(){
      return {
        src: '',
      }
  },
  methods:{
    
  },
  mounted(){
        this.$http.get('/xxxx/xxxx/xxx/xxx/'+'xxx').then((res) =>{
            if(res.data.code == 0){
            //对后端返回的base64编码进行去空格处理
            var base64 ='data:application/pdf;base64,' + res.data.data.replace(/[\r\n]/g, "");
            //解决部分汉字不显示问题
            this.src = pdf.createLoadingTask({ url: base64, CMapReaderFactory });
            
            }
        }).catch(() => {})
    }
}
</script> 
<style>
</style>

第一次显示pdf效果如下：

再次访问该页面，展示pdf效果如下：

 会发现，pdf中的汉字消失了，效果跟没有执行下面这行代码一模一样

 //解决部分汉字不显示问题
this.src = pdf.createLoadingTask({ url: base64, CMapReaderFactory });

 但是我在这代码后面加了console.log（“=====”）输出发现代码都有执行，总不会是这行代码没执行，而后面却能输出再控制台吧，查了一些网上的资料，没有看到我这类似的问题的，没办法之后换方法了。

二.iframe

关于iframe的介绍大家可以自行bd,我直接说我在项目中的使用。

首先你把一个pdf文件放在项目中（如下图的demo.pdf）

 然后直接再iframe标签中用src指向这demo.pdf文件即可显示

<iframe src="/demo.pdf" width="100%" height="760" frameborder= '1'></iframe>

注：在这个项目中“/”代表的是“public”文件夹，

但是我用后端返回的base64编码放到src属性下，它就显示不了

所以需要用到pdf.js插件。

三.pdf.js

1.下载pdf.js插件:Getting Started (mozilla.github.io)

下载后解压文件 ：

然后把这几个文件加放到项目的public或者static文件夹下

使用的时候配合<iframe>一起使用，直接将标签的src属性指向pdf.js插件的 viewer.html页面，让该页面代为展示pdf即可

 完整代码如下：

<template>
    <div>
      <iframe :src="'/pdfjs/web/viewer.html?file='+url"  width="100%" height="760"  border="0"></iframe>  
    </div>
</template>
<script>
export default {
  components:{
  },
  data(){
      return {
        id:this.$route.params.id,
        url:'',//pdf文件路径
      }
  },
  methods:{
  },
  mounted(){
    this.$http.get('/xxxx/xxxx/xxxx/xxxx/',{responseType: 'blob'}).then(response  => {
        if (!response) {
            return this.$message.error("查看电子协议失败，请联系管理员");
        }
        //将文件流转为成blob地址预览pdf文件
        let blob = new Blob([response.data],{type: 'application/pdf;charset=UTF-8'});
        //创建url
        let href = window.URL.createObjectURL(blob); 
        this.url = encodeURIComponent(href);
      }).catch(() => {})  
    }
}
</script> 
<style>
</style>

 展示结果如下：

 完成项目要求！