前端生成文档

需要插件file-saver、html-docx-js

yarn add file-saver --save
yarn add html-docx-js --save

生成方式

主要通过将html代码转化成文档

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div onclick="gogogo()">下载</div>
  </body>
  <script src="./node_modules/file-saver/dist/FileSaver.min.js"></script>
  <script src="./node_modules/html-docx-js/dist/html-docx.js"></script>
  <script src="./htmlTemp.js"></script>
  <script>
    function gogogo() {
      var domString = htmlTemp({});
      var converted = htmlDocx.asBlob(domString);
      saveAs(converted, "1111.docx");
    }
  </script>
</html>
/*
  注意事项:
    1. 经过反复尝试, 设置div高度在docx文件中无效
      解决设置上下垂直距离方法： <div class="item-kong">&nbsp;&nbsp;</div>
*/
// 打印word的html模板
function htmlTemp({ d = "测试" }) {

  const htmlTemp = `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <style>
        .head-title{
          text-align: center;
          font-size: 20px;
        }
        .base-title{
          font-size: 20px;
          font-weight: 800;
        }
        .base-items .item{
          font-size: 14px;
          height: 20px;
          line-height:20px;
        }
        .set-color-one {
          color:#e63f32;
        }
        .set-color-two{
          color:#fc011a;
        }
        .err-msg{
          font-size: 28px;
          font-weight: 800;
          color:red;
        }
      </style>
    </head>
    <body>
      <div class="head-title">自评得分</div>
      <div class="part-one">
        <div class="base-title">一、基本信息</div>
        <div>&nbsp;&nbsp;</div>
        <div class="base-items">
          <div class="item">计划名称：</div>
          <div class="item">自评组：${d}</div>
          <div class="item">填报人：${d}</div>
          <div class="item">实评时间：${d}</div>
          <div class="item">自评组长：${d}</div>
          <div class="item">自评组员：${d}</div>
        </div>
        <div>&nbsp;&nbsp;</div>
      </div>

      <div class="part-two">
        <div class="base-title">二、${d}考评项目</div>
        <div>&nbsp;&nbsp;</div>
        <div class="base-items">
          ${d}
        </div>
        <div>&nbsp;&nbsp;</div>
      </div>

      <div class="part-three">
        <div class="base-title">三、自评得分统计</div>
        <div>&nbsp;&nbsp;</div>
        <div class="base-items">
          <div>总扣分项(不计小项)：${d}</div>
          <div>总目标分：${d}</div>
          <div>总扣分值：${d}</div>
          <div>总实得分：${d}</div>
          <div>总得分率：${d}</div>
        </div>
        <div>&nbsp;&nbsp;</div>
      </div>

      <div class="part-four">
        <div class="base-title">四、主要问题及整改建议（凡扣分项均应有问题与整改建议）</div>
        <div>&nbsp;&nbsp;</div>
        <div class="base-items">
          <div>${d}</div>
        </div>
        <div>&nbsp;&nbsp;</div>
      </div>

    </body>
  </html>`;
  return htmlTemp;
}