1.1.0 • Published 4 years ago
ha-export v1.1.0
导出Excel
演示案例:
1.创建一个vue.js项目并启动。
npm install -g @vue/cli @vue/cli-service-global'
npm run dev
2.在template中添加DOM结构。
<!-- 绑定导出事件 -->
<el-button type="primary" icon="el-icon-document" @click="handleDownload">
Export Excel
</el-button
4.在script中定义数据与编写逻辑。
// 引入格式化工具函数
import { parseTime } from 'csdc-export/packages/export/utils'
export default {
data () {
return {
// 导出的数据
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleDownload () {
import('csdc-export/packages/export/index').then(excel => {
console.log(excel)
const tHeader = ['name', 'address', 'date']
const filterVal = ['name', 'address', 'date']
const list = this.tableData
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename,
autoWidth: this.autoWidth,
bookType: this.bookType
})
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}
}
}