当前位置:
首页
文章
前端
详情

前端处理文件下载

一、使用window.open

window.open(fileurl);

二、使用a标签模拟

1、普通

$('#js_download_btn').click(function() {
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = $(this).data('url');
  document.body.appendChild(a);
  a.click();
  a.remove();
});

2、blob

function downloadFile(fileurl, filename) {
    var a = document.createElement('a');
    a.download = filename;
    a.style.display = 'none';

    var blob = new Blob(fileurl); // fileurl返回的是binary数据
    a.href = URL.createObjectURL(blob);

    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(a.href); // 主动释放内存引用,当然浏览器在document卸载的时候,也会自动释放它们
    a.remove(); // 或 document.body.removeChild(a)
}
downloadFile('https://www.xxx.com/download/a', 'b.csv')
  • Blob blob的内容由参数数组中给出的值的串联组成
  • URL.createObjectURL 创建一个新的URL对象,与之相反的是URL.revokeObjectURL释放URL对象

三、a标签直接下载

<a href="https://cdn.bootcdn.net/ajax/libs/vue/0.10.0/vue.min.js" download="vue.min.js">下载</a>

四、下载Buffer数据文件

res.content是buffer结构数据:{data: [255, 216, 255, 224,...], type: "Buffer"}

var a = document.createElement('a');
a.download = res.data.filename;
a.style.display = 'none';

var str = '';
res.content.data.forEach(function(v, i) {
    str += String.fromCharCode(v)
}); 
a.href = "data:image/jpg;base64,"+window.btoa(str);

document.body.appendChild(a);
a.click();
a.remove();
  • window.btoa 用于创建一个 base-64 编码的字符串
  • String.fromCharCode 将 Unicode 编码转为一个字符

免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。