1.1.0 • Published 4 years ago

ha-export v1.1.0

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

导出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]
        }
      }))
    }
  }
}