开发vue项目时经常碰到文件下载的需求,分两种情况:

一种是:后台给文件路径,前端拼地址去下载文件

另一种是:后台直接返回文件流,前端去处理

第一种很简单这里就不赘述了,直接给出第二种接受文件流并下载的方法:

/**

* 把二进制文件保存到本地

* file 为后台返回的文件流

* 请求接口可能需要设置 responseType: "arraybuffer"

* name: 文件名,需要带后缀

*/

function exportFile (file, name) {

let url = window.URL.createObjectURL(new Blob([file]));

let link = document.createElement('a');

link.style.display = 'none';

link.href = url;

link.setAttribute('download', name);

document.body.appendChild(link);

link.click();

document.body.removeChild(link); // 下载完成移除元素

window.URL.revokeObjectURL(url); // 释放掉blob对象

}

关于 responseType: “arraybuffer”,可能需要加在请求接口上

//以axios为例子:

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

},

responseType:'arraybuffer'

});

基本就这些,欢迎补充!没有人事先了解自己到底有多大的力量,直到他试过以后才知道。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐