前端实现文件下载并重命名(兼容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 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |