1、location.href
//get請求
window.location.href = url;
2、location.href
//get請求和location.href類似
window.open(url);
3、a標簽
//寫法1
const download = (filename, url) => {
let a = document.createElement('a');
a.style = 'display: none'; // 創(chuàng)建一個隱藏的a標簽
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click(); // 觸發(fā)a標簽的click事件
document.body.removeChild(a);
}
4、請求后端的方式
axios({
method: 'post',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
url: '/robot/strategyManagement/analysisExcel',
responseType: 'blob',
headers: { //如果需要權(quán)限下載的話，加在這里
Authorization: '123456'
}
data: JSON.stringify(params),
}).then(function(res){
var content = res.headers['content-disposition'];
var name = content && content.split(';')[1].split('filename=')[1];
var fileName = decodeURIComponent(name)
downloadFile(res.data,fileName)
})
5、文件下載的方式
downloadFile:function(data,fileName){
// data為blob格式
var blob = new Blob([data]);
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
}
6、Blob和Base64
function downloadFile(res, Filename) {
// res為接口返回數(shù)據(jù)，在請求接口的時候可進行鑒權(quán)
if (!res) return;
// IE及IE內(nèi)核瀏覽器
if ("msSaveOrOpenBlob" in navigator) {
navigator.msSaveOrOpenBlob(res, name);
return;
}
const url = URL.createObjectURL(new Blob([res]));
// const fileReader = new FileReader(); 使用 Base64 編碼生成
// fileReader.readAsDataURL(res);
// fileReader.onload = function() { ...此處邏輯和下面創(chuàng)建a標簽并釋放代碼一致，可從fileReader.result獲取href值... }
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = Filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 釋放blob對象
}
7、下載附件方法(excel,zip,html,markdown)
/**
* @param data 數(shù)據(jù)
* @param fileName 文件名稱
* @param type 導出文件類型
*/
export const download = (data: Blob, fileName: string, type: string) => {
// 創(chuàng)建 blob
const blob = new Blob([data], { type: mineType[type] })
// 創(chuàng)建 href 超鏈接，點擊進行下載
window.URL = window.URL || window.webkitURL
const href = URL.createObjectURL(blob)
const downA = document.createElement('a')
downA.href = href
downA.download = fileName
downA.click()
// 銷毀超連接
window.URL.revokeObjectURL(href)
}
export const mineType = {
excel: 'application/vnd.ms-excel', // 下載 Excel
word: 'application/msword', // 下載 Word
zip: 'application/zip', // 下載 Zip
html: 'text/html', // 下載 Html
markdown: 'text/markdown', // 下載 Markdown
}
使用
download(res, '導出模板.docx', 'word')
8、封裝下載函數(shù)
export const download = (res, type, filename) => {
// 創(chuàng)建blob對象，解析流數(shù)據(jù)
const blob = new Blob([res], {
// 設置返回的文件類型
// type: 'application/pdf;charset=UTF-8' 表示下載文檔為pdf，如果是word則設置為msword，excel為excel
type: type
})
// 這里就是創(chuàng)建一個a標簽，等下用來模擬點擊事件
const a = document.createElement('a')
// 兼容webkix瀏覽器，處理webkit瀏覽器中href自動添加blob前綴，默認在瀏覽器打開而不是下載
const URL = window.URL || window.webkitURL
// 根據(jù)解析后的blob對象創(chuàng)建URL 對象
const herf = URL.createObjectURL(blob)
// 下載鏈接
a.href = herf
// 下載文件名,如果后端沒有返回，可以自己寫a.download = '文件.pdf'
a.download = filename
document.body.appendChild(a)
// 點擊a標簽，進行下載
a.click()
// 收尾工作，在內(nèi)存中移除URL 對象
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)
}
9、導出 zip 壓縮包相關(guān)方法(流方式)
后端的設置 Content-Type: application/octet-stream(下載用的流）
// 下載zip方法
//zip格式文件下載
zipdwonUpload(data) {
console.log("干部任免表傳遞的數(shù)據(jù)", data);
let ids = data.ids;
console.log("ids集合數(shù)據(jù)", ids);
// 導出干部任免表接口
this.$axios
.post(`personnel/exportAppointmentAndDismissal`, ids, {
responseType: "blob",
})
.then((res) => {
// res
let blob = res;
let that = this;
//通過FileReader讀取數(shù)據(jù)，是一種異步文件讀取機制
let reader = new FileReader();
//以下這兩種方式我都可以解析出來，因為Blob對象的數(shù)據(jù)可以按文本或二進制的格式進行讀取
// reader.readAsBinaryString(blob, 'utf8');
reader.readAsText(blob, "utf8");
// eadAsText(file, encoding);以純文本的方式讀取，讀取到的文本保存在result屬性中。第二個參數(shù)代表編碼格式
reader.onload = function (result) {
//onload在成功加載后就會觸發(fā)
console.log("result信息", result);
console.log(
"isJson判斷是否為json格式",
that.isJSON(result.target.result)
);
if (that.isJSON(result.target.result)) {
that.$message.warning(JSON.parse(result.target.result).msg);
// loading效果
// that.loadingBut = false;
} else {
console.log("下載zip數(shù)據(jù)", res);
// that.downloadFile(res);
}
};
})
.catch((error) => {
console.log(error);
// 打印錯誤
})
.finally(() => {
// 導出按鈕loading效果
this.isDownloadingFile = false;
});
},
使用導出 zip文章來源：http://www.zghlxwxcb.cn/news/detail-630235.html
// 導出zip
downloadFile(res) {
// res 下載轉(zhuǎn)blob二進制或文本數(shù)據(jù)
let blob = new Blob([res], { type: "application/zip" });
console.log("導出的blob", blob);
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob 提供保存和打開按鈕
navigator.msSaveOrOpenBlob(blob, "xxx.zip");
// navigator.msSaveOrOpenBlob(blob, "xxx.zip");
return;
}
let url = window.URL.createObjectURL(blob);
const link = document.createElement("a"); // 創(chuàng)建a標簽
link.href = url;
link.download = `干部任免壓縮包`; // 重命名文件
link.click();
URL.revokeObjectURL(url); // 釋放內(nèi)存
// this.loadingBut = false; //loading效果
},
總結(jié)
如果這篇【文章】有幫助到你??，希望可以給我點個贊??，創(chuàng)作不易，如果有對前端或者對python感興趣的朋友,請多多關(guān)注??????，咱們一起探討和努力！?。?br> ????? 個人主頁 : 前端初見文章來源地址http://www.zghlxwxcb.cn/news/detail-630235.html
到了這里，關(guān)于前端下載文化部幾種方法(excel,zip,html,markdown、圖片等等)和導出 zip 壓縮包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
