关于文件导出的一个疑问

Question

忘了说下前提了，我使用Content-Disposition的目的就是为了避免在ajax请求后还要做多余的动作，也就是想去掉then里面的操作

axios.get('/export').then(res)

如果后端设置如下响应头

app.get('/export', (req, res) => {

    res.set({
        Content-Type: 'application/octet-stream; charset=utf-8',
        Content-Disposition: attachment; filename="123.jpg"
    })
    
    res.send(file);
})

那么前端使用如下方式，或者使用form发起Post或者get请求，都能让浏览器自动保存文件

location.href = '/export'
<a href="/export" download="123.jpg">

但是，如果使用ajax发起get或者post请求，就不行，我猜想应该是ajax覆盖了浏览器自动保存的控制权，但是我找不到相关资料来佐证，有人知道吗？

    axios.get('/export')

Answer 1

谢邀，试试这种方法

Axios({
    url: 'http://localhost/downloadFile',
    method: 'GET',
    responseType: 'blob', // Important
})
.then(({ data }) => {
    const downloadUrl = window.URL.createObjectURL(new Blob([data]));
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.setAttribute('download', 'file.zip'); //any other extension
    document.body.appendChild(link);
    link.click();
    link.remove();
});

也可以使用第三方库：https://www.npmjs.com/package...

const FileDownload = require('js-file-download');

Axios({
  url: 'http://localhost/downloadFile',
  method: 'GET',
  responseType: 'blob', // Important
}).then((response) => {
    FileDownload(response.data, 'report.csv');
});

Answer 2

我也做过相关操作，在ie 和chrome测试过，没有问题

let blob = new Blob([res.data]) //res 调用后台返回的文件流
      let fileName = `xx.jpg` // 定义文件名  
      let urlObject = window.URL || window.webkitURL || window
      let objectUrl = urlObject.createObjectURL(blob) //生成一个url
      if ('download' in document.createElement('a')) {
        // 非IE下载
        let el = document.createElement('a')
        //链接赋值
        el.href = objectUrl
        el.download = fileName
        //必须点击否则不会下载
        el.click()
        // this.saveAs(el)    // 另存为功能
        //移除链接释放资源
        urlObject.revokeObjectURL(objectUrl)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }

Answer 3

试试这种：imageSrc（图片源），name: 下载的名称；
之前写过下载，只要图片源允许下载，应该是可以用的。

function downImage(imageSrc, name) {
    let image = new Image();
    // 处理canvas 跨域问题 
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = function() {
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL('image/png'); // 图片编码数据
        let a = document.createElement('a');
        let event = new MouseEvent('click'); // 创建一个单击事件
        a.download = name || 'image'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
        a = null,canvas = null;
    }
    image.src = imageSrc;
}