利用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