问答

关于文件导出的一个疑问

作者:admin 2021-05-07 我要评论

忘了说下前提了,我使用 Content-Disposition 的目的就是为了避免在 ajax 请求后还要做多余的动作,也就是想去掉 then 里面的操作 axios.get('/export').then(re...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

忘了说下前提了,我使用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')
###

谢邀,试试这种方法

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');
});
###

我也做过相关操作,在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)
      }
###

试试这种: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;
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 关于文件导出的一个疑问

    关于文件导出的一个疑问

  • php输出JSON多层嵌套的问题

    php输出JSON多层嵌套的问题

  • vue3+ts 在index.html的head引入了js文

    vue3+ts 在index.html的head引入了js文

  • php-fpm处理时间很快,但nginx upstrea

    php-fpm处理时间很快,但nginx upstrea

腾讯云代理商
海外云服务器