前端解析后台返回的文件流 导出pdf，word格式的文件

1.定义一个方法来解析数据流

export const download = (res, type, filename) => {
  // 创建blob对象，解析流数据
  const blob = new Blob([res], {
    // 如果后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为'application/msword'，zip为 'application/zip'
     type: type
  })
  const a = document.createElement('a')
  // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
  const URL = window.URL || window.webkitURL
  // 根据解析后的blob对象创建URL 对象
  const herf = URL.createObjectURL(blob)
  // 下载链接
  a.href = herf
  // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  // 在内存中移除URL 对象
  window.URL.revokeObjectURL(herf)
}

2.点击导出按钮后请求接口,把返回的数据流传进来

async savePdf() {
      let params = {
        htmlText:this.editorHtml,
      }
      let res = await savePdf(params)
      if(res){
        download(res, 'application/pdf;chartset=UTF-8', 'test.pdf')  //pdf 为 application/pdf;chartset=UTF-8
      }
    },
async saveWord() {
      let params = {
        htmlText:this.editorHtml,
      }
      let res = await saveWord(params)
     if(res){
        download(res, 'application/msword', 'test.doc')   //word 为 msword
     }
    },

3.下载出来文件内容为空的解决方法

如果是这种情况,需要在请求头里设置responseType: 'blob' 才能正确解析

4.效果