前端根据模板生成定制world文件

前端根据模板生成定制world文件

1. 提供一个模板 doc

2. 前端读取并对表格数据填充

思路：

1. 读取模板doc
2. 填充数据
3. 生成新的doc，并下载

代码：

  <template>
  <div>
    <button @click="handleExport">导出</button>
    <table>
       <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
       </thead>
       <tbody>
         <tr v-for="item in tableData" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
         </tr>
       </tbody>
    </table>
  </div>
</template>

<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

export default {
  name: 'HelloWorld',
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "cc",
          age: "22",
          gender: "man",
        },
        {
          id: 2,
          name: "marry",
          age: "25",
          gender: "woman",
        }
      ]
    }
  },
  methods: {
    handleExport() {
      console.log(this.tableData)
      const data = {
        titleDate: "2021-07-05 00:00 至 2022-07-18 00:00",
        titleName: "测试表格",
        table: this.tableData
      }
      this.exportDocx("Word/template.doc", data, "测试表格.doc");
    },
    exportDocx(tempDocxPath, data, fileName) {
      JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) {
        if (error) {
          throw error;
        }
        console.log("content==", content)
        let zip = new PizZip(content);
        let doc = new docxtemplater().loadZip(zip);
        console.log("doc===", doc)
        doc.setData(data);
        try {
          doc.render();
        } catch (error) {
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          };
          console.log({
            error: e
          });
          throw error;
        }
        let out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        console.log("out==", out)
        saveAs(out, fileName);
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top:10px;
}
table td,
table th {
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #ccc;
}
</style>

3. 生成doc并下载

根据数据导出的的表格如下图：

4. 注意：

1. 模板一定要按格式写：比如 < /table> 的结束标签不能忘

5. 测试代码地址

github.com/pluscai/fe-…

End.