前言

　　今天專案中遇到一個需求把我們系統中的統計資料匯出來（主要是表格）。其實實現的的方法有很多，而此次針對我的系統第一獲取資料有點慢，加上前不久寫了一個線上閱讀pdf與word，故此這次也想用前端的方式來匯出。其實網上大致是兩種一種是微軟那種直接排除了，選擇了運用第三方外掛的方式。我用的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中調整樣式即可進行匯出

如圖：