htmlページをwordドキュメントに変換

7262 ワード




    
    Title
    
    
    


word

word

word

word

word
11 12 13
21 22 23
31 32 33
41 42 43
51 52 53
htmlToWord($("#content"),"test01"); function htmlToWord(ele,name) { var rules = "table{border-collapse:collapse;margin:0 auto;text-align:center;width: 100%;}table td,table th{border:1px solid #cad9ea;color:#666;height:30px}table thead th{background-color:#F1F1F1;min-width:400px}table tr{background:#fff}", ss = document.styleSheets; for(var i = 0; i < ss.length; ++i) { for(var x = 0; x < ss[i].cssRules.length; ++x) { rules += ss[i].cssRules[x].cssText; } } // clone var clone = ele.clone(); // echarts var charts = clone.find(".chart"); // dom clone.find(".input_div").hide(); // var flag = charts.length; for(var i = 0; i < charts.length; i++) { // echarts var curEchart = echarts.getInstanceByDom(charts[i]); if(curEchart) { // var base = curEchart.getConnectedDataURL(); var img = $('<img style="" src="' + base + '"/>'); $(charts[i]).html(img); flag--; } else { flag--; } } var interval = setInterval(function() { if(!flag) { clearInterval(interval); // word clone.wordExport(name, rules); } }, 200) }

FileSaver.js


ほとんどのcdnで検索できますが、ここではコードを貼りません.

jquery.wordexport.js

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function($) {
        $.fn.wordExport = function(fileName,rule) {
            fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
            var static = {
                mhtml: {
                    top: "Mime-Version: 1.0
Content-Base: " + location.href + "
Content-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"

--NEXT.ITEM-BOUNDARY
Content-Type: text/html; charset=\"utf-8\"
Content-Location: " + location.href + "



_html_", head: "



", body: "_body_" } }; var options = { maxWidth: 624 }; // Clone selected element before manipulating it var markup = $(this).clone(); // Remove hidden elements from the output markup.each(function() { var self = $(this); if (self.is(':hidden')) self.remove(); }); // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length; i++) { // Calculate dimensions of output image var w = Math.min(img[i].width, options.maxWidth); var h = img[i].height * (w / img[i].width); // Create canvas for converting image to data URL var canvas = document.createElement("CANVAS"); canvas.width = w; canvas.height = h; // Draw image to canvas var context = canvas.getContext('2d'); context.drawImage(img[i], 0, 0, w, h); // Get data URL encoding of image var uri = canvas.toDataURL("image/png"); $(img[i]).attr("src", img[i].src); img[i].width = w; img[i].height = h; // Save encoded image to array images[i] = { type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")), encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")), location: $(img[i]).attr("src"), data: uri.substring(uri.indexOf(",") + 1) }; } // Prepare bottom of mhtml file with image data var mhtmlBottom = "
"; for (var i = 0; i < images.length; i++) { mhtmlBottom += "--NEXT.ITEM-BOUNDARY
"; mhtmlBottom += "Content-Location: " + images[i].location + "
"; mhtmlBottom += "Content-Type: " + images[i].type + "
"; mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "

"; mhtmlBottom += images[i].data + "

"; } mhtmlBottom += "--NEXT.ITEM-BOUNDARY--"; //TODO: load css from included stylesheet // styles "", css, styles ; var styles = rule || ""; // Aggregate parts of the file together var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom; // Create a Blob with the file contents var blob = new Blob([fileContent], { type: "application/msword;charset=utf-8" }); saveAs(blob, fileName + ".doc"); }; })(jQuery); } else { if (typeof jQuery === "undefined") { console.error("jQuery Word Export: missing dependency (jQuery)"); } if (typeof saveAs === "undefined") { console.error("jQuery Word Export: missing dependency (FileSaver.js)"); } }