BootStrap框架下使用JS在浏览器中将后台返回给前台的数据以Excel文件导出

简介: jsp/html页面的代码如下:

BootStrap框架下使用JS在浏览器中将后台返回给前台的数据以Excel文件导出

jsp/html页面的代码如下:

<div class="tab-pane active" id="yjjqInfo">
<div class="p-sm border no-top-border">
<button type="submit" class="btn btn-warning start export-btn_yjjq lbox-btn">
<i class="glyphicon glyphicon-export" aria-hidden="true"></i>
<span>导出Excel</span>
</button>
<div class="row">
         <div class="col-md-12">
              <table class="table table-bordered text-center table_ellipsis" id="yjjqInfo_table" style="width: 100%">
            </table>
        </div>
 </div>
</div>
</div>

JS代码如下:

 $(".export-btn_yjjq").on("click", function () {
            var index = $(".table_ellipsis").attr('id');
            var tableChild =  $('#' + index);
            shinow.detailExportData(tableChild);
        });
 //详情页导出
    detailExportData: function (flag) {
        // $(options.exportBtnSelector).click(function () {
        var table = flag;
        var footerDiv = $(".fixed-table-footer");
        if (footerDiv.length > 0) {
            var tr = footerDiv.find("tr")[0].outerHTML;
            table.find("tbody").append(tr);
        }
        var tablefooter = table.find("tfoot");
        if (tablefooter.length > 0) {
            table.find("tfoot").remove();
            table.find("tbody").after(tablefooter[0].outerHTML);
        }
        /*console.log(table[0]);*/
        shinow.exprot(table[0]);
        // });
    },

前端js导出只能导出当前页的数据,不支持分页导出,后台的话可以,喜欢的就点个赞吧!!

相关文章
|
29天前
|
JavaScript 前端开发
JS如何处理后台时间
JS如何处理后台时间
|
1月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
95 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
24天前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
32 1
|
6月前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
236 0
|
4月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
36 0
|
4月前
|
前端开发 JavaScript 开发者
Vue.js 与第三方库的神秘融合:Bootstrap、Vuex 等究竟带来何种惊喜?
【8月更文挑战第30天】Vue.js 作为一款流行的前端框架,凭借其强大的功能和易用性深受开发者喜爱。它不仅能独立运作,还能无缝集成各种第三方库,显著提升开发效率。例如,通过 `vue-bootstrap`,我们可以轻松引入 Bootstrap 的响应式组件,快速打造美观的用户界面;借助 Vuex,Vue 提供的状态管理方案,能有效解决复杂应用中的状态共享难题。此外,诸如 `axios` 和 `moment` 等库也能进一步增强 Vue 的功能,使其成为构建高性能前端应用的理想选择。
43 0
|
4月前
|
设计模式 JavaScript 前端开发
Vue.js 与第三方库的奇妙融合,Bootstrap 和 Vuex 究竟能带来何种意想不到的变革?
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和可维护性,还使得Vue应用更加模块化和灵活。
19 0
|
6月前
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
|
6月前
|
前端开发
react框架对Excel文件进行上传和导出
react框架对Excel文件进行上传和导出