Javascript实现导出word - jquery jquery.wordexport.js 实现导出word

Javascript实现导出word - jquery.wordexport.js 实现导出word

 

由于工作需要，将一个页面导出word文档，主要是简历！经过百度搜索之后，没找到结果，无奈之下只能求助Google，意外发现jquery一款插件可以实现这个功能！而且效果还算可以！

 

基本可以实现想要的功能！

首先需要的js文件如下，贴出github地址，大家自由下载！

https://github.com/eligrey/FileSaver.js/

https://github.com/markswindoll/jQuery-Word-Export

首先你要引入jquery 和FileSaver.js

<script src="http://jquery.min.js"></script> <script src="FileSaver.js"></script>

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

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

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

<div id="page-content">

Your content here

</div>

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

<a class="word-export" href="javascript:void(0)"> 导出 </a>

 js代码如下

<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#page-content").wordExport();
});
});
</script>

希望对你有用

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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

 

转载来源：https://www.cnblogs.com/itafter/p/4379988.html