PHP結(jié)合vue導出excel出現(xiàn)亂碼的解決方法分享
在這之前我們先回顧以前用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導出時就出現(xiàn)亂碼了,有可能是這個,大多數(shù)網(wǎng)友的解決方案就是在請求里邊加上參數(shù):responseType: 'blob', // 表明返回服務器返回的數(shù)據(jù)類型,但這里我已經(jīng)提前申明返回的數(shù)據(jù)是正常的,這時候又會咋樣呢?

咱們試試用國產(chǎn)的wps打開吧:

咦?沒問題?再用office打開:啊哈》》?what?

那問題出在哪里呢?讀入的文件是utf-8格式,下載下來Excel打開亂碼,但是用其他編輯器打開并不是亂碼,一開始解決問題的思路是,下載文件的時候,是不是沒有指定編碼方式,導致文件編碼方式不對,于是乎使用了Blob里的type參數(shù),硬塞了一個類型以及編碼方式,但是這種方法似乎并不管用,仔細讀了官方文檔之后,關于type的解讀如下:
type,默認值為 “”,它代表了將會被放入到blob中的數(shù)組內(nèi)容的MIME類型。
這里明確表明,此type只是一個類型標記,并不會起到轉(zhuǎn)碼的作用,想想也是,blob僅僅是內(nèi)存里開辟的0,1代碼,怎么可能在下載的過程中去解碼編碼呢?
發(fā)現(xiàn)這其實是微軟家的坑,微軟家發(fā)明了一個東西叫bom頭,關于bom頭:
類似WINDOWS自帶的記事本等軟件,在保存一個以UTF-8編碼的文件時,會在文件開始的地方插入UTF-8 BOM頭。記事本等編輯器通過它來識別這個文件是否以UTF-8編碼(當然即便沒有UTF-8 BOM頭記事本也能通過其它方式正確識別UTF-8編碼)。
那么如果一個UTF-8編碼的字符串的開頭處沒有BOM頭又會發(fā)生什么?答:不認識你,亂碼給你看
所以我們在這需要手動加一個微軟看得懂的BOM頭:
window.URL.createObjectURL(new Blob(['\uFEFF' + content]))
總的代碼示例如下,不懂可以直接抄:
this.$http.get(common.webapi+'/api/exportExcel',{params:{參數(shù)名稱:參數(shù)值}}, {emulateJSON:true,responseType: 'blob'}).then((res)=>{
if(res.data){
const link = document.createElement('a');// 創(chuàng)建a標簽
let blob = new Blob(['\uFEFF' + res.data],{type: 'application/vnd.ms-excel;'}); // 設置文件類型并在返回值前加bom頭,避免亂碼
link.style.display = "none";
link.href = URL.createObjectURL(blob); // 創(chuàng)建URL
link.setAttribute("download", "數(shù)據(jù)"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
//如果不會出現(xiàn)亂碼,直接一句代碼搞定:this.$fileDownload(res.data, "發(fā)票數(shù)據(jù)"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv')
}
})//如果不會出現(xiàn)亂碼,直接一句代碼搞定:this.$fileDownload(res.data, "數(shù)據(jù)"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.csv'),接下來就是見證奇跡的時刻:

到此這篇關于PHP結(jié)合vue導出excel出現(xiàn)亂碼的解決方法分享的文章就介紹到這了,更多相關PHP導出excel出現(xiàn)亂碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
PHP+Javascript實現(xiàn)在線拍照功能實例
這篇文章主要介紹了PHP+Javascript實現(xiàn)在線拍照功能的方法,涉及javascript插件的使用及php圖片上傳的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
PHP編程實現(xiàn)csv文件導入mysql數(shù)據(jù)庫的方法
這篇文章主要介紹了PHP編程實現(xiàn)csv文件導入mysql數(shù)據(jù)庫的方法,涉及php文件讀取、轉(zhuǎn)換、數(shù)據(jù)庫的連接、插入等相關操作技巧,需要的朋友可以參考下2017-04-04
不用mod_rewrite直接用php實現(xiàn)偽靜態(tài)化頁面代碼
不用mod_rewrite直接用php代碼實現(xiàn)偽靜態(tài)效果,大家看后就會發(fā)現(xiàn)php真的很方便2008-10-10
php adodb連接帶密碼access數(shù)據(jù)庫實例,測試成功
最近前臺有個開票系統(tǒng)需要改進導致需要用PHP去連接那個系統(tǒng)的 數(shù)據(jù)庫,ACCESS的帶密碼的。寫了個簡單的實例,記錄下。2008-05-05

