最近遇到一个需求-->报表word下载,网上查了很多资料，发现其实无外乎就两种，一种是无模板html节点直接转word，一种是固定模板填充值的word,恰好我的业务报表是动态的非固定格式的，因此我的处理方式是第一种。
类型一、html无模板转word
框架：vue
插件：jquery + file-saver + html-docx-js
逻辑：通过jquery$('节点')获取需要转为word文档的html节点，借助file-saver提供的saveAs方法和html-docx-js提供的asBlob方法转换我们设置好的html即可
核心代码：
import htmlDocx from "html-docx-js/dist/html-docx";
import { saveAs } from "file-saver";
import $ from "jquery";
function exportWord(dom, fileName) {
setTimeout(() => {
let htmlStr = `
<!DOCTYPE html>
<html lang="en">
<body style="font-family:方正仿宋_GBK;mso-ascii-font-family:'Times New Roman'">
${dom.html()}
</body>
</html>
`;
saveAs( htmlDocx.asBlob(htmlStr, { orientation: "landscape" }), fileName );
}, 200);
}
如果你需要转换的html不涉及图片（包括echarts），那么上面的转换就已经完全可以了，另外fileName的后缀建议使用‘.docx’而不是‘.doc’
如果有图片(包括echarts)需要转换为word，我们需要用线上图片替代本地的图片，这样图片才能完美兼容Microsoft Office Word和WPC Office两个软件 ，如果不替代的话Microsoft Office Word不兼容、WPC Office部分版本不兼容，关于本地图片不兼容的问题，个人猜测是因为base64 不能完美兼容word软件，但是二进制可以做到完美兼容。
线上替代本地图片具体操作逻辑如下：
第一步：通过Jquery方法.clone()复制需要转换为word的html节点 （注意：我们后续的一系列都是操作的此节点）
第二步：获取图片节点，将图片转换为base64上传至服务器 (注意：echarts可直接通过自带的方法.getConnectedDataURL({ type: "png" })获取base64)
第三步：获取图片线上地址
第四步：创建节点<img style="margin:0 auto" width="600" src="'+ 图片的线上地址 +" />（注意：img的src必须是全路径！！！ 所以如果接口返回的地址不是全路径，需要自行拼接为全路径）
第五步：通过jquery方法.html()将第四步创建好的节点去替换之前第二步获取到的图片节点至此图片替换就全部完成了
代码如下：（下面例中图片是echarts，如果是img自行百度如何转换base64哦）
import htmlDocx from "html-docx-js/dist/html-docx";
import { saveAs } from "file-saver";
import $ from "jquery";
function exportWord(dom, fileName) {
setTimeout(async() => {
// 1、复制
let DOM=dom.clone();
// 2、获取echarts节点
const echart = DOM.find(".my-echarts");
for (let i = 0; i < echart.length; i++) {
var curEchart = this.$echarts.getInstanceByDom(echart[i]);
if (curEchart) {
//获取base64
var base = curEchart.getConnectedDataURL({ type: "png" });
//base64转File（这块需不需要转看项目的后端，因为我的后端作了上传接口固定规定，只能传file对象，所以需要base64转file）
var file = this.dataURLtoFile(base, "test.png");
console.log(file);
//上传并获取线上地址
let { data } = await apiUploadFormData(file); //接口上传
console.log(123123, data);
//创建新节点
var _img = $(
'<img style="margin:0 auto" width="600" src="' + data.url + '"/>'
);
//替换
$(echart[i]).html(_img);
}
}
let htmlStr = `
<!DOCTYPE html>
<html lang="en">
<body style="font-family:方正仿宋_GBK;mso-ascii-font-family:'Times New Roman'">
${DOM.html()}
</body>
</html>
`;
saveAs( htmlDocx.asBlob(htmlStr, { orientation: "landscape" }), fileName );
}, 200);
}
//base64转File
function dataURLtoFile(dataurl, fileName) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, { type: mime });
},
//图片上传接口请求处理（在这里不能使用，相信每个小可爱都看得懂这块想表达啥）
import request from '@/utils/request'
export const apiUploadFormData = (file) => {
let formData = new FormData()
formData.append("file", file);
return request.post('图片上传接口地址',formData）
}
以上，Html转word就全部完成了
题外话一：关于word 个性化样式
如果想设置个性化的样式，建议使用jquery方法
.find()查找节点直接添加style属性.attr('style','样式')设置，即找到需要操作的dom元素，dom添加行内样式即可，注意：添加行内样式时，需要注意代码执行顺序，避免有些行内样式被覆盖
// dom是需要转换为word的html节点
dom.find('.title').attr('style','font-weight: bold;margin: 10px 0;text-align:center')
题外话二：关于word table样式（按需取用）
我使用的ui库是element，然后我的表格是基于el-table二次封装好的组件，它在被转换成js原生table表格后，不仅样式很丑，而且thead和tbody还被识别成了2个表格，虽然视觉上不影响，但是还是存在thead和tbody单元格无法对齐的现象
表格说明：我的表格全是后端返回表头和表格数据的动态表格
解决方法：复制原thead内容，插入到tbody成为tbody第一行，然后删除thead
//处理所有表格
dom.find(".my-global-table").each((key, value) => {
//处理单个表格
//1、获取表格thead内容
let thArr = [];
dom
.find(`.my-global-table:eq(${key}) th div.cell`)
.each((_key, value) => {
let m = value.innerHTML;
let str = `<td><div class="cell">${m}</div></td>`;
thArr.push(str);
});
let thStr = `<tr>${thArr.join("")}</tr>`;
//2、插入新表头
if(thArr.length!==0){
$(thStr).insertBefore(
dom.find(`.my-global-table:eq(${key}) tr:eq(1)`)
);
}
//3、删除旧表头
dom
.find(`.my-global-table:eq(${key}) .el-table__header-wrapper`)
.remove();
//4、如果表格本身有表头但是无数据，我们需要重新添加表头回去
let Length = dom.find(`.my-global-table:eq(${key}) tr`).length;
if (Length == 0 && thArr.length!==0) {
dom
.find(`.my-global-table:eq(${key}) tbody`)
.html(`<tbody>${thStr}</tbody>`);
}
});
console.log(8888, dom);
//统一设置所有表格样式
dom
.find(".the-text-table .my-global-table")
.attr("style", "text-align:center;margin:0 auto;width:80%"); //表格
dom
.find(".my-global-table tr")
.attr(
"style",
"height:44px;vertical-align:middle;padding-left:4px;width:80%"
); //表格
