【黄啊码】PHP结合vue导出excel乱码

在这之前我们先回顾以前用php导出excel，我直接写成方法在这里：

public static function phpExcelList($field, $list, $title='文件',$file_time){$spreadsheet = new Spreadsheet();$sheet = $spreadsheet->getActiveSheet();foreach ($list as $key => $value) {foreach ($field as $k => $v) {if ($key == 0) {$sheet->setCellValue($k . '1', $v[1]);}$i = $key + 2; //表格是从2开始的$sheet->setCellValue($k . $i, $value[$v[0]]);}}ob_clean();header("Content-type:application/vnd.ms-excel;charset=UTF-8");header('Content-Type: application/vnd.ms-excel');header('Content-Disposition: attachment;filename="'.$title.'.csv"');header('Cache-Control: max-age=0');$writer = new Csv($spreadsheet);$writer->save('php://output');exit;}

一般有设置charset基本在前端就没啥问题，问题就在于vue导出时就出现乱码了，有可能是这个，大多数网友的解决方案就是在请求里边加上参数：responseType: 'blob', // 表明返回服务器返回的数据类型，但这里我已经提前申明返回的数据是正常的，这时候又会咋样呢？

咱们试试用国产的wps打开吧：

咦？没问题？再用office打开：啊哈》》？what？

那问题出在哪里呢？读入的文件是utf-8格式，下载下来Excel打开乱码，但是用其他编辑器打开并不是乱码，一开始解决问题的思路是，下载文件的时候，是不是没有指定编码方式，导致文件编码方式不对，于是乎使用了Blob里的type参数，硬塞了一个类型以及编码方式，但是这种方法似乎并不管用，仔细读了官方文档之后，关于type的解读如下：

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

发现这其实是微软家的坑，微软家发明了一个东西叫bom头，关于bom头：

类似WINDOWS自带的记事本等软件，在保存一个以UTF-8编码的文件时，会在文件开始的地方插入UTF-8 BOM头。记事本等编辑器通过它来识别这个文件是否以UTF-8编码(当然即便没有UTF-8 BOM头记事本也能通过其它方式正确识别UTF-8编码)。

那么如果一个UTF-8编码的字符串的开头处没有BOM头又会发生什么？答：不认识你，乱码给你看

所以我们在这需要手动加一个微软看得懂的BOM头：

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

总的代码示例如下，不懂可以直接抄：

this.$http.get(common.webapi+'/api/exportExcel',{params:{参数名称：参数值}}, {emulateJSON:true,responseType: 'blob'}).then((res)=>{if(res.data){const link = document.createElement('a');// 创建a标签let blob = new Blob(['\uFEFF' + res.data],{type: 'application/vnd.ms-excel;'}); // 设置文件类型并在返回值前加bom头，避免乱码link.style.display = "none";link.href = URL.createObjectURL(blob); // 创建URLlink.setAttribute("download", "数据"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv');document.body.appendChild(link);link.click();document.body.removeChild(link);//如果不会出现乱码，直接一句代码搞定：this.$fileDownload(res.data, "发票数据"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv')}})

//如果不会出现乱码，直接一句代码搞定：this.$fileDownload(res.data, "数据"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv')，接下来就是见证奇迹的时刻：

好了，今天的分享就这里，有问题的留个言，别忘了一键三连，下次我们还会再见！

我是黄啊码，码字的码，退。。。退。。。退。。。朝！

【黄啊码】PHP结合vue导出excel乱码相关推荐

Vue导出Excel乱码问题（已解决）
后端已经写好了导出Excel的接口,调用接口会发现后端返回的是二进制流文件实现方法: 在封装接口时,给接口传递一个参数 [ responseType: 'blob' ] 该参数是处理导出Exce ...
vue 导出Excel乱码问题解决方案
我的群153181864 前端交流群 ,绝对原创,转载请附上本微博链接.打赏下哦~ vue交流1群:153181864 前端交流群(满) vue交流2群:869745456 前端交流2群博 ...
vue导出excel乱码（锟斤拷唷?锟?；锟斤拷）
我这个是 post请求乱码了 ,如果是get,就直接window.open(url,'_blank')就可以了 1. "锟斤拷唷?锟?;锟斤拷"这种乱码信息导致的原因是:整个数据流 ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
vue导出excel表的时候有多张图片
vue导出excel的时候多张图片遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
vue导出Excel表格全局函数（简洁明了）
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...

【黄啊码】PHP结合vue导出excel乱码

【黄啊码】PHP结合vue导出excel乱码相关推荐

最新文章

热门文章