前端导出表格乱码情况

学习总结

本周一直在改项目的bug然后遇到了一个新的东西是blob对象
Blob对象是一种表示不可变、原始数据的数据类型。它可以用于存储二进制数据、文件数据或大型数据等。
1 创建blob对象

const blob = new Blob([data], { type: 'mime/type' });
//data是二进制数据

通过FormData对象的getBlob方法创建Blob对象

const formData = new FormData();
formData.append('file', file);
const blob = formData.getBlob('file');

将Blob对象转换成URL，用于在浏览器中显示或下载文件：

const url = URL.createObjectURL(blob)

我们这次写的项目有导出表格的功能就用了这个方法 是同步访问后端接口

outResAll.onclick = function () {
  axios({
    method: 'get',
    url: `${url}/admin/exportAllSelectResult`,
    headers: {
      token: token
    },
    responseType: 'blob',

  })
    .then((response) => {
      const decodedText = response.data;
      var blob = new Blob([decodedText], { type: 'application/vnd.ms-excel;charset=utf-8' });
      // 创建下载链接
      var downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.download = '选课结果.xlsx'; // 设置文件名

      // 添加到页面并模拟点击下载
      document.body.appendChild(downloadLink);
      downloadLink.click();

      // 清理下载链接
      document.body.removeChild(downloadLink);
    })
    .catch((err) => {
      console.log(err);
    })
}

代码如上 注意的是 第一次存在乱码情况 最后解决方法是在其上加了 responseType: ‘blob’,
总结一下写项目的注意事项
1 axios的版本可能会造成打包问题
2 代码需要规范 不要出现死数据
3 需要按照要求来进行pkg打包