jQuery实现word导出功能

最近在工作中应客户要求将前端table表格导出到word文档里（好想吐槽）
表格导入到Excel里不是更方便…（无语ing）废话不多说

首先实现导出功能想到的就是jQuery

要用到jQuery里面的几个Js文件

//必要的js文件
<script src="FileSaver.js"></script>
//导出为docx文件 word2007也可以打开
<script src="html-docx.js"></script>
//导出为doc文件 不支持旧版本的word
<script src="wordexport.js"></script>
//导出为doc文件需要引入jQuery  docx则不需要
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

这个链接是几个JS源文件的压缩包需要的小伙伴自行下载
提取码是 Mont
https://pan.baidu.com/s/1bb7pulbgUp9Lv7D5jxFX4w

一.导出为Docx

1.引用插件html-docx.js

<script src="html-docx.js"></script>

2.编写完整html内容文档

var content = ''+ 要导出的html信息 +''

content要导出的html信息，建议在服务端自己拼接完成。

若是想从页面抓取html信息，可以用下面的方法（不建议，客户端消耗高）

<div id="content">
    要导出的html信息
    <img src="xxx">
</div>

 var contenta = document.getElementById('content').innerHTML
 var content = '' + contenta + ''

图片格式转换为base64

function convertImagesToBase64 (content) {
      var regularImages = content.querySelectorAll("img");
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      [].forEach.call(regularImages, function (imgElement) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = imgElement.width;
        canvas.height = imgElement.height;
 
        ctx.drawImage(imgElement, 0, 0);
        var dataURL = canvas.toDataURL();
        imgElement.setAttribute('src', dataURL);
      })
      canvas.remove();
    }
var content = document.getElementById('#content');
convertImagesToBase64(content);//转换图片为base64
 
content = ''+ content +''

3.导出word

 var converted = htmlDocx.asBlob(content);
 saveAs(converted, 'test.docx');// 用 FielSaver.js里的保存方法 进行输出

附上效果图
doc和docx两种在样式上有一定的差异

二.导出为doc

要用到这个 wordjquery.js文件
html文档和上述相同

1.引入jquery和wordexport

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="wordexport.js"></script>

2.导出

$(元素).wordExport(文件名,isBase64)

isBase64 用于标识 元素中的图片是否都处理为了base64，默认为false,内置处理方法，可以去看看

附上效果图
doc和docx两种在样式上有一定的差异

注意
无论是html-docx.js还是 wordexport.js 都需要将html中的图片转为base64形式

而且，图片的宽度高，最好自己设置下，否则下载的图片会以图片原始大小下载，就会出现图片在文档超出情况
处理图片的方法就在此不做多解释了，大家自行搜索一下吧！

但是我将表格导出到word里却发现样式没有导出，这里挺头疼的还没找到解决办法就暂且把Style样式写在了标签里

<table class="layui-table" style="color: red;background-color: black;">

这样导出的时候可以导出少部分样式但是还达不到满意的效果
有小伙伴有好方法请推给楼主万分感谢