实现iframe在线预览pdf并修改请求头

这篇文章将分享：在Vue项目中，修改 iframe 标签请求头的方法

我们要做什么？

使用 iframe 预览服务器的 .pdf 文件，并且请求文件时携带 token 以供后端验证

遇到的问题

官方文档中可以改变多个属性，但不能更改默认的请求头，也就是不能满足在请求头中传 token 的需求

<iframe id="iframe-page" src="yoururl/pdf" width="100%"></iframe>//常规写法

解决办法

首先，在请求拦截器加入对该文件路径的判断（只取公共部分供判断即可），将响应类型改为 blob 接着，在页面代码改变 src 的取值，即将请求返回的文件流进行解析，赋值给 src

template 部分：

<iframe id="iframe-page" :src="page_url" width="100%"></iframe>

data 部分：

page_url: null,

methods 部分：

makePdf(url){
  this.$http.get(url)
    .then((res) => {
      const { data, status } = res;
      let binaryData = []
      binaryData.push(data)// res 后台返回的流数据
      let pdfUrl = ''
      pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
      this.page_url = pdfUrl
    })
},

axios 部分：

// Add a request interceptor
//添加请求的拦截器
instance.interceptors.request.use(function(config) {
  if (config.url.indexOf('yoururl/pdf') !== -1) {
    config.responseType = 'blob'
  }
})

//over