通過鏈接下載
a標簽
對于已知地址的目標文件，前端可以使用 a標簽 來直接下載，使用a標簽下載使用到兩個屬性
- download：下載文件名
- href：目標文件下載鏈接
<a href="xxx/xxx/a.xlsx" download="a.xlsx">點擊下載圖片</a>
下載方法
使用時給觸發(fā)的div綁定事件
const download = async () => {
const url = 'https://xx.com/xx/xx/a.xlsx'
const fileName = 'a.xls'
let a = document.createElement("a");
a.download = fileName;
a.href = url;
document.body.append(a); // 修復firefox中無法觸發(fā)click
a.click();
URL.revokeObjectURL(a.href);
a.remove();
}
注意
a標簽的下載只能使用get請求，且無法在請求體中添加header信息
獲取文件流
請求體配置
axios({
url: 'https://xxx.com/xxx/xxx',
method: 'get',
responseType: 'blob',
}).
請求方法可用post或者get，responseType一般需要設置為 blob 或者 arraybuffer
下載文件流
- 封裝下載函數(shù)
export const downloadFileByBlob = (fileData, fileName, ext = 'xlsx') => {
const blob = new Blob([fileData], {
type: docMimeTypes[ext],
});
console.log('fileData---',fileData)
console.log('blob---',blob)
const objectUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectUrl;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(objectUrl); // 文件下載后，釋放blob對象
};
- 下載函數(shù)使用
const res = await downLoadFile(param)
console.log('downLoadFile-->', res)
downloadFileByBlob(res.data, '下載文件') // 數(shù)據(jù)流是個Blob對象
打印如下??
總結(jié)
JavaScript下載文件
-
通過鏈接下載文章來源：http://www.zghlxwxcb.cn/news/detail-684345.html
-
獲取文件流文章來源地址http://www.zghlxwxcb.cn/news/detail-684345.html
到了這里，關于JavaScript下載excel文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
