学校网站建设的好处,网站建设登录结构图,中山 网站建设一条龙,老域名做网站在开发时遇到了这样的需求#xff0c;整理之后向大家分享一下#xff0c;欢迎积极讨论与指正哦
因为在实现表格时使用了分页插件#xff0c;在导出时只能导出本页的内容#xff0c;最后选择了这样的方法#xff1a; 正常显示的表格使用分页后的数据
在这里设置了id 而用…在开发时遇到了这样的需求整理之后向大家分享一下欢迎积极讨论与指正哦
因为在实现表格时使用了分页插件在导出时只能导出本页的内容最后选择了这样的方法 正常显示的表格使用分页后的数据
在这里设置了id 而用于导出的表格使用总数据并且将display设置为none不影响页面这样在保证了搜索与排序功能不受影响的同时可以完整的导出所有的数据
接下来是导出部分的实现 npm install xlsx^0.16.0 //这里版本为0.16.0 高于0.18.0需要换别的方法
npm install file-saver
// 导入依赖
import XLSX from xlsx
import FileSaver from file-saver//导出
//绑定点击事件
const exportBtn () {const el document.getElementById(tab);console.log(el);// 文件名const filename 导出.xlsx;const wb XLSX.utils.table_to_book(el, { raw: true });const wbout XLSX.write(wb, { bookType: xlsx, bookSST: true, type: array });try {FileSaver.saveAs(new Blob([wbout], { type: application/octet-stream }), filename);} catch (e) {console.log(e);}return wbout;
};
这样就可以导出啦 希望能为你带来帮助
