1.0.0 • Published 3 years ago

dzm-exdownload1 v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

DZMFullPage

可用于做Web网页分段页面动态添加展示动画,兼容了IE9及以上版本

效果参考 GitHub:DZMExcelDownload

通过 npm 引入

npm i dzm-download-excel

然后在 main.js 中进行导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { EXDownloadManager } from 'dzm-exdownload'
Vue.prototype.$exdownload = EXDownloadManager

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue 文件中使用

<script>

export default {
  mounted () {
    // 服务器获取到的数据源
    const dataSource = [
    {
      id: 1,
      name: 'dzm',
      // (可选)如果列表数据有子列表数据,也是支持的
      children: [
        {
          id: 4,
          name: 'dzm4',
          children: [
            {
              id: 6,
              name: 'dzm6'
            },
            {
              id: 7,
              name: 'dzm7'
            }
          ]
        },
        {
          id: 5,
          name: 'dzm5'
        }
      ]
    },
    {
      id: 2,
      name: 'xyq'
    },
    {
      id: 3,
      name: 'djy'
    }
    ]
    // 将要保存的 sheets 数据源
    const sheets = [
        {
          // 单个 sheet 名字
          name: '用户数据',
          // 单个 sheet 数据源
          data: dataSource
        }
    ]
    // Excel 每一列的列头名字跟字段key,通过列名展示,列key获取数据源中对应的值作为单元格的值
    const columns = [
        {
          name: '用户ID',
          field: 'id'
        },
        {
          name: '用户名称',
          field: 'name'
        }
    ]
    // 开始下载
    // EXDownloadManager (sheets, columns, beforeChange, fileName, fileSuffix)
    // this.$exdownload(sheets, columns)
    this.$exdownload(sheets, columns, function (data, field) {
        // 判断处理单个字段
        console.log(data, field);
        // 返回处理好的值
        return data
    })
  }
}
</script>