文件导出方式

本文介绍了如何利用JavaScript实现GET方式导出文件,探讨了在前端开发中进行文件下载的相关技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GET方式导出文件


```javascript
window.open('')
window.location.href = ''
<a href={''} download="数据.xlsx">导 出</a>`在这里插入代码片`

POST方式导出文件
用axios方式

 axios.post(url, params, {responseType: 'blob'}).then(res => {
            const BLOB = res.data; // Blob 对象表示一个不可变、原始数据的类文件对象(File 接口都是基于Blob)
            const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
                // 新建个下载的a标签,完成后移除。
                let a = document.createElement('a');
                a.download = `数据报表.xlsx`;
                a.href = event.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        })


用form表单方式

let form = document.createElement('form')
form.style.display = 'none' // 隐藏form表单
form.action = '' // 调用接口的路径
form.method = 'post' // submit方法触发的调用url的方式
form.target = '_blank' // 在新窗口打开界面
document.body.appendChild(form) // 添加创建的form在body上
/*
  如果想在请求中携带参数
*/
const params = {} // 参数对象

for (let key in params) {
    let input = document.createElement('input')
    input.type = 'hidden' // 隐藏input框的输入字段
    input.name = key // 携带的参数名称
    input.value = params[key] // 参数名的值
    form.appendChild(input) // 把input框添加到form表单中去
}

form.submit() // 触发请求
form.remove() // 移除DOM

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值