JS word下载（含两种方式:html转word、模板转word）

最近遇到一个需求-->报表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 = `
                               
                               
                               
                                   ${dom.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的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 = $(
                               ''
                             );  
                            //替换
                           $(echart[i]).html(_img);
                       }
                  }
                    let htmlStr = `
                              
                              
                              
                                  ${DOM.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单元格无法对齐的现象

table.png

表格说明：我的表格全是后端返回表头和表格数据的动态表格
解决方法：复制原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 = `
${m}
`;
              thArr.push(str);
            });
          let thStr = `${thArr.join("")}`;
          //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(`${thStr}`);
          }
        });
        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%"
          ); //表格

类型二、固定模板转word

我没有实际操作过，不过看下面两篇参考应该足以解决这个需求吧
参考一
参考二