Export Word with jquery-word-export (with table, echarts)

Written in front of the words: the original intention of the blog is to learn the knowledge of their own summary down, in the process of writing, the equivalent of the knowledge combed again. I firmly believe that there is input, output, technology will progress. I usually write a small demo myself, test no problems, and then organize.

In the actual project process, encountered problems, but also a variety of checks, so very grateful to the knowledge to share out of the people, and I am willing to put my problems in the project to write down, one is to consolidate their knowledge points, and secondly if can help others, it is better.

I have written some methods, it seems a bit stupid, I will continue to explore and research. If there is a better way, you can communicate together.

Text Start ~ ~ ~

First,Jquery-word-export the pros and cons of exporting Word

Advantages: Simple and fast, support Google, Firefox, 360 browser.

Cons: 1. IE is not supported (I see the Online Support IE8 later version, but I try to IE9, error, continue to study)

2. Some styles are not used (still in the study)

Second, usage

1. Refer to the Jquery-1.10.2.min.js file on the page first

2. Then refer to Filesaver.js and jquery.wordexport.js two files

(: Https://github.com/Jasmine1227/jquery.wordexport.js.git)

3. Write the following code to achieve $ ("#ReportToWord"). Wordexport (); Where Reporttoword is the ID of the div to export.

Record the actual problems encountered in the actual work

First, the problem: the page is the input tag, exported to the style below, not good-looking

Solution: (1) I defined two Div,main is actually displayed on the page, Reporttoword is the exported div

Reporttoword and main are identical, replace the input tag in main with the corresponding label, as follows (note: the corresponding style should be consistent)

(2) When the export, the assignment operation

functionSetValue () {//Faculties and departments$ ("#lbl_college"). HTML ($ ("#college"). Val ()); //$ ("#reportName"). attr ("Value", $ ("#reportName"). Val ());        //Professional$ ("#lbl_major"). HTML ($ ("#major"). Val ()); //Grade class$ ("#lbl_class"). HTML ($ ("#class"). Val ()); //Student Name$ ("#lbl_studentName"). HTML ($ ("#studentName"). Val ()); //Instructor Name$ ("#lbl_teacherName"). HTML ($ ("#teacherName"). Val ()); //Main content$ ("#lbl_mainContent"). HTML ($ ("#mainContent"). Val ()); }

Second, the problem: The report contains echarts form, direct export, Word does not have echarts

Workaround:

1. Add the following code to Reporttoword (the actual exported div):

2. When exporting, save the echarts as a picture and store it in a fixed folder in your project.

The view code is as follows (if saved successfully, the image address is assigned to SRC):

    //Save charts as a picture    functionSavechartspic () {varPicbase64info = Mychart.getdataurl ();//gets the base64 encoding for the Echarts graph, in PNG format. $.ajax ({URL:"/reportforms/export", data: {base64info:picbase64info, FileType:' PNG '}, type:"Post", Async:false, DataType:"JSON", Success:function(data) {//If successful, record the address of the picture                if(Data.code = = 1) {                    $(' #img_Charts '). attr (' src '), Data.imgurl); }                    //If it fails, the popup prompts                Else{alert (data.                Message); }            },        })    }

3.Controller Code:

1         /// <summary>2         ///Save Picture3         /// </summary>4         /// <param name= "Base64info" ></param>5         /// <param name= "FileType" >type of picture saved</param>6         /// <returns></returns>        7 [HttpPost]8          PublicActionResult Export (stringBase64info,stringFileType)9         {TenResult result =NewResult (); One             Try A             { -                 string[] arr = Base64info.split (New string[] {"Base64,"}, stringsplitoptions.removeemptyentries); -                 byte[] ByteArray = convert.frombase64string (arr[1]); the                 stringPath = AppDomain.CurrentDomain.BaseDirectory +Chartspath; -                 if(!directory.exists (path)) -                 { - directory.createdirectory (path); +                 } -                 //ensure the uniqueness of the picture name +Guid Chartsid =Guid.NewGuid (); A                 stringfilename = Chartsid +"."+FileType; at                 stringSavepath = path +filename; -  -FileStream fs =System.IO.File.Create (savepath); -Fs. Write (ByteArray,0, bytearray.length); - FS. Close (); -  in  -Result.code =1; toResult.message ="Save Picture Success"; +                 //Return relative address -                 //_RSP. Data = Filetools._reportchartspath + filename; the                 //return Absolute Address *Result.imgurl =Savepath; $             }Panax Notoginseng             Catch(Exception ex) -             { theResult.code =-1; +Result.message ="Throw Exception"; A             } the             returnJson (result, jsonrequestbehavior.allowget); +}

Third, problem: exported word does not have a style

Workaround: (1) in the Jquery.wordexport.js file, locate the following code:

(2) Put your style code in double quotes (this is another way to study)

Iv. Source Address

Development tools: VS2015 Community Edition, framework: MVC

Git address: https://github.com/Jasmine1227/ExportToWord.git

Export Word with jquery-word-export (with table, echarts)