jquery插件導出word：jquery.wordexport.js

前言

　　今天項目中遇到一個需求把咱們系統中的統計數據導出來（主要是表格）。其實實現的的方法有不少，而這次針對個人系統第一獲取數據有點慢，加上前不久寫了一個在線閱讀pdf，故此此次也想用前端的方式來導出。其實網上大體是兩種一種是微軟那種直接排除了，選擇了運用第三方插件的方式。我用的jquery.wordexport.js導出的word，順便嘗試了一下jquery.table2excel.js導出Excel。順便個人統計中也H5圖表用的是echart。

導出word（jquery.wordexport.js）

此插件運用其實很簡單，在這個過程中主要遇到的就是系統中的樣式沒辦法運用外聯的方式。合併單元格rowspan咱們系統中是用的display我須要把它移除。下面說過程。

1.js引用與實現

1.1.請按下方順序引用否則是不能正常執行的依賴。

<script src="jqwordexport/jquery-1.11.1.js"></script>
<script src="jqwordexport/FileSaver.js"></script>
<script src="jqwordexport/jquery.wordexport.js"></script>

1.2.實現代碼就更簡單了。

 $("#showDIV").wordExport(FineName)

 一行代碼就行FineName爲文件名。

2.問題的解決

首先這是我頁面上的內容，我須要把這個table放到showDIV中的一個div中;還要同時把這個table所在的div中不須要的刪除。以下

 var htmlstr = $("#HiddenDanger").html();//table所在div
 $('#printWord').html(htmlstr);
 $('#printWord div[data-role=pager]').remove();//把分頁div刪除
 $('#showDIV script').remove();//div引用的js代碼刪除

 

 而後導出，這樣你會發現只有這個table，而且table爲虛線，是否是也要把查詢條件，導出內容加上去。

我把這些內容也同時加到了showDIV 中。以下

<div id="showDIV" >
    <style>
        #printWord table {
            border: 1px solid #ddd;
            border-collapse: collapse;
            width: 95%;
            margin: auto;
        }
            #printWord table tr td {
                border: 1px solid #ddd;
            }

            #printWord table tr th {
                border: 1px solid #ddd;
                border-radius: 10px;
            }
    </style>
    <h2 style="text-align: center;">
        隱患等級數量統計
    </h2>
    <div style="text-align: right;margin-right: 50px; font-size: 16px;font-style: italic">
        <span style="color: blue;">線路</span>：<span id="slineName"></span>&nbsp;&nbsp;&nbsp;
        <span style="color: blue;">時間</span>：<span id="stm"></span>
    </div>
    <div id="printWord" />
</div>

是的經過進行動態複製查詢條件，而後處處便可

 function word() {
        var stm = $('#tm').val()
        var slineName = $("#line").data("kendoDropDownList").text();
        var FineName = $('#line').text() + $('#tm').val() + '隱患等級數量統計';
        $('#slineName').html(slineName);
        $('#stm').html(stm);
        $("#showDIV").wordExport(FineName)
    }

以上基本的html表格就能正常處處了，不須要調用後臺，代碼書寫也方便。

3.echart 導出

上面也說咱們系統中還有圖標這種方式直接處處會發現他會自動把echart生成table

暫時我用的網上的建議經過保存圖片的方式進行img連接的方式進行導出了。以下：

3.1.先獲取echart 圖片流

//將charts保存爲圖片
    function SaveChartsPic() {
        //var chartExportUrl = '/lang/EchartTest/Export';
        var picBase64Info = myChart.getDataURL();//獲取echarts圖的base64編碼，爲png格式。
        $.ajax({
            url: "/ReportForms/Export",
            data: { base64Info: picBase64Info, fileType: 'png' },
            type: "Post",
            async: false,
            dataType: "json",
            success: function (data) {
                //若是成功，記錄圖片的地址
                if (data.code == 1) {
                    $('#img_Charts').attr('src', data.imgUrl);
                }
                    //若是失敗，彈出提示
                else {
                    alert(data.Message);
                }
            },
        })
    }

3.2.c#進行保存圖片

        /// <summary>
        /// 保存圖片
        /// </summary>
        /// <param name="base64Info"></param>
        /// <param name="fileType">保存的圖片類型</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Export(string base64Info, string fileType)
        {
            Result result = new Result();
            try
            {
                string[] arr = base64Info.Split(new string[] { "base64," }, StringSplitOptions.RemoveEmptyEntries);
                byte[] byteArray = Convert.FromBase64String(arr[1]);
                string path = AppDomain.CurrentDomain.BaseDirectory + chartsPath;
                //string path = Server.MapPath("/Resoucrces/File/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                //確保圖片名稱的惟一性
                Guid chartsID = Guid.NewGuid();
                //string filename = DateTime.Now.ToFileTime() + "." + fileType;
                string filename = chartsID + "." + fileType;
                string savePath = path + filename;

                FileStream fs = System.IO.File.Create(savePath);
                fs.Write(byteArray, 0, byteArray.Length);
                fs.Close();

                result.code = 1;
                result.message = "保存圖片成功";
               
                result.imgUrl = savePath;
            }
            catch (Exception ex)
            {
                result.code = -1;
                result.message = "引起異常";
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

讓後把圖片對應的div放進導出div中調整樣式便可進行導出

如圖：