【前端文件下载】Js Vue 下载文件的最常用两种方式
目前 前端下载文件最常用的有以下两种方式:(1)通过接收后端返回的文件流格式(Blob数据) 去下载(2)通过接收后端给的文件url地址去下载。
·
目录
目前 前端下载文件最常用的有以下两种方式:
(1)通过接收后端返回的文件流格式(Blob数据) 去下载
(2)通过接收后端给的文件url地址去下载
1、第一种 文件流格式下载
这种情况通常是 我们前端 向后端发起下载请求 ,后端接收到之后 会返回文件流格式(Blob数据)的代码,然后我们通过new Blob() 方法传入Blob数据 ,接着把得到的数据传入window.URL.createObjectURL() 最后得到url。我们创建一个a标签,然后将url赋值给a标签的href,接着使用link.setAttribute()方法 设置文件名称,将设置的link数据添加的a标签节点上 link.click();触发点击事件,最后移除a标签上的link
/**
*
* @param {*} data 文件数据
* @param {*} fileName 文件名称
* @param {*} fileFormat 文件格式
* @returns
*/
export default function exportDownload(data, fileName = '导出文件', fileFormat = 'xlsx') {
// data为Blob数据
if (!data) {
return;
}
// 执行下载
const url = window.URL.createObjectURL(new Blob([data]));
console.log(url);
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${fileName}.${fileFormat}`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
2、通过静态url去实现下载
这种方式,同样我也是用a标签去实现的,首先是创建一个a标签 const elt = document.createElement('a'); 接着设置a标签上的href属性 传入url,以及download 属性传入文件名称,将设置的link数据添加的a标签节点上 link.click();触发点击事件,最后移除a标签上的link
/**
*
* @param {*} url 文件路径
* @param {*} name 文件路径
* @returns
*/
export default function downloadFile(url, name) {
const elt = document.createElement('a');
elt.setAttribute('href', fileDownload(url));
elt.setAttribute('download', name);
elt.style.display = 'none';
document.body.appendChild(elt);
elt.click();
document.body.removeChild(elt);
}
更多推荐
已为社区贡献6条内容
所有评论(0)