JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
第一種是HTML官網(wǎng)中的方法
<a href="/images/liang.jpg" rel="external nofollow" download="文件名稱">
HTML5 中 a 標(biāo)簽提供了一個(gè) filename 屬性,可以下載成指定的 download 屬性名稱
這種同源訪問(wèn)是沒(méi)有問(wèn)題的,但一跨域就不行了,試了其它方法,不是報(bào)跨域錯(cuò)誤,就是在當(dāng)前頁(yè)面打開文件,體驗(yàn)相當(dāng)不好。
第二種方案比較通用
/** * 獲取 blob * url 目標(biāo)文件地址 */ 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(); }); } /** * 保存 blob * 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 目標(biāo)文件地址 * @param {String} filename 想要保存的文件名稱 */ function download(url, filename) { getBlob(url).then(blob => { saveAs(blob, filename); }); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
- JavaScript進(jìn)階之前端文件上傳和下載示例詳解
- javascript實(shí)現(xiàn)生成并下載txt文件方式
- javascript Blob對(duì)象實(shí)現(xiàn)文件下載
- JavaScript 中如何實(shí)現(xiàn)大文件并行下載
- JavaScript實(shí)現(xiàn)多文件下載方法解析
- javascript使用Blob對(duì)象實(shí)現(xiàn)的下載文件操作示例
- 使用 JavaScript 創(chuàng)建并下載文件(模擬點(diǎn)擊)
- js實(shí)現(xiàn)下載(文件流式)方法詳解與完整實(shí)例源碼
相關(guān)文章
純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果
bluidea論壇的腳本板塊的版主寫的,不錯(cuò),轉(zhuǎn)到這!2008-07-07BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶編輯信息然后保存的頁(yè)面,都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗(yàn)的問(wèn)題,本文介紹非常詳細(xì),具有參考價(jià)值,需要的朋友可以參考下2016-06-06JavaScript自定義日歷實(shí)現(xiàn)簽到功能
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義日歷實(shí)現(xiàn)簽到功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08javascript中使用class和prototype的區(qū)別小結(jié)
本文將介紹在JavaScript何時(shí)使用class以及何時(shí)使用prototype,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼
這篇文章主要介紹了Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09