elementui导出数据为xlsx、excel表格

我这里为了同学们好理解，把所有元素都写到一个页面。

1.第一步安装插件

npm install file-saver
npm install xlsx

2.第二步在mian.js中设置全局

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

3.第三步使用

<template><div class="daochu"><el-button @click="o" type="success" round>导出</el-button><el-tableid="ou":data="tableData"style="width: 100%":default-sort="{ prop: 'date', order: 'descending' }"><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column></el-table></div>
</template>
<script>
export default {data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",}],};},methods:{o() {let tables = document.getElementById("ou");let table_book = this.$XLSX.utils.table_to_book(tables);var table_write = this.$XLSX.write(table_book, {bookType: "xlsx",bookSST: true,type: "array",});try {this.$FileSaver.saveAs(new Blob([table_write], { type: "application/octet-stream" }),"sheetjs.xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, table_write);}return table_write;},}
}
</script>

可以看到已经导出

实际工作中导出按钮单独抽离出去做到可以复用才是比较合理的，不懂怎么划分目录结构的可以看我的vue专栏哦!❤也可以通过下面公_号：前端老实人，进群跟小伙伴一起学习哦！

elementui导出数据为xlsx、excel表格相关推荐

vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法
基于vue3+vite的项目实现导出带有样式的excel表格,框架用的是vben,所以表格用的是ant的table组件数据源,如果用原生表格需要用到备注的另外方法. 首先需要下载xlsx.xlsx-s ...
php 导出csv设置列宽度,php数据库导出excel表格数据-php从数据库导出csv格式的Excel表格是，字段本身就......
PHP如何将查询出来的数据导出成excel表格(最好做... $objPHPExcel->getActiveSheet()->getDefaultColumnDimension(A)-&g ...
XLSX实现导出带样式的Excel表格的坑
XLSX导出带样式的Excel表格失败导入XLSX xlsx-style的使用项目的要求,需要导出一个结果到Excel表格中,因为所以,没有用Java的方式去实现,而选择了Vue前端直接导出的方式 ...
Springboot集合POI导出多sheet的Excel表格
这几天一个任务是生成一个Excel表格,因为Easyexcel不能生成复杂的表格,所以老师让我们使用POI来生成. 主要需求: 多个sheet 存储图片单元格合并单元格样式定制表头.标题.数据内 ...
halcon 将数据保存到excel_halcon保存数据到excel表格-怎样把图像里面的数据提取到excel表格里面去？...
mt4如何将自定义数据保存到excel表格这种方式嵌入的,目的就是让你没有办法简单复制粘贴.即使通过OCR之类的软件,由于存在底色.水印等,错误率也相当高,意义不是很大. 怎样把图像里面的数据提取到 ...
POI：从Excel文件中读取数据，向Excel文件中写入数据，将Excel表格中的数据插入数据库，将数据库中的数据添加到Excel表
POI 简介: POI是Apache软件基金会用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能. ...
wps表格保存html,网页中的数据怎么导入excel表格数据-怎么把网页数据导入到wps表格中...
如何采集网页中的表格数据到Excel中 1.打开excel表格 2.打开菜单"数据"->入外部数据"->" Web 查询",在" ...
matlab将数据输出到excel中,matlab数据输出为excel表格-如何把matlab中的数据导到excel表格中...
如何将matlab工作空间的数据导出到excel 1.很简单的用xlswrite函数就可以了.首先打开matlab,输入你的代码 2.找到你要存放文件的位置复制绝对路径(致谢文件名的话就会存放在当前目 ...
Easypoi使用模板导出文档或excel表格详解
Easypoi使用模板导出docx文档或excel表格详解 **doc或docx文档的模板导出** **Excel的模板导出** 话不多说先上依赖 <dependency><grou ...

elementui导出数据为xlsx、excel表格

我这里为了同学们好理解，把所有元素都写到一个页面。

1.第一步安装插件

2.第二步在mian.js中设置全局

3.第三步使用

elementui导出数据为xlsx、excel表格相关推荐

最新文章

热门文章