当前端接收后端返回的数据要生成表格，但数据是一推乱码？

最新推荐文章于 2024-07-18 14:57:59 发布

诸葛阿吉

最新推荐文章于 2024-07-18 14:57:59 发布

阅读量176

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_38799042/article/details/132588577

版权

最近收到一个需求，要将页面列表里的数据生成表格并下载到本地，就是下面情况

后端小哥给了接口，我这边也调了接口，然后发现。。。。生成的数据是一堆乱码！！！

下载到本地的表格是

头皮发麻！！！！困扰了一天半，最后才发现是我少写了一个字母！！！

export const reqExportAllApplyDetailXls = data => {
  return request({
    url: `/dataStatistics/exportAllApplyDetailXls`,
    method: 'get',
    params: data,
    responseType: 'blob',//返回的响应数据类型为二进制数据流 (Blob)。
  })
}

responseType我之前写的是respnseType!!!!!🤬🤬🤬🤬

    // 导出数据操作
    async deriveHandler() {
      let param = {
      }
      let data = await reqExportAllApplyDetailXls(param)
      if (data) {
        let fileName = '接待历史信息查询'
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      }
    },

👆上面是将获取到的数据通过blob方法来自己安装到本地

代码解释如下：

data 是包含 Excel 文件内容的二进制数据。首先，我们使用 new Blob([data], { type: 'application/vnd.ms-excel' }) 创建一个 Blob 对象，表示这是一个 Excel 文件。

然后，通过 window.URL.createObjectURL() 方法将 Blob 对象转换成 URL 对象 url。接下来，我们创建了一个 <a> 标签元素，设置其样式为 display: none，并将 href 属性设置为 url，以及设置 download 属性为指定的文件名（fileName + '.xls'）。

接着，我们将 <a> 元素添加到页面的 <body> 中，调用 link.click() 实现模拟点击下载文件。

最后，我们使用 document.body.removeChild(link) 将下载链接从页面中移除，使用 window.URL.revokeObjectURL(url) 释放掉之前创建的 URL 对象。

这样，整个下载过程就完成了，并且下载的文件会以指定的文件名保存在用户的设备上。注意，fileName 是你给定的文件名，可以根据实际需求进行修改。

诸葛阿吉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
当前端接收后端返回的数据要生成表格，但数据是一推乱码？

这样，整个下载过程就完成了，并且下载的文件会以指定的文件名保存在用户的设备上。后端小哥给了接口，我这边也调了接口，然后发现。生成的数据是一堆乱码！responseType我之前写的是respnseType!最近收到一个需求，要将页面列表里的数据生成表格并下载到本地，就是下面情况。困扰了一天半，最后才发现是我少写了一个字母！是包含 Excel 文件内容的二进制数据。是你给定的文件名，可以根据实际需求进行修改。对象，表示这是一个 Excel 文件。释放掉之前创建的 URL 对象。实现模拟点击下载文件。
复制链接

扫一扫