快捷導(dǎo)航

Vue中下載不同文件五種常用的方式

更新時(shí)間：2023年09月20日 08:35:17 作者：前端程序猿i

自己最近做項(xiàng)目的時(shí)候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下

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方法來打開一個(gè)新窗口，并直接訪問文件的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屬性為要下載的文件名。最后，通過調(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ù)。然后，通過創(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ì)象。然后，通過創(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，然后通過拼接文件夾路徑和文件名來構(gòu)建完整的文件URL地址fileUrl。接著，我們創(chuàng)建一個(gè)<a>標(biāo)簽，并設(shè)置其href屬性為文件URL，download屬性為要下載的文件名。最后，通過調(diào)用click()方法觸發(fā)鏈接的點(diǎn)擊事件，實(shí)現(xiàn)文件的下載。

以上是六種常用的在Vue中實(shí)現(xiàn)文件下載的方式，請(qǐng)根據(jù)項(xiàng)目需求選擇合適的方式來完成文件下載功能。