jQuery实现word导出功能
最近在⼯作中应客户要求将前端table表格导出到word⽂档⾥（好想吐槽）
表格导⼊到Excel⾥不是更⽅便…（⽆语ing）废话不多说
⾸先实现导出功能想到的就是jQuery
要⽤到jQuery⾥⾯的⼏个Js⽂件
//必要的js⽂件
<script src="FileSaver.js"></script>
//导出为docx⽂件 word2007也可以打开
c语言指针数组格式<script src="html-docx.js"></script>
//导出为doc⽂件不⽀持旧版本的word
<script src="wordexport.js"></script>
/
/导出为doc⽂件需要引⼊jQuery  docx则不需要
<script src="cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
⼀.导出为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信息，建议在服务端⾃⼰拼接完成。
oracle表数据恢复若是想从页⾯抓取html信息，可以⽤下⾯的⽅法（不建议，客户端消耗⾼）
<div id="content">
要导出的html信息
<img src="xxx">
</div>
var contenta = ElementById('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 = ateElement('canvas');
var ctx = Context('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 = DataURL();
imgElement.setAttribute('src', dataURL);
})
新手指导英文
}
var content = ElementById('#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="cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
<script src="wordexport.js"></script>
2.导出jquery下载文件请求
$(元素).wordExport(⽂件名,isBase64)
isBase64 ⽤于标识 元素中的图⽚是否都处理为了base64，默认为false，内置处理⽅法，可以去看看
附上效果图
doc和docx两种在样式上有⼀定的差异
注意
⽆论是html-docx.js还是 wordexport.js 都需要将html中的图⽚转为base64形式
⽽且，图⽚的宽度⾼，最好⾃⼰设置下，否则下载的图⽚会以图⽚原始⼤⼩下载，就会出现图⽚在⽂档超出情况
powershell禁止运行脚本处理图⽚的⽅法就在此不做多解释了，⼤家⾃⾏搜索⼀下吧！
但是我将表格导出到word⾥却发现样式没有导出，这⾥挺头疼的还没到解决办法就暂且把Style样式写在了标签⾥<table class="layui-table" >
这样导出的时候可以导出少部分样式但是还达不到满意的效果
有⼩伙伴有好⽅法请推给楼主万分感谢

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。