1 Star 0 Fork 50

Admin / avue-doc

forked from smallwei / avue-doc 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
export.md 3.10 KB
一键复制 编辑 原始数据 按行查看 历史
smallwei 提交于 2021-04-20 09:03 . v2.8.8
<script> export default { data(){ return {} }, methods: { handleExcel() { let opt = { title: '文档标题', column: [{ label: '标题', prop: 'title' }], data: [{ title: "测试数据1" }, { title: "测试数据2" }] } this.$Export.excel({ title: opt.title || new Date().getTime(), columns: opt.column, data: opt.data }); }, handleExcel1() { let opt = { title: '文档标题', column: [{ label:'复杂表头', prop:'header', children:[ { label: '标题1', prop: 'title1' },{ label: '标题2', prop: 'title2' } ] }], data: [{ title1: "测试数据1", title2: "测试数据2" }, { title1: "测试数据2", title2: "测试数据2" }] } this.$Export.excel({ title: opt.title || new Date().getTime(), columns: opt.column, data: opt.data }); } } } </script>

Export excel导出

:::tip 2.0.3+ ::::

<!-- 导入需要的包 (一定要放到index.html中的head标签里)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>

:::demo

<div style="width:400px">
 <el-button type="primary" @click="handleExcel">下载 excel</el-button>
 <el-button type="success" @click="handleExcel1">下载 复杂表头excel</el-button>
</div>
<script>
export default {
  data(){
    return {}
  },
  methods: {
     handleExcel() {
      let opt = {
        title: '文档标题',
        column: [{
          label: '标题',
          prop: 'title'
        }],
        data: [{
          title: "测试数据1"
        }, {
          title: "测试数据2"
        }]
      }
      this.$Export.excel({
        title: opt.title || new Date().getTime(),
        columns: opt.column,
        data: opt.data
      });
    },
    handleExcel1() {
      let opt = {
        title: '文档标题',
        column: [{
          label:'复杂表头',
          prop:'header',
          children:[
            {
              label: '标题1',
              prop: 'title1'
            },{
              label: '标题2',
              prop: 'title2'
            }
          ]
        }],
        data: [{
          title1: "测试数据1",
          title2: "测试数据2"
        }, {
          title1: "测试数据2",
          title2: "测试数据2"
        }]
      }
      this.$Export.excel({
        title: opt.title || new Date().getTime(),
        columns: opt.column,
        data: opt.data
      });
    }
  }
}
</script>

:::

Variables

参数 说明 类型 可选值 默认值
title 水印的文字 String - new Date().getTime()
column 数据列 Array - -
data 数据 Array - -
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/isni_admin/avue-doc.git
git@gitee.com:isni_admin/avue-doc.git
isni_admin
avue-doc
avue-doc
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891