根据输入的起始页数打印和导出相应的内容

最新推荐文章于 2025-08-08 06:02:09 发布
原创 最新推荐文章于 2025-08-08 06:02:09 发布 · 407 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#promise #ajax #oop #bootstrap

本文介绍了一种使用模态框输入页数，通过后台分页实现数据批量打印和导出的方法。利用Ajax递归和Promise，实现了从指定页数获取数据并呈现的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.在模态框中输入需要打印或导出的起始页数，配合后台的分页实现打印和导出相关页数的数据

2.用到ajax递归,promise

好啦，上代码

1，js部分

function Work(){
    // // 导出
	// $(".importTable").click(function(){openimportpagemodal()});
	// // 打印
	// $(".printTable").click(function(){openPageModal()})
	// // 打印模态框确定
	// $("#selectPrintPage .modal-footer .confirm").click(function(){getprintpage(this)});
	// // 导出模态框确定
	// $("#selectImportPage .modal-footer .confirm").click(function(){getprintpage(this,99)});

	// 打开打印的模态框
	function openPageModal() {
		$("#selectPrintPage").find(".input-group").find("input").val("");
		$("#selectPrintPage").modal("show");
	}

	// 打开导出模态框
	function openimportpagemodal(){
		// 清空數據
		$("#selectImportPage").find(".input-group").find("input").val("");
		$("#selectImportPage").modal("show");
	}

	// 根据页数获取数据
	function getprintpage(e, type) {
		// var href = work.showWindowHref();
		var startcount = $(e).parent().prev().find("#startcount").val() - 0;
		var endcount = $(e).parent().prev().find("#endcount").val() - 0;
		// var page = (endcount - startcount) + 1;
		var url = sjData();
		var postData={};
		postData.orderBy = "createTime ASC";
		postData.pageNum = startcount;
		postData.pageSize = 14;
		if (type) {
			// var tablehtml = $("#dayinTable").html();
			queryAllTableData(url, postData, startcount, endcount, type);
		} else {
			queryAllTableData(url, postData, startcount, endcount);
		}

	}

	// 查询表格数据
	function queryAllTableData(url, postData, startcount, endcount, type) {
		function queryData() {
			var ajaxArr = [];
			function recurrenceajax(url, postData) {
				var retDataa = [];
				$.ajax({
					type: "post",
					url: url,
					data: postData,
					async: false,
					success: function (retData) {
						if (retData.code == 0) {
							retDataa = retData.data.result;
							return retDataa;
						}
					},
					error: function (retData) {
						console.log(retData.msg);
					}
				})
				return retDataa;
			}
			for (let i = startcount; i <= endcount; i++) {
				postData.pageNum = i;
				$.each(recurrenceajax(url, postData), function (k, v) {ajaxArr.push(v);})
			}
			return new Promise(function (resolve, reject) {
				resolve(ajaxArr);
			})
		}
		queryData().then(function (ajaxArr) {
			// var href = work.showWindowHref();
			var responsearr = ajaxArr;
			var page =((endcount - startcount) + 1) * postData.pageSize;
			if (responsearr.length <= page && responsearr.length > 0) {
				function createTablee(data,url,num,type){
					var html = `
					<tr>
						<th style="text-align:center;font-size:14px;">序号</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">机构名称</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">所属区域</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">状态</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">联系人</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">联系电话</th>
						<th style="text-align:center;min-width:86px;font-size:14px;">机构地址</th>
						
					</tr>
					`
					for(let i=0;i<data.length;i++){
						html += `
							<tr>
							<td style="text-align:center;font-size:14px;">${i + 1}</td>
							<td style="text-align:center;font-size:14px;">${data[i].orgname}</td>
							<td style="text-align:center;font-size:14px;">${data[i].area}</td>
							<td style="text-align:center;font-size:14px;">${data[i].orgstatus == 1 ? "启用" : "停用"}</td>
							<td style="text-align:center;font-size:14px;">${data[i].orgcontact}</td>
							<td style="text-align:center;font-size:14px;">${data[i].contactphone}</td>
							<td style="text-align:center;font-size:14px;">${data[i].orgaddress}</td>
							
						</tr>
						`
					}
					$("#dayinTable").html(html);
					return new Promise(function(resolve,reject){
						resolve();
					})
				}
				createTablee(responsearr, "", "", 99).then(function (data) {
					/**
					 * type物質為打印，優質為導出
					 */
					if (!type) {
						$("#selectPrintPage").modal("hide");
						bdhtml = $("#dayincontent").html();
						//alert(bdhtml);
						sprnstr = "<!--startprint-->";   //开始打印标识字符串有17个字符
						eprnstr = "<!--endprint-->";        //结束打印标识字符串
						prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
						prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容
						var iframe = null;
						iframe = document.getElementById("iframe1")
						var iwindow = null;
						var iwindow = iframe.contentWindow;//获取iframe的window对象
						iwindow.document.close();
						iwindow.document.write(prnhtml);
						iwindow.print(); //调用浏览器的打印功能打印指定区域
					} else {
						$("#selectImportPage").modal("hide");
						var tableId = document.getElementById('dayinTable');
						var tableToExcel = (function () {
							var uri = 'data:application/vnd.ms-excel;base64,',
								template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
								base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
								format = function (s, c) {
									return s.replace(/{(\w+)}/g,
										function (m, p) { return c[p]; })
								};
							return function (table, name, filename, downloadid) {
								if (!table.nodeType) table = document.getElementById(table);
								var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };
								// window.location.href = uri + base64(format(template, ctx));
								var a = document.createElement("a");
								a.href = uri + base64(format(template, ctx));;
								a.download = filename;
								a.click();
							}

						})();
						var name ="索杰机构管理列表";
						tableToExcel(tableId, "", name);
					}

				})
			}
		})

	}
}
$(function(){
    work=new Work();

})

2.html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="test.less">
</head>

<body>
    <p class="pull-right button importTable">导出</p>
    <p class="pull-right button printTable">打印</p>
    <!-- border="1" cellpadding="0" cellspacing = "0" -->
    <div id="dayin" style="display: none">
        <div id="dayincontent">
            <!--startprint-->
            <table id="dayinTable" border="1" cellpadding="0" cellspacing="0"></table>
            <!--endprint-->
        </div>
        <iframe id="iframe1"></iframe>
    </div>
    <!-- 選擇打印頁數莫太寬 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="selectPrintPage" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"><img src="../../img/customer/closeWorkOrder.png"
                                alt="" /></span></button>
                    <h4 class="modal-title">表格打印</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group has-feedback count">
                        <!-- <label class="control-label col-md-2" for="count">打印页数:</label> -->
                        <div class="input-group col-md-10">

                            <div class="startCount">
                                <label>起始打印页数 : </label>
                                <div class="startDateGroup">
                                    <input type="text" name="" id="startcount" />
                                </div>
                            </div>
                            <hr class="connect" />
                            <div class="endCount">
                                <label>结束打印页数 : </label>
                                <div class="endDateGroup">
                                    <input type="text" name="" id="endcount" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- onclick="getprintpage(this)" -->
                    <a type="button" class="btn btn-primary confirm">确定</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>

        </div>

    </div>

    <!-- 選擇導出頁數莫太寬 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="selectImportPage" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"><img src="../../img/customer/closeWorkOrder.png"
                                alt="" /></span></button>
                    <h4 class="modal-title">表格导出</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group has-feedback count">
                        <!-- <label class="control-label col-md-2" for="count">打印页数:</label> -->
                        <div class="input-group col-md-10">

                            <div class="startCount">
                                <label>起始导出页数</label>
                                <div class="startCountGroup">
                                    <input type="text" name="" id="startcount" />
                                </div>
                            </div>
                            <hr class="connect" />
                            <div class="endCount">
                                <label>结束导出页数</label>
                                <div class="endCountGroup">
                                    <input type="text" name="" id="endcount" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- onclick="getprintpage(this,99)" -->
                    <a class="btn btn-primary confirm" id="download">确定</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>

        </div>

    </div>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript" src="bootstrap.min.js" type="text/javascript"
        charset="utf-8"></script>

    <script src="less.min.js"></script>
    <script src="test.js"></script>
</body>

</html>

3.less部分

// 打印表格的樣式

#selectPrintPage,#selectImportPage{

.modal-dialog {

width: 495px;

height: 167px;

margin-top: 320px;

.modal-content {

width: 495px;

height: 167px;

.modal-header {

width: 100%;

height: 42px;

background:linear-gradient(90deg,rgba(47,172,203,1),rgba(74,190,145,1));

border-radius:2px;

padding: 11px;

h4 {

color: #fff;

font-size: 13px;

}

img{

width: 12px;

}

}

.modal-body {

width: 100%;

height: 76px;

padding: 20px 0 0 53px;

.count {

width: 100%;

label {

height: 38px;

text-align: left;

line-height: 38px;

color: #5C7191;

font-size: 12px;

padding: 0;

}

div {

height: 38px;

.startCount,.endCount{

float: left;

width: 145px;

height: 38px;

& > label{

float: left;

width: 101px;

height: 38px;

text-align: center;

line-height: 38px;

}

& > div{

float: left;

width: 42px;

height: 38px;

background: #ffffff;

border: 1px solid #cedbe1;

border-radius: 5px;

padding: 2px;

input{

width: 100%;

height: 100%;

text-align: center;

line-height: 38px;

padding: 0;

border: none;

outline: none;

}

}

}

.connect{

float: left;

width: 15px;

height: 2px;

margin: 19px 12px 0 22px;

background: #CEDBE1;

clear: none;

}

}

}

}

.modal-footer {

width: 100%;

height: 51px;

border: none;

padding: 10px;

text-align: center;

background:rgba(237,246,250,1);

border-radius:0px 0px 2px 2px;

a:nth-child(1) {

width: 58px;

height: 32px;

background:rgba(53,182,148,1);

border-radius:3px;

color: #fff;

font-size: 12px;

line-height: 20px;

border: none;

}

button:nth-child(2) {

width:58px;

height:32px;

background:rgba(53,120,182,1);

border:1px solid rgba(46,112,174,1);

border-radius:3px;

color: #EBF6F2;

font-size: 12px;

}

}

}

}

}

 

PHPWord 基于word模板，根据动态内容 生成目录 和 页码 【以实际项目为例】
UPCTO
09-08 668
这里需要将数组中的路径做一下处理，得到绝对路径，之后读取页面的时候要用到，得到新数组名称： $replace_result_array_all。客户系统模板比较复杂，他一份《固定压力容器》报告中，可能包含 多分检测报告，至于包含哪些报告，由领取任务时选择报告类目。2、生成检测内容目录的结构缓存，用于合并之后的 检测选择报告项目，用于之后的目录生成，【标记是页码，还是 “ - ”】要求最终生成目录，选择了的报告类型需要标记出页码，未被选择的页码标记为“-”，总体不影响页码连续性。
达梦数据库逻辑导入导出
强悍de巨人
09-14 1281
达梦数据库逻辑导入导出
长文慎点，Java学习笔记（一）
xvktdmjg的博客
12-22 183
这只是一篇我自己学习java的流水账笔记，包含了以下内容，全是基础代码示例，希望对正在学习java的小伙伴有帮助 基础类型转换: The convertion of basic data types 字符串统计: String counting functions 冒泡排序，选择排序，二分法查找：bubbleSort , selectionSort & binarySearch 打印文件树：Listing files tree of a path typed from command line j
web端打印，可以忽略部分内容不打印
琴瑟静好的博客
08-15 3651
.noprint{display : none } 不需要打印的地方 打印的部分 ---------------------------------- function preview(oper)        { if (oper  { bdhtml=window.document.body.innerHTML;//获取
Python3小白爬虫入门（一）
ZACK_JM的博客
06-23 2512
首先，作为一个python小白，入门爬虫其实也不是很难。要使用python爬虫，首先要知道爬虫能用来做什么，先来一波百度：网络爬虫（又被称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者），是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。爬虫可以抓取网络上的数据。爬虫可以用很多种编程语言实现，python只是一...
【总结】PHP常见面试题汇总(四)。。。
PHP在线开发笔记
04-10 8134
1、如何使用php导入导出csv？ <?php //读取csv文件中数据:使用php内置函数fgetcsv() function input_csv($handle) { $out = array (); $n = 0; while ($data = fgetcsv($file_handle, 10000)) { $num = count($d
qt 打印html 分页打印,关于解决QTableView分页打印实现方法（仿Excel）
weixin_35990295的博客
06-16 884
通过Qt开发电子报表软件，在打印问题上遇到难题，参考网上的方法，很少，几乎没有相关的解决方法！只有自力更生了，结合QT自带实例spreadsheet， 打印只能实现当前页的打印，并不能实现分页，分区域打印。void PrintView::print(QPrinter *printer){#ifndef QT_NO_PRINTERresize(printer->width(), printer...
Java导出excel中poi的导出和csv导出excel
Java代码查询出树级结构的最底层结构
07-29 1753
最近在做一个文史类统计项目，许多地方需要用到导出excel报表。之前用的是公司的poi导出，最后听群友说csv的导出会比poi快很多。但是csv文件是以“，”分割文件的。如果数据中逗号比较多就会导致数据混乱。 ①POI导出 1.导入poi依赖或者导入jar包E:\百度\poi-3.9.jar <dependency> <groupId>o...
基于POI实现Excel表的导入导出功能
热门推荐
林风自在
06-12 4万+
对于批量数据的操作，在项目中引进Excel的导入和导出功能是个不错的选择。对于Excel表的结构，简单理解可以把它分成三部分（Sheet，Cell，Row），这三部分可以理解为excel表中的页，列，行。因此，我们想要获取到某一个单元的内容，可以通过获取该单元所在的页数、对应所在的行和对应的列数从而定位到该单位，继而便可执行操作从而获取其中的内容。本文在SSM环境下基于Java的POI实现对exc...
世上最完美的用JavaScript将table导出成一个Excel文件（兼容所有浏览器）
qq_19306197的博客
08-03 1043
项目一个功能需要将table中的数据导出成一个Excel文件。在百度搜索上，大多是用ActiveX去做，可这个只能在ie浏览器上用，而且还要更改浏览器设置，这个方法明显不好用。 我经过多次搜索和研究，千辛万苦，终于找到一个方法，能兼容所有浏览器。代码如下： EB页面导出为EXCEL文档的方法 //打印pdf文件 function myprint(){ var global_Ht
js将table导出excel 之文件改名及格式化全攻略
fengjingzhu的博客
12-13 1万+
之所以写该文，因为网上有很多js将table导出excel的方法，都大同小异，但大都存在这样或那的样的问题使大家不得不放放弃，从而转向从后台导出，常见问有三个 1.不兼容大多数浏览器 2.无法自己定义文件名 3.无法格式化导出表格的样式 现就以上三点分别介绍，在介绍以上三点之前看一下我所做的表格及导出后以效果： 最后一张是导出成的excel 其中的样式完成可以自己在js设计，下面具体介绍
selenium自动化测试框架PO设计模式
夜莺_Cody
06-21 1万+
整理一下 selenium 自动化测试实践中使用较多的 PO(PageObject)设计模式 面向对象的特性:封装\继承\多态.在自动化中一样适用,selenium 自动化测试中有一个名字常常被提及 PageObject(思想与面向对象的特性相同),通过 PO 模式可以大大提高测试用例的维护效率 传统测试脚本的弊端: 测试脚本分离,维护成本高 可扩展性差 复用性低等 PageOb...
RM报表 文本框 自动换行 相关代码
dianmengkui1387的博客
11-12 173
procedure TRMCustomMemoView.WrapMemo1(aAddChar: Boolean); var lCurHeight, lOneLineHeight, lMaxWidth: Integer; lWCanvas: TCanvas; procedure _OutLine(const lStr: WideString); begin...
拉勾网Ajax爬虫
Alian_W的博客
02-05 1705
拉勾网Ajax爬虫 https://www.lagou.com/jobs/list_%E7%88%AC%E8%99%AB 大家好，我是W 项目介绍：本项目为使用requests库实现Ajax的爬虫项目。项目目标是将指定关键词下的所有搜索结果的全部信息爬取下来（包括：职位详情页url，公司全名，公司缩写名，公司规模，行业领域，金融阶段，公司标签，第一标签，第二标签，第三标签，技能标签，职位标签，行业...
Vue.js 与 Ajax（vue-resource）深度解析
csbysj2020
08-08 565
Vue.js 是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序。它通过数据绑定和组件系统，使得开发过程中能够以数据驱动的方式实现视图的更新。简洁易学：Vue.js 的语法简单，易于上手。组件化开发：Vue.js 支持组件化开发，提高了代码的复用性和可维护性。双向数据绑定：Vue.js 提供了双向数据绑定机制，简化了数据同步。虚拟DOM：Vue.js 使用虚拟DOM技术，提高了页面的渲染性能。
基于SVM算法的人民币面值识别系统：从图像处理到机器学习模型的实现与应用 · 数字图像处理
最新发布
08-11
基于支持向量机(SVM)的人民币面值识别系统的设计与实现。该系统利用MATLAB GUI工具，结合数字图像处理技术和机器学习模型，能够高效识别多种面值的人民币。主要步骤包括数据集准备、图像灰度化、边缘检测、旋转矫正、形态学操作、ROI截取、加载SVM模型、面值识别及结果验证。系统目前可识别1元至100元面值，正确率达到90%以上，并可通过扩展训练数据集来提升识别精度和覆盖更多面值。 适合人群：从事图像处理、机器学习研究的技术人员，以及对人民币面值识别感兴趣的开发者。 使用场景及目标：适用于银行、自助设备、零售终端等需要快速准确识别人民币面值的场合。目标是提供一种高效、准确、易用的人民币面值识别解决方案。 其他说明：该系统不仅展示了SVM在图像分类任务中的强大能力，还通过MATLAB GUI实现了操作流程的可视化，便于用户理解和使用。未来可以通过优化算法和增加训练样本进一步提升系统性能。
java导出数据不全
03-28
例如，分页查询是否使用了正确的起始行和页数，是否在循环中正确处理了所有数据。流式API是否能有效减少内存使用。同时，检查是否有未关闭的流导致数据未写入。还要考虑服务器性能，比如调整JVM参数，但这可能只是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值