vue导出word功能

最新推荐文章于 2024-05-30 22:51:22 发布

mingjuna2010

最新推荐文章于 2024-05-30 22:51:22 发布

阅读量445

点赞数 1

分类专栏：前端 Vue 文章标签： vue.js

原文链接：https://www.jianshu.com/p/b3622d6f8d98

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

一、需要安装的JS依赖

实现此功能需要使用到docxtemplater、jszip-utils、jszip、FileSaver等js文件；

1、docxtemplater

介绍

docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。

参考链接：

https://docxtemplater.readthedocs.io/en/latest/index.html

用到的API

new window.docxtemplater：
创建docxtemplater实例对象，返回一个新的docxtemplater对象
loadZip(zip)：
docxtemplater对象加载zip实例
注意：必须从jszip的2.x版本向该方法传递一个zip实例
setData(Tags):
设置模板变量的值
render()：
此函数用模板变量的值替换所有模板变量
getZip()：
此函数返回代表docxtemplater对象的zip

2、jszip-utils

介绍

jszip-utils是与jszip一起使用的跨浏览器的工具库

参考链接：

https://stuk.github.io/jszip-utils/

用到的API

getBinaryContent()：
读取并获得模板文件的二进制内容

3、jszip

介绍

jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

参考链接：

https://stuk.github.io/jszip/

用到的API

new JSZip()：
创建一个JSZip实例
generate()：
此函数可以生成一个zip文件（不是一个真实的文件，而是在内存中的表示）

4、FileSaver

介绍

FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。

参考链接：

https://www.cnblogs.com/yunser/p/7629399.html
https://www.npmjs.com/package/file-saver

用到的API

saveAs(blob, “1.docx”)：
将目标文件对象保存为目标类型的文件，并命名

二、实现步骤

1、完成word模板

首先，根据需要导出的word文件的要求，先使用word制作出模板，数据使用{变量}
代替。如下图：

注：maintenance_word_template(word模板)

注意：

模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。
因为我在使用的时候，放入.vue文件的同级目录下，发现会读不到模板。

2、写出页面模板

页面代码：

<template>
  <!--  知识库 -->
  <div class="app-container">
    <div class="common-container">
      <div class="customise-table-title">{{tableTitle}}</div>
      <el-row class="filter-container" type="flex" justify="space-between">
        <el-col class="filter-btn-container" :span="6">
          <el-button class="filter-item customise-primary-btn" style="margin-left: 10px;" type="primary" icon="el-icon-download"
            @click="downLoadData" :loading="downLoading">导出word</el-button>
        </el-col>
      </el-row>
      <div class="table-box" v-if="reportData">
        <el-row class="row-item">
          <span>{{reportData.reportTitle}}</span>
        </el-row>
        <el-row class="row-item">
          <el-col :span="4">
            时间：
          </el-col>
          <el-col :span="20">
            <div style="margin-right: 250px;">
               {{reportData.reportTime}}
            </div>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col :span="24">
            系统巡检记录
          </el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row class="row-item">
          <el-col :span="4">
            服务器硬件设备巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemHardware}}
          </el-col>
          <el-col :span="4">
            服务器软件巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemSoftware}}
          </el-col>
          <el-col :span="4">
            安全防护软件巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemSafety}}
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row class="row-item">
          <el-col :span="4">
            存储设备巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemStorage}}
          </el-col>
          <el-col :span="4">
            UPS巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemUps}}
          </el-col>
          <el-col :span="4">
            网络设备巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemNetwork}}
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row class="row-item">
          <el-col :span="4">
            服务进程巡检：
          </el-col>
          <el-col :span="4">
            {{reportData.systemServiceProcess}}
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
        </el-row>
        <!-- 建筑巡检管理 -->
        <el-row class="row-item">
          <el-col :span="24">
            建筑巡检管理
          </el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row class="row-item">
          <el-col :span="4">
            巡检数：
          </el-col>
          <el-col :span="4">
            {{reportData.buildInspection}}
          </el-col>
          <el-col :span="4">
            巡检花费时间：
          </el-col>
          <el-col :span="4">
            {{reportData.buildInspectionSpendTime}}
          </el-col>
          <el-col :span="4">
            巡检正常：
          </el-col>
          <el-col :span="4">
            {{reportData.buildInspectionNormal}}
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row class="row-item">
          <el-col :span="4">
            巡检异常：
          </el-col>
          <el-col :span="4">
            {{reportData.buildInspectionAbnormal}}
          </el-col>
          <el-col :span="4">
          </el-col>
          <el-col :span="4">
          </el-col>
          <el-col :span="4">
          </el-col>
          <el-col :span="4">
          </el-col>
        </el-row>
        <!-- 报修处理管理 -->
        <el-row class="row-item">
          <el-col :span="24">
            报修处理管理
          </el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row class="row-item">
          <el-col :span="4">
            收到报修单数：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealNum}}
          </el-col>
          <el-col :span="4">
            未接单：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealNotReceivedOrder}}
          </el-col>
          <el-col :span="4">
            已接单：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealReceivedOrder}}
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row class="row-item">
          <el-col :span="4">
            维修中：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealUnderRepair}}
          </el-col>
          <el-col :span="4">
            完成待确认：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealConfirmed}}
          </el-col>
          <el-col :span="4">
            维修完成：
          </el-col>
          <el-col :span="4">
            {{reportData.alarmDealComplete}}
          </el-col>
        </el-row>
      </div>
      <div class="table-null" v-else>
        暂无报告
      </div>
    </div>
    <!-- 新增，修改弹窗 -->
  </div>
</template>

页面效果：

在这里插入图片描述
3、script代码

  import Moment from 'moment'
  import JSZip from 'jszip'
  import JSZipUtils from 'jszip-utils';
  import docxtemplater from 'docxtemplater';
  import PizZip from 'pizzip';
  import {
    saveAs
  } from 'file-saver';
      
        form: {
          reportTitle: undefined,
          reportTime: undefined,
          systemHardware: undefined,
          systemSoftware: undefined,
          systemSafety: undefined,
          systemStorage: undefined,
          systemUps: undefined,
          systemNetwork: undefined,
          systemServiceProcess: undefined,
          buildInspection: undefined,
          buildInspectionSpendTime: undefined,
          buildInspectionNormal: undefined,
          buildInspectionAbnormal: undefined,
          alarmDealNum:undefined,
          alarmDealNotReceivedOrder:undefined,
          alarmDealReceivedOrder:undefined,
          alarmDealUnderRepair:undefined,
          alarmDealConfirmed:undefined,
          alarmDealComplete:undefined,
        }  // 请求的数据对form赋值
        
  downLoadData() {
    if (!Boolean(this.form.reportTitle)) {
      this.$message.error('请先查询！')
    } else {
      this.downLoading = true;
      // 读取并获得模板文件的二进制内容
      let _this = this;
      JSZipUtils.getBinaryContent("/word/maintenance_word_template.docx", function(error, content) {
        // maintenance_word_template.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        let zip = new PizZip(content);
        let doc = new docxtemplater().loadZip(zip);
        doc.setData({
          ..._this.form,
        });

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          };
          throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        let title = _this.form.reportTitle + ".docx";
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, title);
        _this.downLoading = false;
      });
    }
  },

4、测试结果

在这里插入图片描述