实现文件下载的方式

测试资源存放在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; //获取bodyvar divElement = document.createElement("div"); //创建divvar downloadUrl = fileUrl; //文件地址divElement.innerHTML = `<form action=${downloadUrl} method="post" id="formBox"></form>` //form标签bodyElement.appendChild(divElement); //追加到bodydocument.getElementById("formBox").submit(); //自动提交表单bodyElement.removeChild(divElement); //移除form
}

下载方式优缺点