AngularJS实现打印时同一数据表格并排复制展示的方法

嘿，我来帮你搞定这个需求！要实现打印页面时两份相同表格并排显示的效果，我们可以从调整打印内容结构和添加打印专用CSS入手，下面是具体的修改方案：

关键思路 #

1. 复制打印内容：在弹出的打印窗口中，把目标表格的内容复制一份，用容器包裹起来。
2. 打印布局控制：使用CSS Flex布局让两个表格在打印页面中横向排列，同时隐藏不需要打印的元素。

修改后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Print Directive of html templates </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.printToCart = function(printSectionId) {
    // 获取要打印的表格内容
    var tableContents = document.getElementById(printSectionId).innerHTML;
    // 复制表格，用flex容器包裹实现并排
    var printContents = `
      <div class="print-container">
        <div class="print-table">${tableContents}</div>
        <div class="print-table">${tableContents}</div>
      </div>
    `;
    var popupWinindow = window.open('', '_blank', 'width=800,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
    popupWinindow.document.open();
    popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
    popupWinindow.document.close();
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>AngularJS Print html templates</h1>
<form novalidate>
First Name: <input type="text" ng-model="firstName" class="tb8">
<br>
<br>
Last Name: <input type="text" ng-model="lastName" class="tb8">
<br>
<br>
<button ng-click="Submit()" class="button">Submit</button>
<button ng-click="printToCart('tableToPrint')" class="button">Print</button>
</form>
<!-- 单独封装要打印的表格 -->
<div id="tableToPrint">
  <table border="1">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr>
      <td>{{firstName}}</td>
      <td>{{lastName}}</td>
    </tr>
  </table>
</div>
</div>
<div>
<br/>
<br/>More About AngularJS Print...</div>
</body>
</html>

CSS部分（新增打印样式） #

/* 原有样式保持不变 */
.tb8 {
width: 230px;
height:24px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.button{
border:4px solid #26759E;-webkit-box-shadow: #878787 0px 2px 2px ;-moz-box-shadow: #878787 0px 2px 2px ; box-shadow: #878787 0px 2px 2px ;
-webkit-border-radius: 23px; -moz-border-radius: 23px;border-radius: 23px;font-size:13px;font-family:arial, helvetica, sans-serif;
padding: 10px 20px 10px 20px; text-decoration:none; display:inline-block;text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold;
color: #FFFFFF;
background-color: #3093C7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3093C7), to(#1C5A85));
background-image: -webkit-linear-gradient(top, #3093C7, #1C5A85);
background-image: -moz-linear-gradient(top, #3093C7, #1C5A85);
background-image: -ms-linear-gradient(top, #3093C7, #1C5A85);
background-image: -o-linear-gradient(top, #3093C7, #1C5A85);
background-image: linear-gradient(to bottom, #3093C7, #1C5A85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093C7, endColorstr=#1C5A85);
}
.button:hover{
border:4px solid #26759E;
background-color: #26759E;
background-image: -webkit-gradient(linear, left top, left bottom, from(#26759E), to(#133D5B));
background-image: -webkit-linear-gradient(top, #26759E, #133D5B);
background-image: -moz-linear-gradient(top, #26759E, #133D5B);
background-image: -ms-linear-gradient(top, #26759E, #133D5B);
background-image: -o-linear-gradient(top, #26759E, #133D5B);
background-image: linear-gradient(to bottom, #26759E, #133D5B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759E, endColorstr=#133D5B);
}

/* 打印专用样式，仅在打印时生效 */
@media print {
  .print-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
  }
  .print-table {
    width: 45%; /* 调整宽度确保两个表格能在一页内并排 */
  }
  /* 隐藏不需要打印的元素 */
  .button, h1, form, div:not(.print-container):not(.print-table) {
    display: none !important;
  }
}

改动说明 #

• 单独封装表格：把要打印的表格放在id="tableToPrint"的容器中，这样打印时只获取表格内容，避免打印页面上的其他元素（比如按钮、标题）。
• 复制表格内容：在printToCart函数中，我们复制了一份表格内容，并用print-container这个Flex容器包裹，让两个表格横向排列。
• 打印样式控制：通过@media print媒体查询，专门设置打印时的布局，同时隐藏不需要打印的元素，确保打印页面只显示两份并排的表格。

内容的提问来源于stack exchange，提问作者sathish kumar