js实现导出当前页导出excel

客户需求背景:

一些客户由于报表数据量很大,使用分页标签后报表分的页数很多,所以导出excel后会出现很多的sheet页,这样很不方便客户查看,很难找到客户需要的数据,所以客户希望只对

目前正在查看的当前页导出excel。

 

实现思路:

由于这种需求希望只对当面页面的数据导出,所以无法直接使用报表计算的缓存,而换一种思路,如果直接使用js对当前html里面里面的table导出成excel,这样就很容易实现导出当前页的需求了。

 

实现方法:

将html的table导出成excel的javascript的代码如下:

<script language="javascript">

  function excel() {

 

    var curTbl =document.getElementById("report1");

    var oXL = newActiveXObject("Excel.Application");

    var oWB = oXL.Workbooks.Add();

    var oSheet = oWB.ActiveSheet;

    var sel =document.body.createTextRange();

    sel.moveToElementText(curTbl);

    sel.select();

    sel.execCommand("Copy");

    oSheet.Paste();

    oXL.Visible = true;

 

}                                  

</script>

把这段代码加到jsp中,然后在jsp加入如下内容:<input type="button" value="导出当前页" οnclick="excel()">,也就是写了一个按钮,调用上面导出当前页的js函数。

用这张jsp发布报表。

点击上图中的导出当前页按钮,可以看到弹出一个excel,excel的内容为当前页的数据,具体的情况如下图所示:


然后对这个excel进行保存就可以了。

 

这样报表导出当前页的需求就实现了。

要使用原生JS导出Excel文件,可以使用"js-export-excel"组件。首先,你需要在项目中引入该组件。你可以通过在需要使用的地方使用以下代码进行引入: ```javascript const ExportJsonExcel = require("js-export-excel"); ``` 或者使用ES6的import语法进行引入: ```javascript import ExportJsonExcel from "js-export-excel"; ``` 接下来,你需要安装该组件。你可以使用以下命令进行安装: ```bash npm install js-export-excel ``` 或者使用yarn进行安装: ```bash yarn add js-export-excel ``` 安装完成后,你可以使用以下步骤导出Excel文件: 1. 创建一个数组,用于存储你要导出的数据。 2. 根据你的需求,定义Excel文件的表头和数据。 3. 创建一个新的ExportJsonExcel实例,并将表头和数据传递给构造函数。 4. 调用ExportJsonExcel的方法来导出Excel文件。 下面是一个示例代码,演示了如何使用原生JS导出Excel文件: ```javascript // 创建要导出的数据数组 const data = [ [ "姓名", "年龄", "性别" ], [ "张三", 18, "男" ], [ "李四", 20, "女" ], [ "王五", 22, "男" ] ]; // 定义Excel表头和数据 const option = { fileName: "学生信息", // 导出的文件名 datas: [ { sheetData: data, // 数据 sheetName: "sheet1", // 表格名字 sheetFilter: ["姓名", "年龄", "性别"], // 过滤数据项 sheetHeader: ["姓名", "年龄", "性别"] // 表头 } ] }; // 创建ExportJsonExcel实例并导出Excel文件 const toExcel = new ExportJsonExcel(option); toExcel.saveExcel(); ``` 通过以上步骤,你就可以使用原生JS导出Excel文件了。请根据你的实际需求修改数据和表头,以及其他导出选项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值