快捷導(dǎo)航

Vue下載不同文件的幾種方式總結(jié)

更新時(shí)間：2025年01月24日 09:24:57 作者：前端程序猿i

在Vue項(xiàng)目中實(shí)現(xiàn)文件下載有多種方式,包括使用window.open、<a>標(biāo)簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標(biāo)簽等,每種方法都有其適用場(chǎng)景,開(kāi)發(fā)者可以根據(jù)項(xiàng)目需求選擇最合適的方式

Vue下載不同文件的幾種方式

當(dāng)在Vue中需要實(shí)現(xiàn)文件下載功能時(shí)，我們可以有多種方式來(lái)完成。

1. 使用window.open方法下載文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      window.open(fileUrl);
    }
  }
};
</script>

在上面的示例中，我們使用了window.open方法來(lái)打開(kāi)一個(gè)新窗口，并直接訪問(wèn)文件的URL地址，從而觸發(fā)文件下載。

2. 使用<a>標(biāo)簽進(jìn)行文件下載

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

在上面的示例中，我們首先創(chuàng)建一個(gè)<a>標(biāo)簽，然后設(shè)置其href屬性為文件的URL地址，download屬性為要下載的文件名。

最后，通過(guò)調(diào)用click()方法觸發(fā)鏈接的點(diǎn)擊事件，實(shí)現(xiàn)文件的下載。

3. 使用axios下載文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      axios.get(fileUrl, { 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);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上面的示例中，我們使用了axios發(fā)送GET請(qǐng)求，設(shè)置responseType為blob以便獲取文件的二進(jìn)制數(shù)據(jù)。

然后，通過(guò)創(chuàng)建臨時(shí)URL、創(chuàng)建<a>標(biāo)簽并設(shè)置下載屬性，實(shí)現(xiàn)文件的下載。

4. 使用Fetch API下載文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上面的示例中，我們使用了Fetch API發(fā)送GET請(qǐng)求，并使用.blob()方法將返回的數(shù)據(jù)轉(zhuǎn)換為blob對(duì)象。

然后，通過(guò)創(chuàng)建臨時(shí)URL、創(chuàng)建<a>標(biāo)簽并設(shè)置下載屬性，實(shí)現(xiàn)文件的下載。

5. 使用Vue的$download方法下載文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      this.$download(fileUrl, fileName);
    }
  }
};
</script>

在這個(gè)示例中，我們直接調(diào)用Vue實(shí)例的$download方法，并傳入文件的URL地址和下載的文件名，即可實(shí)現(xiàn)文件的下載。

6. 使用創(chuàng)建a標(biāo)簽方法下載文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下載文件1</button>
    <button @click="downloadFile('file2.jpg')">下載文件2</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const folderPath = '/path/to/folder/'; // 文件所在的文件夾路徑
      const fileUrl = folderPath + fileName; // 拼接文件夾路徑和文件名
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

在這個(gè)示例中，我們首先定義了文件所在的文件夾路徑folderPath，然后通過(guò)拼接文件夾路徑和文件名來(lái)構(gòu)建完整的文件URL地址fileUrl。

接著，我們創(chuàng)建一個(gè)<a>標(biāo)簽，并設(shè)置其href屬性為文件URL，download屬性為要下載的文件名。

最后，通過(guò)調(diào)用click()方法觸發(fā)鏈接的點(diǎn)擊事件，實(shí)現(xiàn)文件的下載。