2010年8月13日 星期五

[Javascript] 處理 binary 的編碼問題

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


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


EPUB TEST


過去我一直認為,因為 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 就是按照內文中的編碼呈現。


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


EPUB


沒有留言:

張貼留言