实现文件下载的方式

测试资源存放在public文件夹下

1.axios

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

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile (fileName) {
      const fileUrl = './' + 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);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

使用了axios发送GET请求，设置responseType为blob以便获取文件的二进制数据。然后，通过创建临时URL、创建a标签并设置下载属性，实现文件的下载。

2.window.open

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

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

window.open打开一个新的页面，并直接访问url

3.a标签

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

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

通过创建临时URL、创建a标签并设置下载属性，实现文件的下载。

4.Fetch API

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

<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = './' + 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发送GET请求，并使用.blob()方法将返回的数据转换为blob对象。然后，通过创建临时URL、创建a标签并设置下载属性，实现文件的下载。

5.链接跳转

window.location.href = this.downloadUrl;

6.通过iframe的方式

handleExport(url) {
    var elemIF = document.createElement('iframe')
    elemIF.src = url;
    elemIF.style.display = 'none'
    document.body.appendChild(elemIF)
}

7.form标签

exportCallBack = (fileUrl) => {
    var bodyElement = document.body; //获取body
    var divElement = document.createElement("div"); //创建div
    var downloadUrl = fileUrl; //文件地址
    divElement.innerHTML = `<form action=${downloadUrl} method="post" id="formBox"></form>` //form标签
    bodyElement.appendChild(divElement); //追加到body
    document.getElementById("formBox").submit(); //自动提交表单
    bodyElement.removeChild(divElement); //移除form
}

下载方式优缺点