分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

利用jQuery-Word-Export导出word (含表格,ECharts)

发布时间:2023-09-06 02:02责任编辑:苏小强关键词:jQueryword
 

写在前面的话:写博客的初衷是想把自己学到的知识总结下来,在写的过程中,相当于又把知识梳理了一遍。我坚信有输入,有输出,技术才会进步。我一般都会自己写一个小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 ????????????try12 ????????????{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

利用jQuery-Word-Export导出word (含表格,ECharts)

原文地址:https://www.cnblogs.com/jas0203/p/9205607.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved