后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能

后端接口返回文件流,前端实现docx/pdf/excel等类型文件的下载功能

最近遇到一个需求，在后端返回文件流后前端需要实现导出docx类型的文件。在网上查看了一些资料总结了两种比较常用的方法。

方法一：前端接收到后端返回的数据后将返回结果转换为Blob类型，再进行操作。

1、封装接口

注意：接口需要添加 responseType: “blob”，否则会出现文件下载后无法打开或者损坏的情况。

export function downloadFile(id) {
  return request({
    url: "/project/approval/getWord/" + id,
    responseType: "blob",
    method: "post",
  })
}

2、转换数据格式

导出word文件，需要在创建blob对象时传入第二个参数，并将type设置为“application/vnd.openxmlformats-officedocument.wordprocessingml.document”

    handleDownload() {
      downloadPromise(this.ids[0]).then((res) => {
          let blob = new Blob([res], {
            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          let objectUrl = URL.createObjectURL(blob);
          let link = document.createElement("a");
          let fname = "文件名称";
          link.href = objectUrl;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
        })
        .catch(() => {
          this.$modal.msgWarning("文件下载出错！");
        });
    },

方法二：封装download方法（修改若依前端导出文件方法）

1、封装download方法

//该方法需要接受四个参数url：后端请求地址，params：请求参数，filename文件名称，contentType：content-type类型。
export function download(url, params, filename, config, contentType) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    //这里可以根据导出文件的类型来传相应的Content-Type值
    headers: { 'Content-Type': contentType ? contentType : 'application/x-www-form-urlencoded' },
    responseType: 'blob',
    ...config
  }).then(async (data) => {
    const isBlob = blobValidate(data);
    if (isBlob) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

2、调用download方法

    handleDownload() {
      this.download(
        "/project/approval/getWord/" + this.ids[0],
        //没有请求参数则传空对象
        {},
        //文件名称可以自行设置
        `type_${new Date().getTime()}.docx`,
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      );
    },

相关资料

在网上查找了一些关于 content-type 的编码格式以及responseType。

.doc     application/msword
.docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document
.rtf       application/rtf
.xls     application/vnd.ms-excel application/x-excel
.xlsx    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt     application/vnd.ms-powerpoint
.pptx    application/vnd.openxmlformats-officedocument.presentationml.presentation
.pps     application/vnd.ms-powerpoint
.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pdf     application/pdf
.swf    application/x-shockwave-flash
.dll      application/x-msdownload
.exe    application/octet-stream
.msi    application/octet-stream
.chm    application/octet-stream
.cab    application/octet-stream
.ocx    application/octet-stream
.rar     application/octet-stream
.tar     application/x-tar
.tgz    application/x-***pressed
.zip    application/x-zip-***pressed
.z       application/x-***press
.wav   audio/wav
.wma   audio/x-ms-wma
.wmv   video/x-ms-wmv
.mp3 .mp2 .mpe .mpeg .mpg     audio/mpeg
.rm     application/vnd.rn-realmedia
.mid .midi .rmi     audio/mid
.bmp     image/bmp
.gif     image/gif
.png    image/png
.tif .tiff    image/tiff
.jpe .jpeg .jpg     image/jpeg
.txt      text/plain
.xml     text/xml
.html     text/html
.css      text/css
.js        text/javascript
.mht .mhtml   message/rfc822

""  responseType 设为空字符串与设置为"text"相同，默认类型
"text"  返回的是包含在 DOMString 对象中的文本。
"document"  返回的是一个 HTML Document 或 XML XMLDocument
"arraybuffer"  返回的是一个包含二进制数据的 JavaScript ArrayBuffer 
"blob"  返回的是一个包含二进制数据的 Blob 对象
"json"  返回的是一个 JavaScript 对象 。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
"ms-stream"  返回的是下载流的一部分 ；此响应类型仅允许下载请求，并且仅受Inter*** Explorer支持

总结

使用第一种方法时遇到的坑，没有在接口api设置responseType: “blob”，导致文件下载成功后无法打开。最后，在前端开发过程中经常会遇到文件导出的需求，在这里总结一下用到过的方法以便在下次使用时可以直接复用。