前言
今天项目中遇到一个需求把我们系统中的统计数据导出来 (主要是表格). 其实实现的的方法有很多, 而此次针对我的系统第一获取数据有点慢, 加上前不久写了一个在线阅读 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>
- <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 中调整样式即可进行导出
如图:
来源: https://www.cnblogs.com/kmonkeywyl/p/9896448.html