包含xlsxjs樣式的詞條

本文目錄一覽：

• 1、js如何設置excle表格邊框的樣式…
• 2、js xlsx使用說明（主要講導出表格與設置表頭相關）
• 3、react–使用js-xlsx實現excel文件的導入導出及預覽

js如何設置excle表格邊框的樣式…

請嘗試 oXL.Selection.Borders.Weight = 2; 來設置邊框, 1表示最細邊框,2表示細邊框,4表示粗線。

對於更粗的,可以嘗試通過 oXL.Selection.Borders.LineStyle = 1;來表示,具體線型: 1 實線, -4115 虛線, 4 點劃相間線, 5 劃線後跟兩個點, -4118 點式線, -4119 雙線。

以上信息是根據excel自帶的vb文檔找到的,VB下測試正常, 沒有在JS下測試.

js xlsx使用說明（主要講導出表格與設置表頭相關）

通過把頁面上已有的表格dom節點傳入（也可以動態js生成），直接返回一個workbook對象

把頁面上已有的表格dom節點傳入（也可以動態js生成），直接返回一個worksheet對象

給worksheet對象追加一個表格dom

通過json數據轉成一個worksheet對象

react–使用js-xlsx實現excel文件的導入導出及預覽

    最近公司項目要求對之前後端excel操作做優化，需要放到前端來做。講道理，我覺得沒啥子必要，尤其是當我在官網導入一張5k+的excel時瀏覽器卡死後更是覺得需求之智障。但是沒法子，還是要先自己做出來看看實際效果才行，我直接原地6個點……

導出

     安裝依賴

        cnpm i xlsx –save

     實現

         定義公共組件Excel，該組件需要提供導出按鈕，當點擊時觸發相應邏輯

         組件可接收的參數如下

                默認值如下

             根據傳入的type類型決定到底是顯示導入、導出、預覽按鈕還是都顯示

             當點擊導出按鈕，觸發回調

                引入xlsx

                導出邏輯

                首先要做的就是校驗是否用戶自己實現了導出函數，以及傳入的數據是否為數據且是否為空，由於不止導出要用，故放到untils中作公共函數，其他的輔助函數也從中導出

                     isVoid函數

                      getTable函數

                     getSheetHead函數

                     format函數

                     getCharCol函數

             導出結果如下

     改進

        可能你也發現了，導出的結果是沒有樣式信息的,那麼如何增加樣式呢？答案是xlsx-style

         安裝依賴

            cnpm i xlsx-style –save

            npm install file-saver –save

         xlsx-style導入報錯

            將報錯文件copy一份，修改後放到assets目錄下

            找到umijs的webpack配置文件，新增如下配置

         增加文字顏色和首行高亮處理

                增加輔助函數calculateWidth

                增加輔助函數addHeadlineStyle

                導出方式使用filesave

                效果如下

導入

        現在，我們來完成導入功能，並且導入後需要使用表格進行分頁預覽

         新增modal彈窗，用作預覽界面

        對應函數renderBody如下

        對應函數renderButton如下

        對應函數onPageChange如下

        點擊導入按鈕，回調處理如下

        新增的輔助函數如下

        新增組件狀態如下

        導入預覽效果如下

文檔

如有問題，歡迎評論指正哦~~

最後，還有個很重要的事情，點個贊再走吧，客官~~