利用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代码：

        /// <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[1]);
                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, 0, byteArray.Length);
                fs.Close();


                result.code = 1;
                result.message = "保存图片成功";
                //返回相对地址
                //_rsp.Data = FileTools._ReportChartsPath + filename;
                //返回绝对地址
                result.imgUrl = savePath;
            }
            catch (Exception ex)
            {
                result.code = -1;
                result.message = "引发异常";
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

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

         解决方法：（1）在jquery.wordexport.js文件中，找到如下代码：

              

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

             

四、源码地址

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

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