前端下载文件流形式的文件

原生保存

将数据转换为链接形式，模拟点击发生跳转进行下载。

apiDownloadFile(url).then(response => {
    const blob = new Blob([response]) // 包装数据
    const dom = document.createElement('a') // 利用节点下载
    dom.style.display = 'none'
    dom.href = window.URL.createObjectURL(blob)
    dom.target = '_blank' // 防止当前页面跳转
    dom.setAttribute('download', 'filename.txt') // 后者设置文件名
    document.body.appendChild(dom)
    dom.click()
    dom.remove()
})

file-saver

安装

npm i file-saver

使用

import FileSaver from 'file-saver'
// 以下data是通过api请求的数据

// 保存excel
const blob = new Blob(data, {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
FileSaver.saveAs(blob, "filename.xls");

// 保存csv
const blob = new Blob(data, {
    type: "text/plain;charset=utf-8"
});
FileSaver.saveAs(blob, "filename.csv");

// 保存txt
const blob = new Blob(data, {
    type: "text/plain;charset=utf-8"
});
FileSaver.saveAs(blob, "filename.txt");

// 保存json
const blob = new Blob(JSON.stringify(data), {
    type: ""
});
FileSaver.saveAs(blob, "filename.json");