JSP页面既过宽又过长，导出打印时需要同时处理横向滚动和纵向滚动的问题。以下是整理后的完整解决方案，结合了CSS、JavaScript和JSP页面代码，确保所有内容都能正确打印。
解决方案概述
- CSS优化：使用
@media print规则调整打印样式，确保内容适应纸张宽度和高度。 - JavaScript动态调整：在打印前临时调整页面布局，确保所有内容可见。
- 横向打印：设置打印方向为横向（Landscape），以充分利用纸张宽度。
- 分页控制：使用CSS的
page-break属性控制分页，避免内容被截断。
完整代码示例
JSP页面代码
<!DOCTYPE html>
<html>
<head><title>打印过宽过长页面</title><style>/* 页面样式 */body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.content {width: 1500px; /* 模拟过宽内容 */height: 2000px; /* 模拟过长内容 */background: linear-gradient(to bottom, #f06, white);padding: 20px;}/* 打印样式 */@media print {/* 隐藏不需要打印的元素 */.no-print {display: none;}/* 确保内容不超出纸张宽度 */body {width: 100% !important;overflow: visible !important;margin: 0 !important;padding: 0 !important;}/* 强制横向打印 */@page {size: landscape; /* 横向打印 */margin: 1cm; /* 调整页边距 */}/* 处理宽内容 */.content {width: 100% !important;max-width: 100% !important;overflow-wrap: break-word;word-wrap: break-word;word-break: break-all;}/* 分页控制 */.page-break {page-break-before: always;}}</style><script>function printFullPage() {// 临时调整页面样式，确保所有内容可见document.body.style.overflow = 'visible';document.body.style.width = '100%';document.body.style.height = 'auto';// 触发打印window.print();// 恢复原始样式（可选）setTimeout(() => {document.body.style.overflow = 'auto';document.body.style.width = 'auto';document.body.style.height = 'auto';}, 1000);}</script>
</head>
<body><div class="content"><h1>这是一个过宽过长的页面</h1><p>向右滚动以查看更多内容。</p><p>向下滚动以查看更多内容。</p><p>...</p><p>这是页面的右下角。</p></div><button οnclick="printFullPage()">打印完整页面</button>
</body>
</html>
关键点说明
1. CSS优化
@media print：定义打印时的样式，确保内容适应纸张宽度和高度。size: landscape：设置打印方向为横向，充分利用纸张宽度。page-break：控制分页，避免内容被截断。
2. JavaScript动态调整
- 临时调整样式：在打印前将页面宽度和高度设置为
100%，确保所有内容可见。 - 恢复样式：打印完成后恢复原始样式（可选）。
3. 分页控制
- 使用
page-break-before: always在需要分页的地方插入分页符。
测试与优化
- 打印预览：在浏览器中按
Ctrl+P（Windows）或Cmd+P（Mac）打开打印预览，检查内容是否完整。 - 调整样式：根据实际内容调整CSS样式，确保打印效果符合预期。
- 导出为PDF：如果打印效果仍不理想，可以导出为PDF后再打印。
导出为PDF（可选）
如果页面内容过于复杂，可以使用JavaScript库（如html2pdf.js）将页面导出为PDF。
示例代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>function exportToPDF() {const element = document.body;html2pdf().from(element).save();}
</script>
<button onclick="exportToPDF()">导出为PDF</button>
总结
通过以上方法，可以解决JSP页面过宽过长导致的打印问题：
- 使用CSS优化打印样式，确保内容适应纸张宽度和高度。
- 使用JavaScript动态调整布局，确保所有内容可见。
- 设置横向打印和分页控制，避免内容被截断。
- 可选导出为PDF，进一步优化打印效果。