前端vue导出后端返回的word excel zip流文件下载

在日常开发中，我们可能会遇到导出excel word的情况，而后端此时给我们返回的是一个文件流，需要前端将文件流转为url地址进行下载。 可以将这个方法封装成一个工具类，方便其他地方调用，我这里放到了utils.js里面

js：

export function exportFile(data,type, fileName) {

    let blob = new Blob([data], {

      //type类型后端返回来的数据中会有，根据自己实际进行修改

      // 表格下载为 application/xlsx，压缩包为 application/zip等，

      type: type

    });

    let filename = fileName;

    if (typeof window.navigator.msSaveBlob !== "undefined") {

      window.navigator.msSaveBlob(blob, filename);

    } else {

      var blobURL = window.URL.createObjectURL(blob);

      // 创建隐藏<a>标签进行下载

      var tempLink = document.createElement("a");

      tempLink.style.display = "none";

      tempLink.href = blobURL;

      tempLink.setAttribute("download", filename);

      if (typeof tempLink.download === "undefined") {

        tempLink.setAttribute("target", "_blank");

      }

      document.body.appendChild(tempLink);

      tempLink.click();

      document.body.removeChild(tempLink);//移除dom元素

      window.URL.revokeObjectURL(blobURL);//释放bolb内存

    }

  }

在vue中引用该方法

        //导出文件方法

        exportFile() {

            let obj = {

                dataid: this.companyInfo.dataId,

                id: this.companyInfo.id,

                template: this.radio,

                year: this.companyInfo.year

            }

            exportWordForQuality(obj)

                .then(res => {

                    console.log('质量审核-填报说明导出:', res.data);

                    const { data } = res

                    let fileName = `${this.companyObj.companyName}执行报告审核意见`

                    exportFile(data, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', fileName)

                })

                .catch(err => {

                    console.log(err);

                })

        },

注意：

(1)本方法中并没有设计压缩，如倒出的文件大，强烈建议使用jsZip

先安装在使用：import JSZip from 'jszip'

(2)exportWordForQuality ()接口中的响应格式要设置为bolb

//下载质量审核文件

export function exportWordForQuality(data) {

    return req.post('/qualityAudit/report/exportWordForQuality', data, {

        'responseType': 'blob'

    })

}

(3)网页响应头content-type:

word文件：

.doc格式的content-type设置为：application/vnd.msword;charset=utf-8 

.docx格式的content-type设置为：application/vnd.openxmlformats-officedocument.wordprocessingml.document

excel文件：

.xls格式的content-type设置为：application/vnd.ms-excel

.xlsx格式的content-type设置为：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

 zip文件：

. zip格式的content-type设置为：application/zip

 

关于content-type设置格式参考：https://www.ibm.com/docs/en/wkc/cloud?topic=catalog-previews