前端处理文件下载
- 前端
- 三生万物
- 0
一、使用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进行反馈,一经查实,将立刻删除涉嫌侵权内容。