vue开发中遇到问题总结(3)

  1. 使用 papaparse 导出的csv数据,用excel打开中文出现乱码
import Papa from "papaparse";

后台接口返回来的数据

          const resStr = response;
          let fileName = "XXXX文件";
          const data = Papa.parse(resStr);
          // Convert back to CSV
          const csv = Papa.unparse(data);

          //定义文件内容,类型必须为Blob 否则createObjectURL会报错
          let content = new Blob(["\ufeff" + csv], {
            // add "\ufeff"  ES5新增的空白符 【字节次序标记字符】Byte Order Mark,简称BOM
            type:
              ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          });
          //生成url对象
          let urlObject = window.URL || window.webkitURL || window;
          let url = urlObject.createObjectURL(content);
          //生成DOM元素
          let el = document.createElement("a");
          //链接赋值
          el.href = url;

          if (this.startTime != "" && this.endTime != "") {
            fileName = this.startTime + "-" + this.endTime + fileName;
          }

          el.download = fileName + ".csv";
          //必须点击否则不会下载
          el.click();
          //移除链接释放资源
          urlObject.revokeObjectURL(url);

解释:
主要增加在Blob中添加了 "\ufeff"。 ES5新增的空白符 【字节次序标记字符】Byte Order Mark,简称BOM

  1. 后端接口返回的id是Long型参数,前端js取值时精度丢失问题。
    原因是由于JavaScript中Number类型的自身原因,并不能完全表示Long型的数字,在Long长度大于17位时会出现精度丢失的问题。
    使用POSTMAN也会显示正常,用js解析就会出错。
    解决方法:
    a. 后端修改 把 long 型改为String类型 可参照这里
    b. 前端修改 使用long库 https://github.com/dcodeIO/long.js 可参照这里

你可能感兴趣的:(vue开发中遇到问题总结(3))