export-table

安装引用

#安装
npm i export-table -S
#引入
import ExportPlus from 'export-table'

创建导出对象

 new ExportPlus(exportOptions)

参数

名称	类型	必填	描述
exportOptions	Object	否	{title, describe, saveFileName}

exportOptions

名称	类型	必填	描述
title	String	否	表格标题
describe	String	否	表格描述
saveFileName	String	否	保存的文件名称

实列

const ExportTable = new ExportPlus({ title: '表格标题', describe: '查询条件' })

table导出表格

ExportTable.table_xlsx(VueComponent)

参数

名称	类型	必填	描述
VueComponent	VueComponent	是	dom

实列

<div>
  <el-table :cell-style="cellStyle" :span-method="objectSpanMethod"
    ref="el-table"
    :data="tableData"
    style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
      <el-table-column label="配送信息">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column label="地址">
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
    	<el-table-column prop="city" label="市区" width="120"></el-table-column>
    	<el-table-column prop="address" label="地址" width="300"></el-table-column>
      </el-table-column>
    </el-table-column>
    <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
  </el-table>
</div>

<script>
    import ExportPlus from 'export-table'
    const ExportTable = new ExportPlus({ title: '表格标题', describe: '查询条件' })
    ExportTable.table_xlsx(this.$refs['el-table'])
</script>

json导出表格

ExportTable.json_xlsx(tableData, columns, options)

参数

名称	类型	必填	描述
tableData	Array	是	数据
columns	Array	是	表头
options	Object	否	{cellMerge, cellStyle}

options

名称	描述
cellMerge	合并	rowIndex，columnIndex
cellStyle	自定义样式	value

实列

// 数据     
let tableData = [
    {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    },
    {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '1518 弄',
        zip: 200333
    }
]
// 表头信息
let columns = [
    { prop: 'date', title: '日期' },
    {
        title: '配送信息',
        children: [
            { prop: 'name', title: '姓名' },
            {
                title: '地址',
                children: [
                    { prop: 'province', title: '省份' },
                    { prop: 'city', title: '市区' },
                    { prop: 'address', title: '地址' }
                ]
            }
        ]
    },
    { prop: 'zip', title: '邮编' }
]
// 创建导出对象
const ExportTable = new ExportPlus({ title: '表格标题', describe: '查询条件' })
// 导出表格
ExportTable.json_xlsx(tableData, columns)

cellStyle设置单元格样式

• cellStyle({ prop, value })返回值style

function: cellStyle({prop, value}) {
	// 当是id列时设置字体颜色
    if (prop === 'id') {
        return {
            fontColor: 'ff0000'
        }
    } else {
        return {}
    }
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellStyle })

style

• fontSize --字体大小Number
• verticalAlignment --竖直方向对齐方式，可选center,right,left
• horizontalAlignment --横向对齐位置，可选center,right,left
• border --是否显示边框，可选fasle,true
• borderColor --边框颜色CCCCCC
• fontColor --字体颜色000000
• fill --单元格背景FFFFFF

cellFormat格式化单元格数据

• cellFormat({ prop, value })

function: cellFormat({prop, value}) {
	// 当是id列时格式化数据
    if (prop === 'id') {
        value = 'id' + value
    }
	return value
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellFormat })

cellMerge合并表格数据

• cellMerge({rowIndex, columnIndex})

function: cellMerge({rowIndex, columnIndex}) {
	// rowIndex 行标
    // columnIndex 列标
    // 第0列起向下合并两个单元格
    if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1
            }
        }
    } else {
        return {
           rowspan: 1,
           colspan: 1 
        }
    }
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellMerge })