html页面转成word文档

这是一个word测试

这是一个word测试

这是一个word测试

这是一个word测试

这是一个word测试

第一列 第二列 第三列 11 12 13 21 22 23 31 32 33 41 42 43 51 52 53

109
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<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>\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)”);

}