PHP结合vue导出excel出现乱码的解决方法分享
作者:黄啊码 发布时间:2023-05-30 09:18:25
在这之前我们先回顾以前用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); // 创建URL
link.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'),接下来就是见证奇迹的时刻:
来源:https://blog.csdn.net/TiaoZhanJi_Xian/article/details/128850738
猜你喜欢
- 人们很容易忽视图像img标签的alt属性。然而,它的重要性也无法体现出来,它是有利于网页的accessibility and&nb
- 将数据库中的信息存储至XML文件中:save.asp<!-- #include file="adovbs
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- '************************************* '读取文件 &
- 简单试用了一下IE8后,今天相对有时间点,对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSS HACK测
- 随着现在宽屏显示器的流行,Flash的全屏模式下,越来越需要考虑到普屏显示器与宽屏显示器的差别。Flash全屏模式有以下特点:窗口最大化,且
- 用下列方法可以做到: main.htm<html><body><form action="
- 环境:OS:Red Hat Enterprise Linux AS release 4 (Nahant)DB:Oracle Database
- 在使用ASP来进行后端的数据合法性校验的时候,有些人为满足不同环境下面的数据校验,编写了很多的函数来实现,比如,我们想要校验用户输入的URL
- jquery有一个插件叫Timer,很有意思,咱来实现一个简版的yui3的node timer。但还是应当首先交代下yui3的node扩展的
- 说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 bo
- asp之家注:学习asp网页编程的朋友一定用过ACCESS数据库,access的简单方便,大大降低了asp初学者学习asp的门槛,对于学习a
- 以下的文章主要是介绍MySQL5创建存储过程的实例演示,MySQL5创建存储在实际操作中应用的频率还是很高的,以下就是MySQL5创建存储过
- Yoho, 大家好,又是我哟~ 首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续
- 在IE7还不支持counter 和increment 属性之前,我从来没有用过它们,也从来没有使用过:before 伪元素和content
- 网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 手痒痒系列之简单的放大镜写了个放大镜功能,可以设置显示的宽高width,height显示的位置,float ‘left’ 'righ
- 阅读上一篇教程:WEB2.0网页制作标准教程(10)自适应高度布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:样式表:#lo
- Internet Explorer 9 Platform 1.9.7916.6000 Preview 4微软今天公布了IE9 Platfor