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中調整樣式即可進行導出

如圖：

作者：王延領

出處：http://wyl1924.cnblogs.com

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。