前言
今天项目中遇到一个需求把我们系统中的统计数据导出来（主要是表格）。其实实现的的方法有很多，而此次针对我的系统第一获取数据有点慢，加上前不久写了一个在线阅读pdf与word，故此这次也想用前端的方式来导出。其实网上大致是两种一种是微软那种直接排除了，选择了运用第三方插件的方式。我用的jquery.wordexport.js导出的word，顺便尝试了一下jquery.table2excel.js导出Excel。顺便我的统计中也H5图表用的是echart。
导出word（jquery.wordexport.js）
此插件运用其实很简单，在这个过程当中主要遇到的就是系统中的样式没办法运用外联的方式。合并单元格rowspan我们系统中是用的display我需要把它移除。下面说过程。
1.js引用与实现
1.1.请按下方顺序引用不然是不能正常执行的依赖。
复制代码
复制代码
1.2.实现代码就更简单了。
1
$("#showDIV").wordExport(FineName)
一行代码就行FineName为文件名。
2.问题的解决
首先这是我页面上的内容，我需要把这个table放到showDIV中的一个div中;还要同时把这个table所在的div中不需要的删除。如下
1
2
3
4
var htmlstr = $("#HiddenDanger").html();//table所在div
$('#printWord').html(htmlstr);
$('#printWord div[data-role=pager]').remove();//把分页div删除
$('#showDIV script').remove();//div引用的js代码删除
然后导出，这样你会发现只有这个table，并且table为虚线，是不是也要把查询条件，导出内容加上去。
我把这些内容也同时加到了showDIV 中。如下
复制代码
复制代码
是的通过进行动态复制查询条件，然后到处即可
复制代码
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#进行保存图片
复制代码
///
/// 保存图片
///
///
///
保存的图片类型
///
[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中调整样式即可进行导出
如图：
分类: 项目实践
好文要顶 关注我 收藏该文 王延领
关注 - 2
粉丝 - 131
+加关注
2
« 上一篇：python 3.x 爬虫基础---正则表达式
posted @ 2018-11-02 15:34 王延领 阅读(788) 评论(14) 编辑 收藏
评论列表
#1楼 2018-11-02 15:38 昨日的世界
棒呆！
#2楼 2018-11-02 16:34 potent_prince
jquery.table2excel.js，这哪去了？这和标题也不符合啊
#3楼[楼主] 2018-11-02 16:51 王延领
@ potent_prince
什么标题？您说我提到的出Excel，我没要写这个不过你要用的话，其实也很简单
$("#HiddenDanger").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: "new Date().getTime() + ".xls", //文件名称
name: "Excel Document Name.xlsx",//导出的Excel文档的名称
exclude_img: true,//是否导出图片
exclude_links: true,//是否导出超链接
exclude_inputs: true//是否导出输入框中的内容。
});
以上
#4楼 2018-11-02 17:24 xiaobe
这应该是jq的一个方法吧？如果我在react项目用的话就得导入整一个jq诶。这样的话还是找单个npm包感觉好一点
#5楼 2018-11-02 21:36 yycisheng
博主写的很好，我对文中提到的在线预览pdf也很感兴趣呢，希望博主给个链接。
#6楼 2018-11-02 21:38 yycisheng
希望能得到楼主回复pdf在线预览。
#7楼 2018-11-03 08:32 Piero's
楼主，你好，有没有做过在线预览excel的功能，除了使用第三方服务，比如 i doc view ,因为这个要钱，所以看有没能其他办法实现，不知道楼主能不能回复我，谢谢
#8楼 2018-11-03 08:56 lcs-帅
在线预览office文档，装个owas，没有比这更好的方案了。
还不要钱，ms太良心了。
#9楼 2018-11-03 13:58 民工也Coding
好贴，支持楼主大侠。。。
#10楼[楼主] 2018-11-03 15:28 王延领
@ yycisheng
我用的pdf.js
#11楼[楼主] 2018-11-03 15:33 王延领
@ xiaobe
是要基于jquery的
#12楼[楼主] 2018-11-03 15:49 王延领
@ Piero's
你可以找一下有一个叫做sheet.js的，你可以看一下。
#13楼 2018-11-04 09:44 大菜
楼主你的博文编辑器用的什么
#14楼[楼主] 2018-11-04 11:30 王延领
@ 大菜
和大家都一样。
刷新评论刷新页面返回顶部
注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。
【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【活动】申请成为华为云云享专家 尊享9大权益
【工具】SpreadJS纯前端表格控件，可嵌入应用开发的在线Excel
【腾讯云】拼团福利，AMD云服务器8元/月
qcloudhttps://www.cnblogs.com/kmonkeywyl/p/9896448.html
