前端实现文件下载并重命名(兼容IE) |
您所在的位置：网站首页 › a标签下载设置文件名 › 前端实现文件下载并重命名(兼容IE) |
前端实现文件下载并重命名(兼容IE)
|
引出
🎨当我们在前端进行远程文件下载时，如果默认的文件名不是我们需要的，我们希望能够对下载的文件进行重新命名，今天介绍三种常用方法。 一、HTML download 属性filename 规定作为文件名来使用的文本 注意： 在 HTML5 中，download 属性是 标签的新属性 download仅支持同源策略，如果非同源的话，需要跨域处理 浏览器支持十分不友好
二、文件流下载，兼容IE
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
function getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
}
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
function download(url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename);
});
}
因为IE的msSaveBlob只接收blob，所以这里先获取文件的blob，然后针对IE和非IE浏览器做单独处理。 使用 download(url, fileName)}>下载 //ES6写法注意：IE要10+以上 三、FileSaver.js插件 安装 npm install file-saver --save或者(需下载FileSaver.js文件： 引用 import FileSaver from 'file-saver'; 使用 FileSaver.saveAs(Blob/File/Url, filename);兼容性及更多用法，请查看https://github.com/eligrey/FileSaver.js |
【本文地址】
今日新闻 |
推荐新闻 |