手机版

vue元素表格导出为超过文件

时间:2021-08-19 来源:互联网 编辑:宝哥软件园 浏览:

本文实例为大家分享了某视频剪辑软件元素表格导出为超过文件的具体代码,供大家参考,具体内容如下

安装这三个依赖

npminstallxlsxfile-saver-S

npminstallscript-loader-S-D

组件代码

模板按钮类型=' primary ' @单击='exportExcel '导出文件/El-button El-table : data=' table data ' style=' width : 100% ' id=' out-table ' El-table-column prop=' date ' label='日期宽度=' 180 '/El-table-column El-table-column prop=' name ' label='姓名宽度=' 180 '/El-table-column El-table-column prop=' address ' label='地址/El-表-列/El-表/div/模板脚本/引入安装的依赖从"文件保护程序"导入文件保存程序从“xlsx”导入文件格式导出默认值{ name: ' demo5,data(){ return { tableData:[{ date : ' 2016-05-02 ',name: '王小虎,地址: '上海市普陀区金沙江路1518 弄},{ date: '2016-05-04 ',name: '王小虎,地址: '上海市普陀区金沙江路1517 弄},{ date: '2016-05-01 ',name: '王小虎,地址: '上海市普陀区金沙江路1519 弄},{ date: '2016-05-03 ',name: '王小虎,地址: '上海市普陀区金沙江路1516 弄}] } },方法: {//XLSX。uitls。table _ to _ book(放入的是桌子的数字正射影像图节点),sheetjs.xlsx即为导出表格的名字,可修改!导出excel(){ var WB=xlsx。utils。表到书(文档。query selector(' # out-table '))var wbout=xlsx。write(WB,{ bookType: 'xlsx ',bookSST: true,type: 'array' })尝试{文件保存程序。saveas(新Blob([wbout],{ type : ' application/octet-stream ' }),' sheet js . xlsx ')} catch==' undefined ')console . log(e,wbout) } return wbout },}/脚本样式作用域。El-table { margin-top :30 px;}/样式以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:vue元素表格导出为超过文件是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。