导出对象:
在这里插入图片描述
效果图:
在这里插入图片描述
1 安装依赖

npm install docxtemplater pizzip  --save
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save

2 定义模板
在这里插入图片描述
3 vue cli 3.0 模板放置位置
在这里插入图片描述
4 导出效果图
在这里插入图片描述

5 代码

<template>
  <div style="margin:50px">
    <el-table :data="course" border style="width: 80%">
      <el-table-column prop="faculty" label="院系"> </el-table-column>
      <el-table-column prop="major" label="专业"> </el-table-column>
      <el-table-column prop="courseName" label="课程名称"> </el-table-column>
      <el-table-column prop="grade" label="年级"> </el-table-column>
      <el-table-column prop="term" label="学期"> </el-table-column>
      <el-table-column prop="credit" label="学分">
        <template slot-scope="scope"> {{ scope.row.credit }}学分 </template>
      </el-table-column>
      <el-table-column prop="period" label="学时">
        <template slot-scope="scope"> {{ scope.row.period }}学时 </template>
      </el-table-column>
      <el-table-column prop="shape" label="考察形式"> </el-table-column>
    </el-table>
    <el-button @click.stop="exportWord" type="primary" size="small"
      >导出</el-button
    >
  </div>
</template>
<script>
import JSZipUtils from "jszip-utils";
import JSZip from "pizzip";
import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      form: {
        title: "课程学分表",
      },
      course: [
        {
          faculty: "数据科学学院",
          major: "计算机科学与技术",
          courseName: "数据结构",
          grade: "大二",
          term: "第一学期",
          credit: "4",
          period: "56",
          shape: "闭卷",
        },
        {
          faculty: "数据科学学院",
          major: "计算机科学与技术",
          courseName: "大学英语2",
          grade: "大二",
          term: "第一学期",
          credit: "4",
          period: "56",
          shape: "闭卷",
        },
      ],
    };
  },

  methods: {
    exportWord() {
      let course = this.course;
      let form = this.form;
      JSZipUtils.getBinaryContent("export.docx", function (error, content) {
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例,内容为模板的内容
        let zip = new JSZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          ...form,
          course,
        });
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties,
          // }
          this.$message.error("导出报表失败");
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件,并命名
        saveAs(out, "测试.docx");
      });
    },
  },
};
</script>
Logo

前往低代码交流专区

更多推荐