快捷導(dǎo)航

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

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

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

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

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

第一種：

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

代碼如下:

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

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

第二種：

通過(guò)window.open()下載文件：可以通過(guò)打開(kāi)一個(gè)新窗口來(lái)實(shí)現(xiàn)文件下載。

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

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

第三種：

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

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

第四種：

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

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類型，可以直接使用方法一和二和三，簡(jiǎn)單又便捷；當(dāng)然如果想使用方法四也是可以的，不過(guò)感覺(jué)有點(diǎn)舍近求遠(yuǎn)了。

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

第五種：

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

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();
      });
    },
  },
};

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

您可能感興趣的文章: