JavaScript下载后端返回的文件流

JavaScript下载后端返回的文件流(方法一)

后端返回的结果

/* 创建一个js写以下代码 */
import axios from 'axios';
/*
先安装： npm install js-file-download
main.js引入  import fileDownload from 'js-file-download';
* */
/*
* url: 请求接口地址
* fileName: 文件名，例如: ccc.png
* */
export function $fileDownload(url, fileName, config = {}) {
    axios.request({
        url: url,
        method: "get",
        data: config.data,
        responseType: 'blob'
    }).then(
        response => {
            console.log("fileName: ", fileName)
            let fileDownload = require('js-file-download');
            fileDownload(response.data, fileName);
            if (typeof config.resolve === 'function') {
                config.resolve();
            }
        },
        error => {
            let hasError = true;
            if (error.response) {
                const status = error.response.status;
                if (status === 401) {
                    hasError = false;
                }
            }
            if (hasError) {
                this.$showError('下载出错，请稍后再试');
            }
            if (typeof config.reject === 'function') {
                config.reject();
            }
        }
    );
}

/* 
* 引入import {$fileDownload} from "../../plugin/utils";
* 然后在methods中调用封装的$fileDownload即可 
*/
// 打开附件
openFile (item) {
	console.log(item);
	/*item {
		id: "D64C87AD4AF51CCFE0537C0AA8C0A129"
		trainingManagementId: "D3E0484993A472DCE0537C0AA8C01C26"
		fileName: "cls_jpg1.jpg"
		filePath: "/data/apcos/6332/app-standard/app-standard/cdtraining/2022_01_24/c1ff8d5b-f254-4297-b4cb-20839a4316f2cls_jpg1.jpg"
		createTime: "2022-01-24 11:26:10"
	}*/
	let url = `${this.url}/cdtraining/api/download?id=${item.id}`
	$fileDownload(url, item.fileName)
},

结果

JavaScript下载后端返回的文件流(方法二)

  methods: {
    // 打开附件
    openFile(item) {
      this.$axios.get('api', {
        responseType: 'arraybuffer'
      }).then(res => {
        let dt = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
        console.log("dt: ", dt);
      });
      // console.log(item);
      // let url = `${this.url}/upload/downloadFile?fileAddress=${item.other}&fileName=${item.fileAddress}`
      // $fileDownload(url, item.fileAddress)
    },
}

结果

JavaScript下载后端返回的文件流(方法三)

在downloadFile.js中

export async function downloadFile({ data, headers }) {
    // todo 增加后端报错时的错误捕获
    // 通过content-disposition获取文件名称
    const fileName = /.*filename=(.*)/i.exec(headers["content-disposition"])?.[1] || "下载";
    // 开始下载
    const a = document.createElement("a");
    a.href = (window.URL || window.webkitURL).createObjectURL(
        new Blob([data], {
            type: headers["content-type"]
        })
    );
    a.download = decodeURIComponent((fileName));
    a.dispatchEvent(new MouseEvent("click"));
}

在接口文件api.js

// 导出
export function materialExport(data) {
    return http.post(`/api/import/materialExport`, data, {
        responseType: "arraybuffer" // 须指定返回类型为 arraybuffer
    });
}

在html中引入downloadFile.js， api.js

<template>
    <button @click="handelExport">导出下载</button>
</template>

<script>
import { downloadFile } from @/downloadFile
import { api } from @/api
methods: {
    async handelExoprt() {
        let obj = {}
    }
    if (this.tableData.length === 0) {
        this.$message({
            message: "无数据, 不能下载",
            type: "warning"
        })
    }else {
        await downloadFile(await materialExport(obj));
    }
}
</script>

结果