桌面word文档变成了html,html页面转成word文档-CSDN博客

Title

这是一个word测试

第一列第二列第三列

111213212223313233414243515253

htmlToWord($("#content"),"test01");

function htmlToWord(ele,name) {

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 = $(' '%20+%20base%20+%20' ');

$(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\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n\n\n_html_",

head: "

\n\n\n\n",

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 = "\n";

for (var i = 0; i < images.length; i++) {

mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";

mhtmlBottom += "Content-Location: " + images[i].location + "\n";

mhtmlBottom += "Content-Type: " + images[i].type + "\n";

mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";

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

}

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)");

}

标签：jQuery,word,img,uri,images,html,文档,var,mhtmlBottom

来源： https://blog.csdn.net/qq_42031498/article/details/98193809