ajax post导出excel(解决乱码问题)

当前有一个需求 前端对当前页面的数据做筛选之后需要将其导出至excel文件
且发送的请求需传入需验证的参数如页面token信息
尝试了form提交及其他方法后出现excel乱码等问题 最后用ajax成功完成了导出。
直接贴代码:
clipboard.png
下面是解释:

xhr.responseType = “arraybuffer”;
这段代码不加会导致导出的excel出现乱码问题。

xhr.onload内操作如下:使用Blob的构造函数并将取得的response数据作为Blob实例对象的第一个参数,接着这第二个参数type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"可以把表格格式保存为xlsx模式,还有一种是"application/vnd.ms-excel"老版本的用法不需要使用。
由于返回的response数据是二进制流数据所以需借助Blob对象将其转化。另外可能还有其他js插件可以转化这里就不做演示了。

然后创建下载地址以供下载。

最后在页面新增临时a标签点击下载之后remove移除这个dom即可

另外的代码就是增加请求头等需与后端沟通好的信息了
后端需要规定参数的话params里再加就好了,这边传了个空对象。

以上就是最近项目遇到的一点问题希望对读完的您有帮助。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用 Ajax 导出 Excel 文件时,出现码的原因可能是因为 Excel 文件的编码与浏览器的编码不一致。解决这个问题可以尝试使用以下方法: 1. 在 Ajax 请求中设置 responseType 为 'blob',并指定 Excel 文件的编码格式为 utf-8,例如: ``` $.ajax({ url: 'your-url', method: 'GET', responseType: 'blob', success: function(data) { var blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'}); var url = window.URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'file-name.xlsx'; link.click(); } }); ``` 2. 如果上述方法仍然不能解决问题,可以在服务器端生成 Excel 文件时指定编码格式为 utf-8,例如 PHP 中可以使用以下代码: ``` header('Content-Type: application/vnd.ms-excel;charset=utf-8'); header('Content-Disposition: attachment;filename="file-name.xlsx"'); ``` 其中,第一行代码指定了 Excel 文件的 MIME 类型和编码格式,第二行代码指定了文件名和文件格式。 3. 如果仍然不能解决问题,可以尝试在服务器端生成 Excel 文件时使用 UTF-8 编码,并将文件内容进行 Base64 编码,然后将编码后的字符串返回给前端,前端再将字符串转换为 Blob 对象进行下载。具体实现可以参考以下代码: ``` $.ajax({ url: 'your-url', method: 'GET', success: function(data) { var blob = new Blob([base64ToArrayBuffer(data)], {type: 'application/vnd.ms-excel;charset=utf-8'}); var url = window.URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'file-name.xlsx'; link.click(); } }); function base64ToArrayBuffer(base64) { var binaryString = window.atob(base64); var binaryLen = binaryString.length; var bytes = new Uint8Array(binaryLen); for (var i = 0; i < binaryLen; i++) { var ascii = binaryString.charCodeAt(i); bytes[i] = ascii; } return bytes; } ``` 其中,base64ToArrayBuffer 函数用于将 Base64 编码的字符串转换为 ArrayBuffer 对象,用于创建 Blob 对象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值