[Javascript] 處理 binary 的編碼問題

之前 把玩 Booktorious 時，碰到編碼的問題。苦思良久，今天發現，原來 Booktorious 的片段程式碼早就解決了！只是他只用在 XHTML 檔案而已。

整個流成是將一個 EPUB/ZIP 檔案，以 binary 型態讀進 Javascript 變數中，接著使用 js-unzip 和其相關套件，將變數所儲存的資料進行解壓縮，該 EPUB 檔案主要是一些 XHTML 或 XML 組成，緊接著分批處理那些 XHTML 跟 XML 檔案，在 Booktorious 已經很完善地解決完 XHTML 部份，然而，有些文件是 XML 部份則有編碼的問題。

過去我一直認為，因為 XML 檔案描述不夠完整，導致瀏覽器無法顯示正確的編碼，如上圖左邊書目，此資料來源是一個 XML 檔案。認為資料一開始以 binary 的方式儲存在 Javascript 變數中，因為過程是從 zip 檔案解壓縮產生並未透過瀏覽器而無法處理編碼(把該 XML 檔解壓縮出來，直接用瀏覽器看則會顯示正確編碼)，加上自己對 Javascript 不熟深深，覺得這大概是個瓶頸了！

在仔細確認一次 Booktorious 處理 XHTML 的部份，驚覺過程中用到了一個關鍵的步驟：

var data = decodeURIComponent(escape( raw_data ) );

其中 raw_data 就是從 EPUB 檔案透過 js-unzip 解壓縮出來的一個 XML 檔案內容，若編碼非英文，單純用 console.log( raw_data ); 則會看到亂碼。如今透過上述兩個函式的處理，則 data 就是按照內文中的編碼呈現。

最後的成果，就是正確書目囉