前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
第一種方式
前端創(chuàng)建超鏈接，通過(guò)a標(biāo)簽向后端發(fā)送get請(qǐng)求，需要給a標(biāo)簽添加一個(gè)download屬性
這種寫法是創(chuàng)造了一個(gè)a標(biāo)簽，把地址寫到a標(biāo)簽里再用js調(diào)用點(diǎn)擊，實(shí)現(xiàn)訪問(wè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)簽，動(dòng)態(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();
}?第二種方式
通過(guò)window.open()下載
window.open就是打開(kāi)了一個(gè)新網(wǎng)頁(yè)直接在新網(wǎng)頁(yè)訪問(wèn)文件地址了，只要訪問(wèn)文件地址，就能下載文件。這時(shí)候后端返回的是文件流直接渲染,不需要url再打開(kāi)下載了
? downloadFile() {
? ? window.open(
? ? ? baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
? ? ? '_self'
? ? );
? },第三種方式
通過(guò)創(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)
? ? }第四種方式
以文件流的形式，會(huì)對(duì)后端發(fā)post請(qǐng)求，使用blob格式，這種寫法對(duì)于圖片和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形式了。就可以直接簡(jiǎn)寫為：
<a :href="src" rel="external nofollow" download="name"/>?
因?yàn)槭俏募飨螺d，所以在取后臺(tái)數(shù)據(jù)的時(shí)候，要多傳遞一個(gè)【responseType: ‘blob’】這個(gè)參數(shù)
function downloadPost (config){
? return new Promise((resolve,reject) => {
? ? axios({
? ? ? ? url: config.url,// 請(qǐng)求地址
? ? ? ? method: 'post',
? ? ? ? data: config.data,// 參數(shù)
? ? ? ? responseType: 'blob'// 表明返回服務(wù)器返回的數(shù)據(jù)類型
? ? }).then(res => {
? ? ? resolve(res)
? ? }).catch(err=>{
? ? ? reject(err);
? ? });
? });
}如果后端提供的下載接口是get類型，可以直接使用方法一和二和三，簡(jiǎn)單又便捷；當(dāng)然如果想使用方法四也是可以的，不過(guò)感覺(jué)有點(diǎn)舍近求遠(yuǎn)了。
如果后端提供的下載接口是post類型，就必須要用方法四了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開(kāi)發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來(lái)學(xué)習(xí)一下Vue中常見(jiàn)組合式API的使用吧2023-11-11
vue2.0開(kāi)發(fā)實(shí)踐總結(jié)之疑難篇
這篇文章主要為大家總結(jié)了vue2.0開(kāi)發(fā)實(shí)踐的疑難,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程
這篇文章主要介紹了vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程,本文給大家介紹如何使用electron-builder這個(gè)庫(kù)結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
vue cli 3.x 項(xiàng)目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項(xiàng)目部署到 github pages的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通常可以使用插槽來(lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
mpvue小程序循環(huán)動(dòng)畫開(kāi)啟暫停的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動(dòng)畫開(kāi)啟暫停的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue中keep-alive的兩種應(yīng)用方式，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問(wèn)子組件實(shí)例以及使用 $children 和 $parent 訪問(wèn)父子組件實(shí)例2023-09-09
這篇文章主要介紹了vue 中slot 的具體用法,包括子組件父組件的代碼介紹，需要的朋友可以參考下2018-04-04
vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動(dòng)并且固定表頭,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02