【JavaScript】利用jquery.wordexport.js实现纯JS生成导出word文件保存

admin

2023年5月16日 0:43 本文热度 596

上面文件中已经包含本功能中要用到的三个JS文件，首先你要引入jquery 和FileSaver.js：

1 2	`<script src="../js/jquery-2.1.1.min.js"></script>` `<script src="../js/FileSaver.js"></script>`

一定先引入以上两文件之后，再引入jquery.wordexport.js：

<script src="../js/jquery.wordexport.js"></script>

需要用到处的内容这样命名，id名字自己随意，注意对应下方的jquery调用：

<div id="html2pdf_id">Your content here</div>

使用方法，创建一个导出Word的按钮，例如：

1	`<input type="button" value="导出Word" onclick="htm2doc();" />`

js代码如下：

<script type="text/javascript">
function html2doc() {
	$("#html2pdf_id").wordExport($("#notice_title").val()); //notice_title为储存了导出Word文件名称的input控件ID
}
</script>

应用过程中可能会遇到报错，主要是因为图片导致的！

我是这样解决的，大概在36行左右，找到如下代码，按照下方演示注释，添加相应代码之后，应该就可以了：

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 img_id = "#"+img[i].id;

$('<canvas>').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id);

//-------------------------------------------------

//下面是注释的代码

// 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)

// };

}

该文章在 2023/5/16 0:43:52 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。