最近在工作中应客户要求将前端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 = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>'+ 要导出的html信息 +'</html>'
content
要导出的html
信息,建议在服务端自己拼接完成。
若是想从页面抓取html
信息,可以用下面的方法(不建议,客户端消耗高)
<div id="content">
要导出的html信息
<img src="xxx">
</div>
var contenta = document.getElementById('content').innerHTML
var content = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>' + contenta + '</html>'
图片格式转换为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 = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>'+ content +'</html>'
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;">
这样导出的时候可以导出少部分样式但是还达不到满意的效果
有小伙伴有好方法请推给楼主万分感谢