【填坑】處理前端用sheetjs/xlsx.js“打印設置為橫向”的問題

最近一個項目【導出】是用前端導出excel文件，並且要求導出的文件打印設置為橫向。具體用了sheetjs的xlsx.js，但是它的打印設置是商業版的樣子，僅看到說明：worksheet['!pageSetup']：設置縮放大小和打印方向的對象。

//縮放100%，打印方向為縱向
worksheet['!pageSetup'] = {
    scale: '100',
    orientation: 'portrait'
}
// orientation 取值如下：
// 'portrait'  - 縱向    
// 'landscape' - 橫向

對於一個號稱全棧的我來說，這個挑戰還是挺困難的...

網上找了一圈資料，有說用ActiveX的，有說用xlsx-style的，有打算將blob類型數據傳到后端，再用后端組件修改完傳到前端下載的...  這些方案在解決他們場景時，都是好用的，都是沒問題的。但，處理前面描述的這個場景就是無效，調試來、調試去，就是不行！哈哈

 

關鍵時刻還是多年的碼代碼經驗幫了我，既然前端代碼是裸奔的，就從讀源碼下手，解決方案如下：

1. npm安裝了bower。
2. bower又安裝了js-xlsx。

   bower install js-xlsx-style#beta

3. 在 js-xlsx/dist/xlsx.js 以“!pageSetup”為關鍵字，找到了打印設置的具體實現。
4. 在代碼增加如下3處，即可解決打印橫向設置的問題。

     ws['!pageSetup'] = {
         orientation: 'landscape'
     }

     //新增方法
     function write_ws_xml_pagesetup(setup) {
       var pageSetup =  writextag('pageSetup', null, {
         scale: setup.scale || '100',
         orientation: setup.orientation || 'portrait',
         horizontalDpi : setup.horizontalDpi || '4294967292',
         verticalDpi : setup.verticalDpi || '4294967292'
       })
       return pageSetup;
     }

     //在方法里添加
     function write_ws_xml(idx, opts, wb, rels) {
       /* printOptions */
       //if (ws['!margins'] != null) o[o.length] =  write_ws_xml_margins(ws['!margins']);
       
       /* pageSetup 注意，緊接着在!margins下面添加。
          否則，ms office打開時會報錯，一片空白... wps只要是添加在</worksheet>前，都不會報錯。*/
       if (ws['!pageSetup'] !== undefined) o[o.length] =  write_ws_xml_pagesetup(ws['!pageSetup']);
     }

   

    

 如圖，問題解決。