JavaScript實現(xiàn)文件下載并重命名代碼實例
更新時間：2019年12月12日 10:36:27 作者：吾知的善良
這篇文章主要介紹了JavaScript實現(xiàn)文件下載并重命名代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
這篇文章主要介紹了JavaScript實現(xiàn)文件下載并重命名代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
第一種是HTML官網(wǎng)中的方法
<a href="/images/liang.jpg" rel="external nofollow" download="文件名稱">
HTML5 中 a 標(biāo)簽提供了一個 filename 屬性，可以下載成指定的 download 屬性名稱
這種同源訪問是沒有問題的，但一跨域就不行了，試了其它方法，不是報跨域錯誤，就是在當(dāng)前頁面打開文件，體驗相當(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);
});
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細(xì)的分析了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2014-10-10
基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07
論壇中kayeun在我的版面發(fā)了一個問題，關(guān)于PNG透明背景在FIREFOX瀏覽器下顯示異常。 這里談一下不同瀏覽器內(nèi)，如何應(yīng)用PNG圖片作背景。2009-06-06
用javascript實現(xiàn)鼠標(biāo)框選...2007-05-05
下面小編就為大家?guī)硪黄獪\談DOM的操作以及性能優(yōu)化問題-重繪重排。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
ajax對于各位來說，應(yīng)該都不陌生，正因為ajax的產(chǎn)生，導(dǎo)致前臺頁面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時還可以實現(xiàn)頁面的局部刷新。本文圖文并茂給大家介紹了js中ajax知識，需要的朋友一起學(xué)習(xí)吧2016-11-11
詳解如何在Canvas上實現(xiàn)坐標(biāo)定位
這篇文章我們將來詳細(xì)的給大家講解一下如何在 canvas 上實現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
微信小程序getLocation 需要在app.json中聲明permission字段
這篇文章主要介紹了微信小程序getLocation 需要在app.json中聲明permission字段，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮
這篇文章主要介紹了微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了JavaScript中的flat()和flatMap()方法,解釋了它們的功能、使用方法和應(yīng)用場景,flat()用于將嵌套數(shù)組壓平,而flatMap()則是在壓平的同時對每個元素進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2024-11-11