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 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值