JS通過URL下載文件并重命名兩種方式代碼
一、a 標(biāo)簽簡(jiǎn)單設(shè)置 href 方式
// 下載文件 function downloadFile() { const link = document.createElement('a'); link.style.display = 'none'; // 設(shè)置下載地址 link.setAttribute('href', file.sourceUrl); // 設(shè)置文件名 link.setAttribute('download', file.fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); }
二、a 標(biāo)簽使用 blob 數(shù)據(jù)類型方式
async function download(downloadUrl: string, downloadFileName: string ) { const blob = await getBlob(downloadUrl); saveAs(blob, downloadFileName ); } function getBlob(url: string) { return new Promise<Blob>((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response); } else { reject(new Error(`Request failed with status ${xhr.status}`)); } }; xhr.onerror = () => { reject(new Error('Request failed')); }; xhr.send(); }); } function saveAs(blob: Blob, filename: string) { const link = document.createElement('a'); const body = document.body; link.href = window.URL.createObjectURL(blob); link.download = filename; // hide the link link.style.display = 'none'; body.appendChild(link); link.click(); body.removeChild(link); window.URL.revokeObjectURL(link.href); }
附:通過blob實(shí)現(xiàn)跨域下載并修改文件名
點(diǎn)擊時(shí)調(diào)用如下方法
function load(file) { this.getBlob(file.url).then(blob => { this.saveAs(blob, file.name); }); },
//通過文件下載url拿到對(duì)應(yīng)的blob對(duì)象
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(); }); },
//下載文件 saveAs(blob, filename) { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = filename; link.click(); }
總結(jié)
到此這篇關(guān)于JS通過URL下載文件并重命名兩種方式的文章就介紹到這了,更多相關(guān)JS URL下載文件并重命名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)...2007-05-05js實(shí)現(xiàn)全國(guó)省份城市級(jí)聯(lián)下拉菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)全國(guó)省份城市級(jí)聯(lián)下拉菜單效果代碼,通過JavaScript針對(duì)數(shù)組的定義與元素的遍歷實(shí)現(xiàn)省市級(jí)聯(lián)菜單功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09淺談js對(duì)象的創(chuàng)建和對(duì)6種繼承模式的理解和遐想
下面小編就為大家?guī)硪黄獪\談js對(duì)象的創(chuàng)建和對(duì)6種繼承模式的理解和遐想。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10Javascript中構(gòu)造函數(shù)要注意的一些坑
JavaScript語(yǔ)言是一門面向?qū)ο蟮恼Z(yǔ)言,但JS中并沒有類的概念的。于是JavaScript采用構(gòu)造函數(shù)的方式來模擬類的效果,即我們通過函數(shù)來創(chuàng)建對(duì)象。這也證明了函數(shù)在JavaScript中具有非常重要的地位。本文主要介紹了Javascript中構(gòu)造函數(shù)的一些坑,需要的朋友可以參考。2017-01-01JavaScript設(shè)計(jì)模式之單例模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之例模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript對(duì)象拷貝與賦值操作實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)象拷貝與賦值操作,結(jié)合實(shí)例形式分析了javascript對(duì)象定義、拷貝、賦值等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12