害,这恼人的BOM

简介: 害,这恼人的BOM

0、前言


开发中做了一个导出CSV功能,本地通过wps测试都没有问题,但是测试人员测试的时候发现用excel打开中文表头会出现乱码现象,很奇怪的现象,用nodePad工具打开看也是正常的,但是用excel打开就是中文乱码,通过查找资料了解到是因为csv文件是utf-8编码的,但是没有增加bom头,这样就会导致在window环境下一些软件会用默认编码打开文件从而导致乱码问题,本文详细介绍从前端下载、后端读写如何解决该问题。


1、何为BOM


BOM —— Byte Order Mark,中文名译作“字节顺序标记”。关于 BOM 的说明:在UCS 编码中有一个叫做 "Zero Width No-Break Space" ,中文译名“零宽无间断间隔”的字符,它的编码是FEFF。而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前,先传输字符 "Zero Width No-Break Space"。这样如果接收者收到 FEFF,就表明这个字节流是Big-Endian的;如果收到FFF,就表明这个字节流是 Little- Endian的。因此字符 "Zero Width No-Break Space" (“零宽无间断间

隔”)又被称作 BOM。


image.png

UTF-8不需要BOM来表明字节顺序,但可以用BOM来表明编码方式。字符 "Zero Width No-Break Space" 的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流,就知道这是 UTF-8编码了。Windows环境就是使用BOM来标记文本文件的编码方式的。

image.png


2、BOM头带来的问题


Windows自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于让记事本、office等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于解析来说,BOM是个大麻烦。文件读取时并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。


通过notePad16进制打开文件可以看出bom头的区别

image.png


带有bom头的文件带来的问题主要有两个:


  • 乱码:如果字段中含有中文、希伯来文、法语、德语等文字,导出的csv文件在Excel中打开后,这些文字呈现出乱码。

image.png


  • 用opencsv等解析文件的api时由于多解析了bom头导致解析内容出错。


3、解决BOM乱码问题


严格来说这并不是csv文件的问题,而是Excel等windows软件处理文件编码方式问题,Excel默认并不是以UTF-8来打开文件,所以在csv开头加入BOM,告诉Excel文件使用utf-8的编码方式。如果文件以UTF-8编码,但又没有增加bom头就会导致excel按照默认编码方式解码,从而导致中文等乱码现象,由于现在读写文件一般都是用UTF-8编码,所以需要在代码中解决此问题。


3.1 Java后端修改


解决方案是在文件写入最开始处增加bom头,这样导出的文件用excel等软件打开就是正常的。


  • 如果是普通的输出流:
    outputStream.write(new byte[]{(byte) 0xEF, (byte) 0xBB, (byte) 0xBF});


  • 如果是包装流:
    BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(reportFile, true), UTF_8))); writer.write(new String(new byte[]{(byte) 0xEF, (byte) 0xBB, (byte) 0xBF}, UTF_8));


3.2 前端angular修改


这样修改后,能保证后端传给前端的流中包含bom头,但是使用angular时,通过接受文本的方式还是会把bom去掉,如下所示:

exportData() {
    let url = 'XX/**';
    const fileName = 'test.csv';
    this._http.post(url, this.queryParam).subscribe(res => {
      const data = res.text();
      getCSVFile(data, fileName);
    });
 }
 private  getCSVFile(data: any, fileName: string) {
    const blob = new Blob([data], {type: 'text/csv;charset=utf-8;'});
    const objectUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', fileName);
    a.click();
    document.body.removeChild(a);
 }

修改前端代码,使用blob的方式接受后端发过来的流数据:

exportData() {
    let url = 'XX/**';
    const fileName = 'test.csv';
    let requestOptions = new RequestOptions();
    requestOptions.responseType = ResponseContentType.Blob;
    this._http.post(url, this.queryParam, requestOptions).subscribe(res => {
      const data = res.blob();
      getCSVFile(data, fileName);
    });
 }
 private  getCSVFile(data: any, fileName: string) {
    const blob = new Blob([data], {type: 'text/csv;charset=utf-8;'});
    const objectUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', fileName);
    a.click();
    document.body.removeChild(a);
 }

由于前端技术有限,简单理解说明下,两处代码的区别,前端相应body常用的方法有res.text()、res.blob()、res.json()等方法,看res.text()源码注释可知,此方法会默认用iso-8859解码成文本,所以如果使用text方法接收,这改后端增加bom是无效的。经过测试还是用blob二进制流的方式接收才能不改变后端传过来的东西。

export declare abstract class Body {
/**
 * Attempts to return body as parsed `JSON` object, or raises an exception.
 */
 json(): any;
    /**
 * Returns the body as a string, presuming `toString()` can be called on the response body.
 *
 * When decoding an `ArrayBuffer`, the optional `encodingHint` parameter determines how the
 * bytes in the buffer will be interpreted. Valid values are:
 *
 * - `legacy` - incorrectly interpret the bytes as UTF-16 (technically, UCS-2). Only characters
 * in the Basic Multilingual Plane are supported, surrogate pairs are not handled correctly.
 * In addition, the endianness of the 16-bit octet pairs in the `ArrayBuffer` is not taken
 * into consideration. This is the default behavior to avoid breaking apps, but should be
 * considered deprecated.
 *
 * - `iso-8859` - interpret the bytes as ISO-8859 (which can be used for ASCII encoded text).
 */
 text(encodingHint?: 'legacy' | 'iso-8859'): string;
    /**
 * Return the body as an ArrayBuffer
 */
 arrayBuffer(): ArrayBuffer;
    /**
 * Returns the request's body as a Blob, assuming that body exists.
 */
 blob(): Blob;


4、Java处理BOM头文件


java普通的文件读取方式对于bom是无法正常识别的。使用普通的InputStreamReader,如果采用的编码正确,那么可以获得正确的字符,但bom仍然附带在结果中,很容易导致数据处理出错,尤其是在通过字符长度读取文件内容时。另外,对于存在BOM头的文件,无法猜测它使用的编码。


4、1 实现原理


整体解决思路就是对BOM头进行捕捉和过滤。


4.2 使用apache的工具类


使用BOMStream,该类的构造方式:


BOMInputStream bomIn = new BOMInputStream(in) //仅能检测到UTF8的bom,且在流中exclude掉bom
BOMInputStream bomIn = new BOMInputStream(in, include); //同上,且指定是否包含

也可以指定检测多种编码的bom,但目前仅支持UTF-8/UTF-16LE/UTF-16BE三种,对于UTF32之类不支持。


BOMInputStream bomIn = new BOMInputStream(in, ByteOrderMark.UTF_16LE, ByteOrderMark.UTF_16BE);

有用的方法:


bomIn.hasBOM()、hasBOM(ByteOrderMask.**)可用于判断当前流中是否检测到了bom。
FileInputStream fis = new FileInputStream(file);
//可检测多种类型,并剔除bom
BOMInputStream bomIn = new BOMInputStream(in, false,ByteOrderMark.UTF-8, ByteOrderMark.UTF_16LE, ByteOrderMark.UTF_16BE);
String charset = "utf-8";
//若检测到bom,则使用bom对应的编码
if(bomIn.hasBOM()){
   charset = bomIn.bs.getBOMCharsetName();
}
InputStreamReader reader = new InputStreamReader(bomIn, charset);
...


4.3、使用一个更强大点的工具类UnicodeStream


UnicodeStream(可以支持UTF-8/UTF-16LE/UTF-16BE/UTF-32LE/UTF-32BE)


FileInputStream fis = new FileInputStream(file);
UnicodeReader ur = new UnicodeReader(fis, "utf-8");
BufferedReader br = new BufferedReader(ur);
...

相较于Apache的工具类,这里的UnicodeReader支持更多的BOM编码。


原理:UnicodeReader通过PushbackInputStream+InputStreamReader实现BOM的自动检测和过滤读取; 当没有检测到BOM时,pushback流将回退,并采用构造函数传入的编码进行读取。 否则使用BOM对应的编码进行读取。


相对来说,第二种方式更加轻量和强大;另外也更加透明,可以随便修改源码来实现自己的需求。


5、总结


  • 如果再生成的文件只是为了程序之间传输数据,应该是写无bom头文件,这样会避免解析时的问题。


  • 如果是要给人员阅读就考虑是否会在window下用微软的软件打开问题,也就是要增加bom来解决乱码问题。





目录
相关文章
|
数据采集 安全 API
安全工具的无限联动——真香系列来啦~
安全工具的无限联动——真香系列来啦~
927 0
|
Java Maven
IDEA 2018 2020 2021 2022 各版本对Maven版本兼容问题汇总
Maven3.6.3版本兼容问题 错误信息如下: 测试范围如下图: 注意:针对一些老项目 还是尽量采用 3.6.3版本,针对idea各个版本的兼容性就很兼容 0.IDEA 2022 兼容maven 3.8.1及之前的所用版本 1.IDEA 2021 兼容maven 3.8.1及之前的所用版本 2.IDEA 2020 兼容Maven 3.6.3及之前所有版本 3.IDEA 2018 兼容Maven3.6.1及之前所有版本
4979 0
IDEA 2018 2020 2021 2022 各版本对Maven版本兼容问题汇总
|
11月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
417 2
|
存储 关系型数据库 MySQL
mysql按天自动生成表分区的执行语句
mysql按天自动生成表分区的执行语句
381 0
|
存储 关系型数据库 PostgreSQL
PostgreSQL TID及tuple slot
PostgreSQL TID及tuple slot
375 0
PostgreSQL TID及tuple slot
|
消息中间件 缓存 Java
高性能电商返利APP架构设计与实现
高性能电商返利APP架构设计与实现
|
XML JSON API
教你如何使用API接口获取数据!
使用API接口获取数据的过程通常涉及到几个步骤,包括了解API、注册获取API密钥、编写代码调用API并处理返回的数据。下面是一个详细的教程。
|
机器学习/深度学习 分布式计算 监控
业界难题“模拟点击”,端上如何实时防守?
本文针对模拟点击的黑产实时防控问题,介绍过去2年蚂蚁集团在技术方面的工作,旨在介绍风险存在的原因、风险的特点、风险的技术分析以及风险的防控方法。
雷电模拟器复制粘贴
雷电模拟器复制粘贴
1061 0
|
算法
数据包络分析(DEA)——BCC模型
数据包络分析(DEA)——BCC模型
2680 0