vue2 导出word和Excel

1.vue 导出word

1.需要安装的依赖（docxtemplater、jszip-utils、jszip、FileSaver）
2.简单介绍
1)docxtemplater
docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。点此处查看官网
2)jszip-utils
jszip-utils是与jszip一起使用的跨浏览器的工具库点击此处查看
3)jszip
jszip是一个用于创建、读取和编辑.zip文件的JavaScript库 点击此处查看
4)FileSaver
FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。点击此处查看
3.安装

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save

-- 安装 jszip-utils
npm install jszip-utils --save 

-- 安装 jszip
npm install jszip --save

-- 安装 FileSaver
npm install file-saver --save

4.生成word模板(根据自己的需要生成对应的word文档，不知道如何生成的可以去docxtemplater的官网进行学习，里面各种类型都有，可以根据自己的需要组织)

我的模板如下：

5.使用
1）在需要使用的页面引入

import FileSaver from 'file-saver'
import docxtemplater from 'docxtemplater'
import JSZip from 'pizzip'
import JSZipUtils from 'jszip-utils'

2）html

  <el-button @click="exportWord" size="mini" type="primary">导出word</el-button>

3）data数据

 countData: [
        { custName: '12栋3单元101房间',
          year: 2020,
          time: '2020年3月25日至2020年2020年3月25日',
          price: 450
        },
        { custName: '12栋3单元101房间',
          year: 2020,
          time: '2020年3月25日至2020年2020年3月25日',
          price: 450
        },
        { custName: '12栋3单元101房间',
          year: 2020,
          time: '2020年3月25日至2020年2020年3月25日',
          price: 450
        }
      ]

4)方法

 // 点击导出word
    exportWord: function() {
      let _this = this
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('./static/input.docx', function(error, content) {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }
        console.log(content)
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content)
        // 创建并加载docxtemplater实例对象
        // eslint-disable-next-line new-cap
        let doc = new docxtemplater().loadZip(zip)
        console.log(doc)
        // 设置模板变量的值
        doc.setData({
          countData: _this.countData
        })

        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'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        FileSaver(out, '物业费催缴单.docx')
      })
    }

以上就可以实现导出word文档，难点就是生成word模板的时候不知道怎么弄，把官网看清楚就好了。其他基本复制代码就能实现

2.vue导出excel

1.安装

npm install --save file-saver
npm install --save xlsx 

2.引入（如果先用word导入，只使用一个就行，避免重复使用）

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

3.使用
1）html

 <el-button @click="exportExcel" size="mini" type="primary">导出excel</el-button>

2. js方法

 // 导出表格
    // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
    exportExcel() {
      var xlsxParam = { raw: true }// 转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'), xlsxParam)
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          // 文档名字(可自行修改)
          '物业欠费表.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },

以上几步便可完成excel下载
参考