Skip to content

B
buildbank-replica
Commit bed21a9c authored by 何波's avatar 何波
Browse files
Options

页面表格功能提交

parent eacb3d4c
Show whitespace changes
Inline Side-by-side
Showing with 312 additions and 66 deletions
account.html
View file @ bed21a9c
......@@ -3,6 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/xlsx-js-style/dist/xlsx.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<title>账户信息查询 - 活期账户</title>
<style>
* {
......@@ -403,21 +407,60 @@
color: #0066b3;
text-decoration: none;
}
#pdfArea {
position: absolute;
left: -9999px;
top: 0;
width: 1040px;
background: #fff;
}
.title {
padding: 30px 0 4px 0;
text-align: center;
font-weight: normal;
font-size: 14px;
}
.print-date {
float: right;
margin-right: 5px;
font-size: 14px;
}
.table_none {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 14px;
/* ✅ 平分列宽 */
table-layout: fixed;
}
.ths, .tds {
border: 1px solid #000;
padding: 4px;
text-align: center;
font-weight: normal;
word-break: break-all;
}
.tds:nth-child(1), /* 账号 */
.tds:nth-child(5), /* 账面余额 */
.tds:nth-child(6), /* 可用余额 */
.tds:nth-child(11), /* 历史余额 */
.tds:nth-child(12) /* 时间 */
{
color: #000;
font-weight: 500 !important;
}
.ths {
background-color: #fff;
font-weight: normal;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a>
<a href="#">批量账户查询</a>
<a href="#">电子回单查询</a>
<a href="#">集成资讯 ∨</a>
<a href="#">电子对账 ∨</a>
<a href="#">经营分析</a>
<a href="#">操作指南</a>
<a href="#">明细清单</a>
</div> -->
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
......@@ -436,10 +479,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -449,10 +492,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -1065,10 +1108,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -1078,10 +1121,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -1154,10 +1197,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -1167,10 +1210,10 @@
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li onclick="submitSelect('0','1')" class="firstLi">Txt下载</li>
<li onclick="submitSelect('0','2')">Excel下载</li>
<li onclick="submitSelect('0','3')">Csv下载</li>
<li onclick="submitSelect('0','4')">PDF下载</li>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
......@@ -1217,6 +1260,48 @@
<p>4. 本日首次登录时，历史余额栏位为系统自动于本日零点查询的账户余额；本日非首次查询余额，历史余额显示上次查询的余额信息。</p>
<p>5. 若您的签约/授权账户变动未及时体现在账户列表中，请点击此处<a href="#">刷新</a>。</p>
</div>
<div id="pdfArea">
<div class="title">活期账户列表信息</div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<thead>
<tr>
<th class="ths">账号</th>
<th class="ths">账户名称</th>
<th class="ths">币种</th>
<th class="ths">行别</th>
<th class="ths">账面余额</th>
<th class="ths">可用余额</th>
<th class="ths">签约类型</th>
<th class="ths">钞汇类别</th>
<th class="ths">账户别名</th>
<th class="ths">开户机构</th>
<th class="ths">历史余额</th>
<th class="ths">历史查询时间</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tds">42050123704500001941</td>
<td class="tds">中科软盈（武汉）科技有限公司</td>
<td class="tds">人民币元</td>
<td class="tds">中国建设银行</td>
<td class="tds">775,342.62</td>
<td class="tds">775,342.62</td>
<td class="tds">签约</td>
<td class="tds">钞</td>
<td class="tds">-</td>
<td class="tds">中国建设银行股份有限公司武汉南湖大道支行</td>
<td class="tds">775,342.62</td>
<td class="tds">2026-04-30 11:30:22</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
......@@ -1414,6 +1499,11 @@ function downloadFile(content, fileName, type) {
link.click();
URL.revokeObjectURL(link.href);
}
document.querySelectorAll('.downloadBox li').forEach((el, index) => {
el.addEventListener('click', function () {
submitSelect('0', String(index + 1));
});
});
function submitSelect(scope, type) {
// scope: 0 当前页 / 1 全部（你可以扩展）
// type: 1 txt 2 excel 3 csv 4 pdf
......@@ -1433,47 +1523,203 @@ function submitSelect(scope, type) {
break;
}
}
function downloadTXT(data) {
var content = data.map(row => row.join('\t')).join('\n');
function downloadTXT() {
var table = document.getElementById("rsTable2");
var rows = table.rows;
var result = [];
var colLength = [9, 9, 4, 5, 10, 10, 7, 5, 5, 12, 5, 7];
var colLengths = [28, 16, 3, 7, 1, 1, 3, 2, 2, 21, 11, 20];
function wrapHeader(str, len, index) {
str = (str || "").toString().trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
return `"${str}"${space}`;
}
function wrapData(str, len, index) {
str = (str || "")
.toString()
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (index === 2) {
len += 2;
}
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
if (index === 0) {
return `"${space + str}"`;
}
return `"${str + space}"`;
}
var header = [
"账号","账户名称","币种","行别",
"账面余额","可用余额","签约类型",
"钞汇鉴别","账户别名","开户机构",
"历史余额","历史查询时间"
];
var headerRow = header.map((item, i) => wrapHeader(item, colLength[i], i));
result.push(headerRow.join(','));
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].cells;
if (!cells || cells.length < 11) continue;
var row = [];
row.push(cells[1].innerText);
row.push(cells[2].innerText);
row.push(cells[3].innerText);
row.push(cells[4].innerText);
var bookBalance = cells[5].innerText;
if (bookBalance.indexOf("点击查询") !== -1) bookBalance = "";
row.push(bookBalance);
var balance = cells[6].innerText;
if (balance.indexOf("点击查询") !== -1) balance = "";
row.push(balance);
row.push(cells[7].innerText);
row.push(cells[8].innerText);
row.push(cells[9].innerText);
row.push(cells[10].innerText);
var lastBalance = "";
if (cells[11]) {
lastBalance = cells[11].innerText
.replace(/FormatAmtRempty\(.+?\);?/g, '')
.trim();
}
row.push(lastBalance);
var lastTime = "";
if (cells[12]) {
lastTime = cells[12].innerHTML
.replace(/&nbsp;/gi, ' ')
.replace(/<br\s*\/?>/gi, ' ')
.replace(/\s+/g, ' ')
.trim();
lastTime = lastTime + " ";
}
row.push(lastTime);
var formatted = row.map((item, idx) => wrapData(item, colLengths[idx], idx));
result.push(formatted.join(','));
}
var content = result.join('\n');
downloadFile(content, '活期账户列表下载.txt', 'text/plain');
}
function downloadExcel(data) {
var html = `
<table border="1">
${data.map(row =>
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
).join('')}
</table>
`;
downloadFile(html, '活期账户列表下载.xls', 'application/vnd.ms-excel');
function downloadExcel(list) {
let arr = [
["中国建设银行"],
["活期账户列表信息"],
];
list[0].pop()
list[1] = list[1].map(item => {
return item === '点击查询' ? '' : item
})
let data = [...arr,...list]
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }
];
const baseFont = {
name: "Arial",
sz: 10
};
ws["A1"].s = {
font: baseFont
};
ws["A2"].s = {
font: { ...baseFont, bold: true },
alignment: { horizontal: "center", vertical: "center" }
};
data[2].forEach((_, i) => {
const cell = XLSX.utils.encode_cell({ r: 2, c: i });
ws[cell].s = {
font: baseFont,
alignment: { horizontal: "center", vertical: "center" }
};
});
data[3].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 3, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: isNumber ? "n" : "s", // ✅ 数字 or 字符串
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
ws["!cols"] = [
{ wch: 24.29 }, { wch: 21.29 }, { wch: 12.29 }, { wch: 12.29 },
{ wch: 10.29 }, { wch: 10.29 }, { wch: 16.29 }, { wch: 15.29 },
{ wch: 16.29 }, { wch: 17.29 }, { wch: 18.29 }, { wch: 20.29 },
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "账户信息");
const wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "array"
});
saveAs(new Blob([wbout]), "活期账户列表下载.xls");
}
function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户列表下载.csv', 'text/csv');
}
function downloadPDF(data) {
var container = document.createElement('div');
container.innerHTML = `
<h3 style="text-align:center;">活期账户列表</h3>
<table border="1" cellspacing="0" cellpadding="5" style="width:100%;border-collapse:collapse;">
${data.map(row =>
`<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
).join('')}
</table>
`;
/* ✅ 打印日期 */
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // ✅ 不补0
const day = now.getDate(); // ✅ 不补0
document.getElementById("printDate").innerText =
`打印日期：${year}年${month}月${day}日`;
/* ✅ PDF导出 */
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const element = document.getElementById("pdfArea");
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true
});
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({
orientation: "p",
unit: "mm",
format: [210, 297]
});
html2pdf()
.set({
margin: 10,
filename: '活期账户列表下载.pdf',
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
})
.from(container)
.save();
const pageWidth = 210;
const pageHeight = 297;
const margin = 5;
let imgWidth = pageWidth - margin * 2;
let imgHeight = canvas.height * imgWidth / canvas.width;
if (imgHeight > pageHeight - margin * 2) {
imgHeight = pageHeight - margin * 2;
imgWidth = canvas.width * imgHeight / canvas.height;
}
const x = (pageWidth - imgWidth) / 2;
const y = margin;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("活期账户列表下载.pdf");
}
function printPage(type) {
if(type == '2') {
return downloadPDF()
}
var table = document.getElementById('rsTable2').outerHTML;
var now = new Date();
var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment