<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>红头文件长文实时预览</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
//font-family: "SimSun", "宋体", serif;
}
.left, .right {
flex: 1;
border: 1px solid #ccc;
overflow: auto;
}
.left {
padding: 10px;
background: #fdfdfd;
}
#editor {
width: 100%;
min-height: 100%;
outline: none;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.red-header {
text-align: center;
}
.red-header h1 {
font-size: 34px;
color: red;
margin-bottom: 5px;
}
.red-line {
height: 3px;
background: red;
}
.red-line-thin {
height: 1px;
background: red;
margin-bottom: 20px;
}
.doc-meta {
display: flex;
justify-content: space-between;
font-size: 14px;
margin-bottom: 20px;
}
.title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
p {
text-indent: 2em;
margin: 0 0 10px;
}
.signature {
text-align: right;
margin-top: 40px;
}
.cc {
margin-top: 20px;
border-top: 1px dashed #aaa;
padding-top: 10px;
font-size: 12px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
table, th, td {
border: 1px solid #333;
}
th, td {
padding: 6px;
}
</style>
</head>
<body>
<div class="left">
<div id="editor" contenteditable="true">
<div class="red-header">
<h1>XX市XX局</h1>
<div class="red-line"></div>
<div class="red-line-thin"></div>
</div>
<div class="doc-meta">
<div>XX市XX局〔2025〕XX号</div>
<div>签发人：张三</div>
</div>
<div class="title">关于开展2025年度数字化治理能力提升专项行动的通知</div>
<p>各区县XX局、局属各单位：</p>
<p>
为深入贯彻国家与省市关于数字中国建设的决策部署，经研究，决定在全市范围内开展2025年度数字化治理能力提升专项行动。现将有关事项通知如下：</p>
<p><b>一、总体要求</b></p>
<p>
以习近平新时代中国特色社会主义思想为指导，立足“四个面向”，围绕“统一标准、统一平台、统一接口、统一安全”的总体路径，坚持问题导向、目标导向与结果导向相结合，聚焦“高质量、可复制、可推广”的数字化治理实践，全面提升基础设施支撑、数据要素治理、流程再造与协同联动、网络与数据安全与应急处置等能力。</p>
<p>
2025年年底前，原则上实现市、区县两级重点领域业务系统对接贯通率不低于90%，高频政务场景事项“掌上办、一次办、跨域办”覆盖率不低于85%，数据共享交换目录覆盖率达到100%，关键数据分类分级与全生命周期管理机制基本健全。</p>
<p><b>二、主要任务</b></p>
<p>
（一）夯实基础设施与云网安全底座。统筹推进市级政务云资源池扩容与弹性调度能力建设，优化异地灾备与多活架构，加强IPv6、零信任、微隔离、统一身份认证等能力建设，完善等保与分保体系。</p>
<p>
（二）规范数据要素治理与目录编制。全量梳理政务数据、公共数据与行业数据资源，完善目录登记、权责边界、共享条件与质量评估指标，推动“可用、可控、可计量、可结算”的要素化治理试点。</p>
<p>
（三）推进业务流程再造与系统对接。以群众与企业“少跑一次、不跑腿”为目标，依托统一消息总线与标准化API，推动跨部门跨层级流程重构与高频事项归并办理，形成端到端闭环与可观测机制。</p>
<p>
（四）强化安全治理与应急演练。完善“人—端—链—云—数”一体化安全体系，建立数据泄露处置、勒索防护、供应链安全审计与红蓝对抗机制，每季度组织一次联合演练并形成问题清单与整改台账。</p>
<p>
（五）打造示范标杆与可复用清单。围绕政务服务、城市运行、民生保障、产业治理等领域，建设一批可复制推广的场景化应用，形成标准化接口规范、技术白皮书与评估模型。</p>
<p><b>三、实施步骤</b></p>
<p>（一）动员部署阶段（2025年9月—10月）。各单位制定实施方案与时间表路线图，明确责任人、任务清单、里程碑与保障措施。</p>
<p>
（二）集中推进阶段（2025年11月—2026年4月）。对标任务清单推进系统对接、数据治理、流程再造与安全加固，市局将组织中期评估与专项督导。</p>
<p>（三）总结评估阶段（2026年5月）。完成成效评估与绩效考核，形成推广清单与长效机制，择优评选示范项目并予以通报表扬。</p>
<p><b>四、保障措施</b></p>
<p>（一）健全组织机制。成立专项行动领导小组及办公室，统筹协调重大事项与跨部门协同。</p>
<p>（二）完善制度标准。制定统一技术规范、数据标准与接口规范，建立变更管理与版本发布机制。</p>
<p>（三）强化资金与人才保障。统筹各类专项资金支持，推进政府采购创新，鼓励“揭榜挂帅”。</p>
<p>（四）加强监督评估。建立“月调度、季通报、年考核”机制，结果与绩效、预算安排、评先评优挂钩。</p>
<p><b>五、长文填充（测试分页）</b></p>
${'<p>这是测试分页的填充文字，用于模拟长文内容。此段文字将重复，以便生成多页A4
PDF文档，测试html2pdf.js分页效果与排版稳定性。</p>'.repeat(80)}
<div class="signature">
XX市XX局<br>
2025年8月14日
</div>
<div class="cc">
抄送：市政府办公厅、相关单位。<br>
（此件公开发布）
</div>
</div>
</div>
<div class="right">
<iframe id="pdfPreview"></iframe>
</div>
<script>
const editor = document.getElementById('editor');
const pdfPreview = document.getElementById('pdfPreview');
async function updatePdf() {
const element = document.createElement('div');
element.innerHTML = editor.innerHTML;
const opt = {
margin: 10,
// margin: [10, 10, 10, 10], // 上右下左
filename: 'red_header.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: ['css', 'legacy'] } // 支持 CSS 分页
};
const blob = await html2pdf().set(opt).from(element).toPdf().output('blob');
pdfPreview.src = URL.createObjectURL(blob);
}
updatePdf();
let timer;
editor.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(updatePdf, 800);
});
</script>
</body>
</html>