前端文件下载采坑记(Excel打开csv乱码问题)

背景

前端下载文件,下载为csv格式,Excel打开乱码的问题。
前端下载代码很简单,利用HTML5的blob接口生成前端下载链接,实现下载。
那问题出在哪里呢?读入的文件是utf-8格式,下载下来Excel打开乱码,但是用其他编辑器打开并不是乱码,一开始解决问题的思路是,下载文件的时候,是不是没有指定编码方式,导致文件编码方式不对,于是乎使用了Blob里的type参数,硬塞了一个类型以及编码方式,但是这种方法似乎并不管用,仔细读了官方文档之后,关于type的解读如下:

type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。
这里明确表明,此type只是一个类型标记,并不会起到转码的作用,想想也是,blob仅仅是内存里开辟的0,1代码,怎么可能在下载的过程中去解码编码呢?

后来逛遍大谷歌,发现这其实是微软家的坑,微软家发明了一个东西叫bom头,关于bom头:

https://www.cnblogs.com/sparkdev/p/5676654.html

这个恶心的bom头,微软系产品类似Excel会先识别该bom头,然后才能认识你,而针对csv格式文件,Excel又格外不友好。一些列手把手指导如何使用Excel打开,导入,导出csv格式文件的文章网上一大堆,那这里,我们的解决方法是给你加一个你认识的bom头,那你总能识别了吧。

解决方法

因此我们通过blob新建下载url的时候,加一个bom头编码:

window.URL.createObjectURL(new Blob(['\uFEFF' + content]))

再无乱码!

参考
https://stackoverflow.com/questions/18925210/download-blob-content-using-specified-charset
https://stackoverflow.com/questions/38508064/url-createobjecturl-and-charset-utf-8

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容