利用jQuery-Word-Export導出word (含ECharts)

時間 2019-11-18

標籤利用 jquery word export 導出 echarts 欄目 JQuery 简体版

原文原文鏈接

寫在前面的話:寫博客的初衷是想把本身學到的知識總結下來，在寫的過程當中，至關於又把知識梳理了一遍。我堅信有輸入，有輸出，技術纔會進步。我通常都會本身寫一個小demo，測試沒有問題，再進行整理。html

在實際作項目的過程當中，遇到問題，也是各類查，因此很感謝把知識分享出來的人，而我也願意把我本身學到的知識寫下來，一來是鞏固，二來若是能幫助到別人，那就更好啦。jquery

我寫的有些方法，看來有些笨，我也會繼續探索和研究。若有更好的方法，能夠一塊兒交流。git

正文開始~~~~github

1、jQuery-Word-Export導出word的優缺點ajax

優勢：簡單快捷，支持谷歌，火狐，360瀏覽器。json

缺點：1.不支持ie（我看網上說支持ie8之後的版本，可是我試的ie9，報錯，繼續研究）瀏覽器

2.有些樣式無論用（還在研究中）echarts

2、用法框架

1.先在頁面上引用jquery-1.10.2.min.js文件async

2.接着引用FileSaver.js和jquery.wordexport.js兩個文件

（下載地址：https://github.com/Jasmine1227/jquery.wordexport.js.git）

3.寫上以下代碼便可實現 $("#ReportToWord").wordExport(); 其中ReportToWord是要導出div的id。

記錄下遇到的問題

1、問題：頁面中是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());
    }

2、問題：報表中含有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         }