vue 将列表中的数据导出为word文件

需求：
点击“导出”按钮，将列表中的数据导出为word文件。

1.安装依赖。

需要的插件：docxtemplater、jszip-utils、jszip、FileSaver。

cnpm install docxtemplater pizzip --save-dev
cnpm install jszip-utils --save 
cnpm install jszip --save
cnpm install file-saver --save

2.引入依赖包。

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

3.添加word模板。

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

（2）将word模板添加到项目中。
注意：
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。

4.在组件中使用。

<div>
   <el-table :data="dataList" stripe fit v-loading="tableLoading">
       <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
       <el-table-column prop="enterpriseName" label="企业名称" align="center" ></el-table-column>
       <el-table-column prop="year" label="年份" align="center"></el-table-column>
       <el-table-column prop="quarter" label="季度" align="center"></el-table-column>
       <el-table-column prop="validUntil" label="有效期至" align="center"></el-table-column>
       <el-table-column prop="totalContract" label="签订合同额" align="center"></el-table-column>
       <el-table-column prop="lastContract" label="上年结转合同额" align="center"></el-table-column>
       <el-table-column prop="currentContract" label="本年新签合同额" align="center"></el-table-column>

       <!-- 操作区 -->
       <el-table-column label="操作" align="center">
           <template slot-scope="scope">
               <el-button type="text" size="small" @click="detailData(scope.row)">详情</el-button>
               <el-button type="text" size="small" @click="exportWord(scope.row)">导出</el-button>
           </template>
       </el-table-column>
   </el-table>

   <!-- 页码区 -->
   <div class="block">
       <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="page.curPage"
           :page-sizes="[10, 15, 20, 30]"
           :page-size="page.size"
           layout="total, sizes, prev, pager, next, jumper"
           :total="page.total">
       </el-pagination>
   </div>
</div>

js方法：

// 导出word
exportWord: function(row) {
    let that = this;
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent("../../static/file/outputValue.docx", function(error, content) {
        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
            throw error;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        let docxData = {
        	enterpriseName: row.enterpriseName,
            year: row.year,
            quarter: row.quarter,
            validUntil: row.validUntil,
            totalContract: row.totalContract,
            lastContract: row.lastContract,
            currentContract: row.currentContract,
            totalProject: row.totalProject,
            oneselfProject: row.oneselfProject,
            subpackageProject: row.subpackageProject,
            otherProject: row.otherProject,
            totalValue: row.totalValue,
            distributionValue: row.distributionValue,
            decorateValue: row.decorateValue,
            otherProvincesValue: row.otherProvincesValue,
            buildingValue: row.buildingValue,
            installationValue: row.installationValue,
            otherValue: row.otherValue,
            completedValue: row.completedValue,
            constructionArea: row.constructionArea,
            newArea: row.newArea,
            steel: row.steel,
            wood: row.wood,
            cement: row.cement,
            sheetGlass: row.sheetGlass
        };
        doc.setData({
            ...docxData
        });

        try {
            // 用模板变量的值替换所有模板变量
            doc.render();
        } catch (error) {
            // 抛出异常
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "建筑业企业生产经营情况.docx");
    });
}

最终实现：