Vue之导出xlsx

一、安装插件

npm install xlsx -S

npm install xlsx@0.17.0 file-saver@2.0.5 --save

二、直接导出当前表格数据（配合element-ui使用）

//html
<el-table  id="integration-table" >
    <el-table-column prop="c9331" label="id"></el-table-column>
    <el-table-column prop="c5605" label="姓名"></el-table-column>
    <el-table-column prop="c9351" label="年龄"></el-table-column>
</el-table>


//js
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
    // 定义导出Excel表格事件
    exportExcel () {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector(' #integration-table'))
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        // Blob 对象表示一个不可变、原始数据的类文件对象。
        // Blob 表示的不一定是JavaScript原生格式的数据。
        // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          '用户表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      } return wbout
    },

三、通过数据插入导出（json转excel格式导出）

封装工具类

import fs from 'file-saver'
import * as XLSX from 'xlsx'
 
 
export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx
  json.forEach(item => {
    for (let i in item) {
      if (fields.hasOwnProperty(i)) {
        item[fields[i]] = item[i];
      }
      delete item[i]; //删除原先的对象属性
    }
  })
  let sheetName = filename //excel的文件名称
  let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx')
}
 
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length);
    for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

页面中使用

<template>
  <div id="app">
    <div><el-button type="success" @click="outExcel">导出excel</el-button></div>
    <el-table
    :data="jsonData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="学号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
      <el-table-column
      prop="classes"
      label="学院">
    </el-table-column>
  </el-table>
  </div>
</template>
 
<script>
import {xlsx} from './utils/xlsx'
 
export default {
  data() {
    return {
      jsonData:[{
        id:'1',
        name:'小智',
        age:18,
        classes:'商学院'
        
      },
      {
        id:'2',
        name:'小白',
        age:19,
        classes:'商学院'
        
      },
      {
        id:'3',
        name:'小蓝',
        age:12,
        classes:'商学院'
        
      },
      {
        id:'4',
        name:'小花',
        age:14,
        classes:'商学院'
        
      },
      {
        id:'5',
        name:'小粉',
        age:15,
        classes:'商学院'
        
      },
      {
        id:'6',
        name:'小黄',
        age:16,
        classes:'商学院'
        
      },
      {
        id:'7',
        name:'小红',
        age:17,
        classes:'商学院'
        
      },
      {
        id:'8',
        name:'小黑',
        age:19,
        classes:'商学院'
        
      },
      ],
      listHander:{
        id:'学号',
        name:'姓名',
        age:'年龄',
        classes:'学院'
      }
    }
  },
  methods: {
    outExcel(){
        // this.jsonData是要导出的数据内容（表格里的内容），
        // this.listHander对应要导出内容的表头
        // 学生：指向的是excel文件名
      xlsx(this.jsonData,this.listHander,'学生')
    }
  },
}
</script>
 
<style>
 
</style>