ajax 前端下载Excel文件,下载成功但是内容全部为乱码

ajax 文件下载成功,但内容全部为乱码问题。尝试以下方法解决:

乱码

在这里插入图片描述

原生xhr请求

let uri = '/queryExport'
let xhr = new XMLHttpRequest()
xhr.onload = function(e) {
    if (this.status == 200) {
    	/* 文件下载 */
        let blob = new Blob([this.response], {
            type: "application/vnd.ms-excel;charset=UTF-8"
        })
        let downloadUrl = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.href = downloadUrl
        link.download = '统计.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    }
    hideLoading_dialog()
}
xhr.open("POST", uri, true)
/* 重点:后端返回的响应类型为 arraybuffer,不是常用的 blob */
xhr.responseType = "arraybuffer"
/* 此处为后端接受请求数据的 MIME 类型  */
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
let param = new URLSearchParams()
param.append("startTime", startTime)
param.append("endTime", endTime)
xhr.send(param)

jQuery.ajax 请求jQuery>=v2.2.0

$.ajax({
  url:url,
  xhrFields: {
  	responseType: "arraybuffer"
  },
  data: {
  	startTime: startTime,
  	endTime: endTime
  },
  success:function(data){
    console.log(data); //ArrayBuffer
    console.log(new Blob([data])) // Blob
    /* 文件下载 */
    let blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=UTF-8"
    })
    let downloadUrl = window.URL.createObjectURL(blob)
    let link = document.createElement('a')
    link.href = downloadUrl
    link.download = '统计.xlsx'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(downloadUrl)
  }
})

jQuery 相关问题涉及版本

jQuery 中文官方文档
jQuery github
jQuery >=v1.5.1 支持 xhrFields 设置。
jQuery >=v2.2.0 支持responseType数据类型为binary时返回,不再抛出异常。(Ajax: Don’t throw exceptions on binary data response)

ArrayBuffer 和 Blob 的区别

responseType

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值