VUE数据导出word文件

一、需要安装的依赖

1、docxtemplater

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

安装方法：cnpm i docxtemplater

2、FileSaver

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

安装方法：cnpm i file-saver

3、jszip

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

安装方法：cnpm i jszip@^2.6.1                       

注意：// 创建一个JSZip实例，内容为模板的内容
    let zip = new JSZip(content);

此方法适用于3.0以下版本，3.0以上版本会报错，不让传参数了

4、jszip-utils

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

安装方法：cnpm i jszip-utils

二、创建word模版

介绍：根据自己的业务需求创建需要导出的word模版，变量数据使用{变量名}代替，表格内容数据需要使用{#参数名}开始{/参数名}结尾，具体如下图：

 

表格的渲染：以｛#数组名称｝开始  ； 以｛/数组名称｝结束     如上图所示

注意点：1.模板文件使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。

            2.文件须以docx结尾。

 

 三、html代码编写

<div class="download” @click="downloadprice">下载价格表</div>

四、script代码编写

 

import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils'

data() {
  return {
      // 导出价格表全部信息
    exportPriceObj: {
      actualPayFee: '179.55',
      deliveryFee: '0.00',
      discountActualFee: '179.55',
      discountFee: '9.45',
      discountRatio: '95',
      nickName: '张三',
      retailTotalFee: '0.00',
      totalFee: '189.00',
    },
    // 导出价格表商品信息
    exportPriceListOne: [
      {
        productColor: '白色',
        productName: '0909测试商品',
        productNo: 1,
        productSize: '4XL（58）',
        productSkuId: 'teydnkn',
        sellingPrice: '10.00',
      },
      {
        productColor: '白色',
        productName: '1955测试商品',
        productNo: 2,
        productSize: 'XL（52）',
        productSkuId: 'teydoja',
        sellingPrice: '40.00',
      }
    ],
  }
}

// 下载价格表
downloadprice() {
  let _this = this;
  // 判断有无附加商品来选择word模版
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent('pricenew.docx', function(error, content) {
    console.log('-----', content);
    // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
    // 抛出异常
    if (error) {
      throw error;
    }
    // 创建一个JSZip实例，内容为模板的内容
    let zip = new JSZip(content);
    console.log('+++++', zip);
    // 创建并加载docxtemplater实例对象
    let doc = new Docxtemplater();
    console.log('/////', doc);
    doc.loadZip(zip);
    console.log('=====', doc);
    // 设置模板变量的值
    doc.setData({
      // 导出价格表全部信息
      ..._this.exportPriceObj,
      // 导出价格表商品信息
      tableone: _this.exportPriceListOne,
    });
    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, _this.exportPriceObj.nickName + '的价格表.docx');
  });
},

 

附：

word文件使用for循环，查了资料，但是由于项目后边没用上，所以没试过，自己验证 ♥♥♥♥♥

{#myForData}

   {time}:{content}

{/myForData}