vue前端實現(xiàn)下載文件功能

更新時間：2024年10月21日 15:27:29 作者：阿波拉

這篇文章主要介紹了vue前端實現(xiàn)下載文件功能,本文給大家介紹多種方式,感興趣的朋友跟隨小編一起看看吧

錯誤原因就是我把路徑寫在與我存圖片的路徑目錄下面了 src/assets/... ,這樣是不對的，應該把你需要下載的文件放在跟src同級的目錄下或者放在publice目錄里面，就是與你的網(wǎng)頁圖標文件favicon.ico以及index.html 這兩個文件同級就好了，由于 public 目錄下的文件可以直接通過 URL 訪問，您可以簡單地指定該文件的 URL,例如：

loadFile() {
  let url = '/upload_template.csv'; // public 目錄下的文件的 URL
  let link = document.createElement('a'); // 創(chuàng)建一個 <a> 元素
  link.href = url; // 設置鏈接的 href 屬性為文件的 URL
  link.download = 'upload_template.csv'; // 設置下載的文件名
  link.style.display = 'none'; // 隱藏鏈接
  document.body.appendChild(link); // 將鏈接添加到文檔中
  link.click(); // 模擬點擊鏈接以觸發(fā)下載
  document.body.removeChild(link); // 下載完成后移除鏈接
}

第一種：

使用<a>標簽下載文件：你可以在Vue組件中使用<a>標簽創(chuàng)建一個鏈接，設置href屬性為文件的URL，然后使用download屬性指定文件名。這樣點擊鏈接時會觸發(fā)文件下載。

代碼如下:

<a :href="fileUrl" rel="external nofollow"  download="filename">下載文件</a>

export default {
  data() {
    return {
      fileUrl: '/path/to/file.pdf',
    };
  },
};

第二種：

通過window.open()下載文件：可以通過打開一個新窗口來實現(xiàn)文件下載。

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

downloadFile() {
  window.open('/path/to/file.pdf', '_blank');
},

第三種：

通過創(chuàng)建iframe下載文件：創(chuàng)建一個隱藏的iframe，并設置其src屬性為文件的URL，這樣文件將會在iframe中加載并自動下載。

downloadFile() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = '/path/to/file.pdf';
  document.body.appendChild(iframe);
},

第四種：

通過向后端發(fā)送POST請求獲取文件流并使用Blob格式處理文件下載：在這種方法中，前端向后端發(fā)送POST請求，后端返回文件流，前端通過Blob對象處理并下載文件。

downloadFile() {
  axios({
    url: '/download',
    method: 'POST',
    responseType: 'blob',
    data: {
      // 可以根據(jù)需要傳遞參數(shù)
    },
  }).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.pdf');
    document.body.appendChild(link);
    link.click();
  });
},

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

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

第五種：

通過Ajax請求下載文件：使用Vue的HTTP庫（如axios）發(fā)送GET請求來獲取文件數(shù)據(jù)，然后使用Blob對象創(chuàng)建一個URL，并將其賦給一個隱藏的<a>標簽，最后模擬點擊這個鏈接來下載文件。

import axios from 'axios';
export default {
  methods: {
    downloadFile() {
      axios({
        url: '/path/to/file.pdf',
        method: 'GET',
        responseType: 'blob',
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.pdf');
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};

到此這篇關于vue前端實現(xiàn)下載文件功能的文章就介紹到這了,更多相關vue下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: