element导出excel表格

最新推荐文章于 2024-07-10 16:36:14 发布

小董大咖

最新推荐文章于 2024-07-10 16:36:14 发布

阅读量195

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/ddf__/article/details/127956255

版权

首先下载依赖

npm install --save xlsx

npm install --save file-saver

npm install --save xlsx-style

在你的表单或table表格中添加id

添加导出按钮以及点击事件

<el-button class="region_button" round @click="exportClick">导出</el-button>

写点击事件的方法函数

const exportClick = () => {
  var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(new Blob([wbout], {
      type: 'application/octet-stream'
    }), '兑换表.xlsx')//自定义文件名
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout
};

const handleChange = (file) => {
  console.log(file);
  if (file.status === 'success') {
    console.log(file.response.front_file);

    frt.value = file.response.front_file
  }


}