写在前面的话:写博客的初衷是想把自己学到的知识总结下来,在写的过程中,相当于又把知识梳理了一遍。我坚信有输入,有输出,技术才会进步。我一般都会自己写一个小demo,测试没有问题,再进行整理。
在实际做项目的过程中,遇到问题,也是各种查,所以很感谢把知识分享出来的人,而我也愿意把我在项目中遇到的问题写下来,一来是巩固自己的知识点,二来如果能帮助到别人,那就更好啦。
我写的有些方法,看来有些笨,我也会继续探索和研究。如有更好的方法,可以一起交流。
正文开始~~~~
一、jQuery-Word-Export导出word的优缺点
优点:简单快捷,支持谷歌,火狐,360浏览器。
缺点:1.不支持ie(我看网上说支持ie8以后的版本,但是我试的ie9,报错,继续研究)
2.有些样式不管用(还在研究中)
二、用法
1.先在页面上引用jquery-1.10.2.min.js文件
2.接着引用FileSaver.js和jquery.wordexport.js两个文件
(下载地址:https://github.com/Jasmine1227/jquery.wordexport.js.git)
3.写上如下代码即可实现 $("#ReportToWord").wordExport(); 其中ReportToWord是要导出div的id。
记录下实际工作中实际遇到的问题
一、问题:页面中是input标签,导出来样式如下,不好看
解决方案:(1)我定义了两个div,main是页面上实际显示的,ReportToWord是导出的div
ReportToWord和main中一模一样,把main中的input标签换成对应的label,如下所示 (注:对应的样式要一致)
(2)导出的时候,进行赋值操作
function setValue() { //院系 $("#lbl_college").html($("#college").val()); //$("#reportName").attr("value", $("#reportName").val()); //专业 $("#lbl_major").html($("#major").val()); //年级班级 $("#lbl_class").html($("#class").val()); //学生姓名 $("#lbl_studentName").html($("#studentName").val()); //指导教师姓名 $("#lbl_teacherName").html($("#teacherName").val()); //主要内容 $("#lbl_mainContent").html($("#mainContent").val()); }
二、问题:报表中含有ECharts表格,直接导出,word中没有Echarts
解决方法:
1.在ReportToWord(实际导出的div)中添加如下代码:
2.在进行导出的时候,将ECharts保存为图片,存储到项目中固定的文件夹下。
View代码如下(如保存成功,则将图片地址赋值到src中):
//将charts保存为图片 function SaveChartsPic() { 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.Controller代码:
1 /// <summary> 2 /// 保存图片 3 /// </summary> 4 /// <param name="base64Info"></param> 5 /// <param name="fileType">保存的图片类型</param> 6 /// <returns></returns> 7 [HttpPost] 8 public ActionResult Export(string base64Info, string fileType) 9 { 10 Result result = new Result(); 11 try 12 { 13 string[] arr = base64Info.Split(new string[] { "base64," }, StringSplitOptions.RemoveEmptyEntries); 14 byte[] byteArray = Convert.FromBase64String(arr[1]); 15 string path = AppDomain.CurrentDomain.BaseDirectory + chartsPath; 16 if (!Directory.Exists(path)) 17 { 18 Directory.CreateDirectory(path); 19 } 20 //确保图片名称的唯一性 21 Guid chartsID = Guid.NewGuid(); 22 string filename = chartsID + "." + fileType; 23 string savePath = path + filename; 24 25 FileStream fs = System.IO.File.Create(savePath); 26 fs.Write(byteArray, 0, byteArray.Length); 27 fs.Close(); 28 29 30 result.code = 1; 31 result.message = "保存图片成功"; 32 //返回相对地址 33 //_rsp.Data = FileTools._ReportChartsPath + filename; 34 //返回绝对地址 35 result.imgUrl = savePath; 36 } 37 catch (Exception ex) 38 { 39 result.code = -1; 40 result.message = "引发异常"; 41 } 42 return Json(result, JsonRequestBehavior.AllowGet); 43 }
三、问题:导出的word中没有样式
解决方法:(1)在jquery.wordexport.js文件中,找到如下代码:
(2)将你的样式代码放到双引号中(这个还有待研究别的方法)
四、源码地址
开发工具:VS2015社区版,框架:MVC
git地址:https://github.com/Jasmine1227/ExportToWord.git
原文地址:https://www.cnblogs.com/jas0203/p/9205607.html