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

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

时间: 2024-11-06 07:40:22

利用jQuery-Word-Export导出word (含表格,ECharts)的相关文章

C#,WPF使用word模板导出word文档

使用word模板导出word文档,首先需要在word模板中插入书签: 根据创建的书签名和位置,将需要写入的内容插入到word文件中. 需要引用  Microsoft.Office.Interop.Word;在添加引用-程序集中搜索可以找到. using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows; usin

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

先下载jacob.jar包. 解压后将jacob.dll放到windows/system32以下或\jre\bin以下. 将jacob.jar增加项目. 这样项目的环境基本上搭建完毕,接下来就是书写相关的代码: /** * 传入数据为HashMap对象,对象中的Key代表word模板中要替换的字段.Value代表用来替换的值. * word模板中全部要替换的字段(即HashMap中的Key)以特殊字符开头和结尾. * 如:$code$.$date$--.以免执行错误的替换. * 全部要替换为图片

利用Aspose.Words.dll导出Word代替NPOI

许久没来写博客了,已至于登录博客园的密码都忘却了. 时间过的真快,最近再做一个招聘管理系统,其中用到了导出Word文档的功能,尝试了各种方法,遇到了各种问题.不过最后还是解决了导出Word的问题. 一.针对导出Word文档的功能,采用的几个方案: 1.预置好Word文档模板,采用加载替换文档内容标签的方式实现.    采用这种方案可以借助两个第三方组件来实现,分别如下: (1).借助Microsoft.Office.Interop.Word组件实现.  (2).借助NPOI实现.  (3).借助

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

转载请注明出处:https://www.cnblogs.com/sun-flower1314/p/10128796.html 本篇是关于利用Apache 的POI导出Word的实现步骤.采用XWPFDocument导出Word,结构和样式完全由代码控制,操作起来还是非常的不太方便,只能够创建简单的word,不能设置样式,功能太少.但在这里还是实现一下,毕竟做过. 首先声明一些基本概念: XWPFDocument代表一个docx文档,其可以用来读docx文档,也可以用来写docx文档 XWPFPa

Struts2利用iText导出word文档(包含表格)以提供下载

J2EE ExcelStrutsXML 在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了,用的是Struts2+poi实现的.poi对excel表格操作能力很强,但是对word文档的支持一直没有更新,操作能力有限. iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf 的文档,而且可以将XML.Ht

java 处理word文档 (含图片,表格内容)

由于本人长期从事Oa相关项目的开发,所以处理word文档,Pdf,Excel等是在所难免的. 1.需求      处理Excel 可以用jxl        或者poi 2需求     用户在系统上填写信息,保存后导出标准的word文档,用户在系统上填写的信息我们用富文本编辑工具kindEditor,这个插件可以将用户从word文档拷贝的表格标签保存,但是图片信息需要另行上传. 现在问题出来了,我们要将这些包含图片,表格,特殊符号的东东生成word文档. 如果是单纯的没有特殊格字符,图片等信息,

c#(.net) 导出 word表格

做了差不多一周的导出Word,现在把代码贴出来   : ExportWord.cs 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.IO; 7 8 9 /// <summary> 10 ///DaoChuWord 的摘要说明 11 /// </summary> 12 publ

freemarker导出word——让表格数据行数 列数自动变化

行数.列数变化只需定义一个List<List<T>> freemarker遍历的话,只需要使用freemarker的标记性语言<#list report.qc_third_agentTable as  table2_tr>遍历即可,如图 实现的效果 freemarker导出word--让表格数据行数 列数自动变化,布布扣,bubuko.com

java将html导出成word(利用的poi包导出)

//导出到word public void exportWord(ActionMapping actionMapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response) throws Exception { DBTool tool = null ; try { /*** 查询数据库获得数据 **/ ArrayList records = form.getRecords(); if(