1.1. a标签行内 默认 :get请求
<a href="your-file.pdf" download="desired-filename.pdf">下载文件</a>
1.2. a标签另一种方式
html代码 👇
<button onclick="downloadCSV()">下载CSV文件</button>
js代码👇
function downloadCSV() {
// 示例CSV数据
var csv = "姓名,年龄,职业\n张三,30,软件工程师\n李四,25,数据分析师";
// 创建一个Blob对象
var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
// 创建一个指向Blob的URL
var url = URL.createObjectURL(blob);
// 创建一个a标签并设置属性
var a = document.createElement("a");
a.href = url;
a.download = "example.csv"; // 设置下载文件名
document.body.appendChild(a); // 将a标签添加到body中(虽然这一步并非必需,但可以避免某些浏览器的安全限制)
a.click(); // 模拟点击以触发下载
// 清理:从body中移除a标签,并释放URL对象
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
2、下载文件 post 请求
html代码👇
<div @click="downloadData">
下载表格数据
</div>
js代码👇
downloadData() {
downloadData().then(res => {
// 假设 data 是返回来的二进制数据 const data = res.data
const url = window.URL.create0bjectURL(
new Blob([data],{ type: "a application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
},
index.js接口文件👇
export function getDownloadData (data) {
return request({
url: '/soft/downloadApi',
method: 'post',
data: data,
responseType:'blob' //这个很重要
})