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

         /// <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[]);
string path = AppDomain.CurrentDomain.BaseDirectory + chartsPath;
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
//确保图片名称的唯一性
Guid chartsID = Guid.NewGuid();
string filename = chartsID + "." + fileType;
string savePath = path + filename; FileStream fs = System.IO.File.Create(savePath);
fs.Write(byteArray, , byteArray.Length);
fs.Close(); result.code = ;
result.message = "保存图片成功";
//返回相对地址
//_rsp.Data = FileTools._ReportChartsPath + filename;
//返回绝对地址
result.imgUrl = savePath;
}
catch (Exception ex)
{
result.code = -;
result.message = "引发异常";
}
return Json(result, JsonRequestBehavior.AllowGet);
}

 三、问题:导出的word中没有样式

解决方法:(1)在jquery.wordexport.js文件中,找到如下代码:

(2)将你的样式代码放到双引号中(这个还有待研究别的方法)

四、源码地址

      开发工具:VS2015社区版,框架:MVC

git地址:https://github.com/Jasmine1227/ExportToWord.git

利用jQuery-Word-Export导出word (含ECharts)的更多相关文章

  1. 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)

    https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...

  2. .net core 使用NPOI填充Word模板导出Word

    最近工作用到在Word模板插入数据库数据,导出一个带数据的Word文件,想起来之前操作Word都是用微软提供的Microsoft.Office.Interop.Word,而在最新的..NET CORE ...

  3. C#实现按Word模板导出Word(加书签bookMark)

    本方法是针对word导出操作,需要制作好的模板文件 模板.doc 引入应用Microsoft.Office.Interop.Word 11.0  (office2003) 导出文件注意:有时候迅雷会在 ...

  4. java根据word模板导出word文件

    1.word模板文件处理,如下图所示在word 文档中填值的地方写入占位变量 2.将word文档另存为xml文件.编辑如下图,找到填写的占位,修改为${bcrxm}格式 3.将文件后缀名改为.ftl文 ...

  5. 使用POI导出Word(含表格)的实现方式及操作Word的工具类

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

  6. 记录一下表格用poi的导出word

    也是网上找的代码http://53873039oycg.iteye.com/blog/2152009,但是横向合并单元格没成功.只能用很蠢的办法建立了好多table public void fillT ...

  7. Spring MVC中使用POI导出Word

    内容绝大部分来源于网络 准备工作 准备[XwpfTUtil]工具类(来源于网络) 准备word模版 下载[XwpfTUtil]工具类 import org.apache.poi.xwpf.usermo ...

  8. 数据导出之winfrom导出word(二)

    本篇文章介绍了根据word模板导出word文档的方法. 一.获取模板地址 WordDocFileHelper WordTem = new WordDocFileHelper(); string pat ...

  9. SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件?

    前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...

随机推荐

  1. 转载:关于思科交换机、路由器如何关闭telnet 开启ssh服务

    等保测评要求: 必须关闭telnet服务,开启ssh服务 即用ssh方式登录网络设备,而不允许用telnet. 输入密码.en 再次输入密码.sh run 这些常规动作就不再赘述. 1.关闭telne ...

  2. java的static和this

    1>static:静态修饰符   static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念.    被sta ...

  3. Django项目纪要

    开发流程 公司高层 项目立项 | 市场部门 需求分析-->需求分析说明书, 需求规格说明书 | 产品部门 产品原型-->产品 UI 前端 后端 测试 移动端 | |------------ ...

  4. Spring Cloud上下文:应用程序上下文服务

    Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...

  5. vmware ubuntu16 启动蓝屏屏幕闪

    vmware ubuntu16 启动蓝屏屏幕闪 虚拟机安装了ubuntu16 desktop,没有关闭自动更新: 结果关机虚拟机时出现等5秒更新,类似win10关机更新: 再开机发现就蓝屏了,多次重启 ...

  6. GEOS/GDAL 交叉编译ARM64-linux版本

    目录 安装编译环境 编译PROJ.4 编译GEOS 编译GDAL 编译后程序运行注意事项 因为试用华为云ARM64服务器(CentOS 7 操作系统)的时候,在云服务器上编译GDAL很长时间也没有编译 ...

  7. g-api notes

    目录 Q: What is GOrigin? What the meaning of parameters GMat(const GNode &n, std::size_t out) Q: h ...

  8. [转]import xxx from 和 import {xxx} from的区别

    原文地址:https://www.cnblogs.com/Abner5/p/7256043.html 1.vue import FunName from ‘../xxx’ 1.js export de ...

  9. Spark SQL里concat_ws和collect_set的作用

    concat_ws: 用指定的字符连接字符串 例如: 连接字符串: concat_ws("_", field1, field2),输出结果将会是:“field1_field2”. ...

  10. 安装MySQL Server

    之前安装了MySQL Workbench 8.0 CE,现在来安装MySQL Server. 点击 add next next next     完成 MySQL安装包地址: 链接:https://p ...