前端vue中怎么實現文件下載

這篇文章主要介紹了前端vue中怎么實現文件下載的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇前端vue中怎么實現文件下載文章都會有所收獲，下面我們一起來看看吧。

第一種方式 

前端創建超鏈接，通過a標簽向后端發送get請求，需要給a標簽添加一個download屬性

這種寫法是創造了一個a標簽，把地址寫到a標簽里再用js調用點擊，實現訪問文件地址就是下載了

代碼如下:

   <a
       @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)"
     >下載</a>
// 參數分別是：文件的路徑 文件的名字 文件的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>

//另一種情況是創建div標簽，動態創建a標簽：
<div name="downloadfile" "downloadExcel()">下載</div>
function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/xxx/xxx"
    a.click();
}

第二種方式

通過window.open()下載

window.open就是打開了一個新網頁直接在新網頁訪問文件地址了，只要訪問文件地址，就能下載文件。這時候后端返回的是文件流直接渲染,不需要url再打開下載了

  downloadFile() {
    window.open(
      baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
      '_self'
    );
  },

第三種方式

通過創建iframe的方式：

<el-button  size="mini" @click="handleExport(scope.row)">導出</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)
    }

第四種方式

以文件流的形式，會對后端發post請求，使用blob格式，這種寫法對于圖片和pdf及svg能實現下載功能

<a @click="downloadFile(file.name, file.url)" >下載</a>
 
/* 第一個參數是文件的名字，第二個參數是文件的路徑*/
 
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();
    }

如果后端返回的格式是文件流形式的，就不用轉換成Blob形式了。就可以直接簡寫為：

<a :href="src" rel="external nofollow"  download="name"/>

因為是文件流下載，所以在取后臺數據的時候，要多傳遞一個【responseType: ‘blob’】這個參數

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,// 請求地址
        method: 'post',
        data: config.data,// 參數
        responseType: 'blob'// 表明返回服務器返回的數據類型
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}

如果后端提供的下載接口是get類型，可以直接使用方法一和二和三，簡單又便捷；當然如果想使用方法四也是可以的，不過感覺有點舍近求遠了。

如果后端提供的下載接口是post類型，就必須要用方法四了。

關于“前端vue中怎么實現文件下載”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“前端vue中怎么實現文件下載”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。