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

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。