前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
第一種方式
前端創(chuàng)建超鏈接，通過a標(biāo)簽向后端發(fā)送get請求，需要給a標(biāo)簽添加一個(gè)download屬性
這種寫法是創(chuàng)造了一個(gè)a標(biāo)簽，把地址寫到a標(biāo)簽里再用js調(diào)用點(diǎn)擊，實(shí)現(xiàn)訪問文件地址就是下載了
代碼如下:
? ?<a ? ? ? ?@click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)" ? ? ?>下載</a> // 參數(shù)分別是：文件的路徑 文件的名字 文件的id 文件的類型
? downloadFile(url, fileName, flieId, type) {
? ? ?let link = document.createElement('a');
? ? ?link.style.display = 'none';
? ? ?link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;
? ? ?document.body.appendChild(link);
? ? ?link.click();
? ?},或者
<a :href='"/user/downloadExcel"' >下載模板</a>
//另一種情況是創(chuàng)建div標(biāo)簽，動態(tài)創(chuàng)建a標(biāo)簽：
<div name="downloadfile" "downloadExcel()">下載</div>
function downloadExcel() {
? ? let a = document.createElement('a')
? ? a.href ="/xxx/xxx"
? ? a.click();
}?第二種方式
通過window.open()下載
window.open就是打開了一個(gè)新網(wǎng)頁直接在新網(wǎng)頁訪問文件地址了，只要訪問文件地址，就能下載文件。這時(shí)候后端返回的是文件流直接渲染,不需要url再打開下載了
? downloadFile() {
? ? window.open(
? ? ? baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
? ? ? '_self'
? ? );
? },第三種方式
通過創(chuàng)建iframe的方式：
<el-button ?size="mini" @click="handleExport(scope.row)">導(dǎo)出</el-button>
//method方法：
handleExport(row) {
? ? ? var elemIF = document.createElement('iframe')
? ? ? elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
? ? ? ? ? ? ? ? ? ? '&category=' + row.category?
? ? ? elemIF.style.display = 'none'
? ? ? document.body.appendChild(elemIF)
? ? }第四種方式
以文件流的形式，會對后端發(fā)post請求，使用blob格式，這種寫法對于圖片和pdf及svg能實(shí)現(xiàn)下載功能
<a @click="downloadFile(file.name, file.url)" >下載</a>
?
/* 第一個(gè)參數(shù)是文件的名字，第二個(gè)參數(shù)是文件的路徑*/
?
downloadFile(fileName, fileUrl) {
? ? ? if (!fileUrl) {
? ? ? ? return;
? ? ? }
? ? ? let url = window.URL.createObjectURL(new Blob([fileUrl]));
? ? ? let link = document.createElement('a');
? ? ? link.style.display = 'none';
? ? ? link.href = url;
? ? ? link.setAttribute('download', fileName);
? ? ? document.body.appendChild(link);
? ? ? link.click();
? ? }如果后端返回的格式是文件流形式的，就不用轉(zhuǎn)換成Blob形式了。就可以直接簡寫為：
<a :href="src" rel="external nofollow" download="name"/>?
因?yàn)槭俏募飨螺d，所以在取后臺數(shù)據(jù)的時(shí)候，要多傳遞一個(gè)【responseType: ‘blob’】這個(gè)參數(shù)
function downloadPost (config){
? return new Promise((resolve,reject) => {
? ? axios({
? ? ? ? url: config.url,// 請求地址
? ? ? ? method: 'post',
? ? ? ? data: config.data,// 參數(shù)
? ? ? ? responseType: 'blob'// 表明返回服務(wù)器返回的數(shù)據(jù)類型
? ? }).then(res => {
? ? ? resolve(res)
? ? }).catch(err=>{
? ? ? reject(err);
? ? });
? });
}如果后端提供的下載接口是get類型，可以直接使用方法一和二和三，簡單又便捷；當(dāng)然如果想使用方法四也是可以的，不過感覺有點(diǎn)舍近求遠(yuǎn)了。
如果后端提供的下載接口是post類型，就必須要用方法四了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用vue-antd動態(tài)切換主題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vxe-table如何在單元格中渲染簡單的餅圖，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue2純前端實(shí)現(xiàn)像chatGpt和Deepseek那樣的文字流式輸出效果的相關(guān)知識,文中的示例代碼講解詳細(xì),有需要的可以了解下2025-03-03
Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時(shí)有一定的變化。接下來就學(xué)習(xí)學(xué)習(xí)它是如何使用的2021-11-11
vue實(shí)現(xiàn)web前端登錄頁數(shù)字驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web前端登錄頁數(shù)字驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來的解決
這篇文章主要介紹了mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue項(xiàng)目如何根據(jù)圖片url獲取file對象并用axios上傳