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); // 創建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'),接下來就是見證奇跡的時刻:
到此這篇關于PHP結合vue導出excel出現亂碼的解決方法分享的文章就介紹到這了,更多相關PHP導出excel出現亂碼內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!