pdf.js结合iframe实现文件（word，pdf）预览，且可通过手势缩放

pdf预览

1.下载pdf.js ，存放在public文件中
地址https://download.csdn.net/download/weixin_39150852/13105274

2.获取需预览的文件信息，存在sessionStorage

3. 组件中使用iframe预览文件

<template>
  <div class="main-page-container">
   <div>文件名： {{pdfName}}</div>
   <div class="pdf_container">
      <iframe
        :src="`pdf/web/viewer.html?file=${pdfUrl}`"
        class="pdf-window"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  name: "ReportView",
  data() {
    return {
      pdfUrl: "",
      commonUrl: "http://47.107.104.211:1774/api",
      pdfName:""
    };
  },
  mounted() {
    this.pdfName = JSON.parse(sessionStorage.getItem("pdfId")).name;
    let pdfId = JSON.parse(sessionStorage.getItem("pdfId")).id;
    this.pdfUrl = encodeURIComponent(
      //后台访问地址
      this.commonUrl + "/MtProjectDocItem/Preview/" + pdfId
    );
  }
};
</script>
<style lang="less" scoped>
.pdf_container{
  width: 100%;
  height: calc(100% - 90px);
}
</style>

数据请求：

最终效果：

实现移动端手势缩放

在viewer.js文件中增加以下代码

设置请求头，传递token

 <iframe
        :src="`pdf/web/viewer.html?file=${pdfUrl}`"
        class="pdf-window"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
      
	this.pdfUrl = encodeURIComponent(
      this.commonUrl + "/MtProjectDocItem/Preview/" + pdfId
  	);

以上请求方式iframe直接通过url发出get请求，若接口设置token验证就会报错，为解决该问题，我们可以直接获取文件流到客户端，生成blob地址实现预览：
设置 responseType: "blob" 或 responseType:"multipart/form-data" 或 responseType:"arrayBuffer"
具体使用什么类型要看后台接口，类型使用错误可能会出现页面空白的问题，我这里使用的是blob类型，修改如下：

<iframe
        :src="`pdf/web/viewer.html?file=${pdfUrl}`"
        class="pdf-window"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
      
this.$http({
		  url: "/MtProjectDocItem/Preview/" + pdfId,
		  responseType: "blob"
	  }).then((res)=>{
		let data_url =window.URL.createObjectURL(new Blob([res], {type:"application/zip"}));
		console.log(data_url)
		this.pdfUrl = encodeURIComponent(
			data_url
		);
	})

参考：https://www.jianshu.com/p/242525315bf6