elementui导入excel功能,element table导出为excel

　　本文主要介绍了elementui导出数据为xlsx、excel表格，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　最近学习某视频剪辑软件项目，遇见elementui导出数据为xlsx、excel表格，今天就介绍给大家，也给自己留个笔记，方便查询

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

　　1.第一步安装插件

　　新公共管理安装文件保护程序

　　新公共管理安装文件格式

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

　　//vue中导出超过表格模板

　　从"文件保存器"导入文件保存器

　　从" xlsx "导入文件格式

　　vue。原型。$ file saver=文件保护程序；//设置全局

　　Vue.prototype. $ XLSX=XLSX//设置全局

　　3.第三步使用

　　模板

　　"倒掉"

　　El-button @ click= o type= success 回合导出/el-button

　　埃尔表

　　id=ou

　　:data=tableData

　　style=宽度：100%

　　:default-sort={ prop: date ，order: descending }

　　El-table-column prop= date label=日期可排序宽度=180

　　/El-表格-列

　　El-table-column prop= name label=姓名可排序宽度=180

　　/El-表格-列

　　埃尔-表格-列属性=地址标签=地址：formatter=formatter

　　/El-表格-列

　　/el-table

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　表格数据：[

　　{

　　日期："2016年5月2日",

　　名称： 王小虎，

　　地址： 上海市普陀区金沙江路1518 弄，

　　},

　　{

　　日期："2016年5月四日",

　　名称： 王小虎，

　　地址： 上海市普陀区金沙江路1517 弄，

　　}

　　],

　　};

　　},

　　方法：{

　　o() {

　　让表格=文档。getelementbyid( ou )；

　　让table_book=this .$XLSX.utils.table_to_book(表格);

　　var table_write=this .$XLSX.write(table_book，{

　　书籍类型： xlsx ，

　　书商：没错，

　　类型："数组",

　　});

　　尝试{

　　这个. FileSaver.saveAs(

　　新Blob([table_write]，{ type:应用程序/八位字节流 })，

　　 sheetjs.xlsx

　　);

　　} catch (e) {

　　如果(控制台类型！==undefined) console.log(e，table _ write)；

　　}

　　返回表_写

　　},

　　}

　　}

　　/脚本

　　可以看到已经导出

　　实际工作中导出按钮单独抽离出去做到可以复用才是比较合理的

　　到此这篇关于elementui导出数据为xlsx、excel表格的文章就介绍到这了，更多相关elementui导出数据为xlsx、excel表格内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。