PHP結合vue導出excel出現(xiàn)亂碼的解決方法分享

更新時間：2023年02月03日 11:04:38 作者：黃啊碼

這篇文章主要為大家詳細介紹了PHP結合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只是一個類型標記，并不會起到轉碼的作用，想想也是，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')，接下來就是見證奇跡的時刻：