1、原料
html-docx-js https://github.com/evidenceprime/html-docx-js
2、核心代码
// 传入的 contentDocument 最好是克隆对象 下面的操作将对对象进行更改
function htmlToDocx (contentDocument) {
// 获取当前文档中的图片标签 将图片的url地址转为 base64 地址格式 可以保存到 docx 中
var regularImages = contentDocument.querySelectorAll("img");
//获取canvas
var canvas = document.createElement('canvas');
// 对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext('2d');
var index = 0;
[].forEach.call(regularImages, function (imgElement) {
// 图片跨域问题
var img = new Image(), //创建新的图片对象
base64 = '' ; // base64
// 设置跨区标识
img.setAttribute("crossOrigin",'Anonymous');
// 图片添加时间戳 禁止磁盘加载 解决跨域问题 跨域前提 图片服务器返回有跨域标识 Access-Control-Allow-Origin: *
img.src = imgElement.getAttribute("src")+"?t="+new Date().getTime();
// 等待图片加载完毕
img.onload = function(){
//图片加载完，再draw 和 toDataURL
// preparing canvas for drawing
canvas.width = imgElement.width;
canvas.height = imgElement.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img,0,0);
// 如果图片不支持跨域 这里就会失败 可以做提示
base64 = canvas.toDataURL("image/png");
imgElement.setAttribute('src', base64);
index++;
if(index==regularImages.length){
// 当图片全部加载完毕可以执行生成 doc
canvas.remove();
var content = '<!DOCTYPE html>' + elDom.outerHTML;
var converted = htmlDocx.asBlob(content);
saveAs(converted, 'test.docx');
}
};
})
}
htmlToDocx(contentDocument.getElementById("editer"));
3、图片跨域问题
1、 图片服务器返回有跨域标识 Access-Control-Allow-Origin: *
2、图片不能从缓存中加载
var canvas=document.getElementById("canvas"), //获取canvas
ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
img = new Image(),//创建新的图片对象
base64 = '' ;//base64
img.setAttribute("crossOrigin",'Anonymous')
// 禁用缓存加载 crossOrigin Anonymous 才会生效
img.src = 'http://www.xxxx.png?t='+new Date().getTime();
img.onload = function(){
// 图片加载完，再draw 和 toDataURL
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
};
4、资料参考
https://segmentfault.com/q/1010000008648867/a-1020000008651198
https://segmentfault.com/q/1010000017415625?utm_source=sf-similar-question
https://blog.csdn.net/weixin_30668887/article/details/98822699
