我正在尝试将HTML表格打印为PDF，但我没有得到我期望的结果。该表以PDF页面打印，但结果不正确。该表未修复PDF页面的宽度。
我在下面显示截图。该表有更多的列和行。 我正在使用AngularJS和HTML。 我的代码如下所示。enter image description here
index.html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<br/>
<button ng-click="exportToExcel('#customers')">XLS</button>
<button ng-click="exportToPdf()">PDF</button>
<button >PRINT</button> <br/>
<br/>
<table border="1" id="customers" class="table table-striped">
<thead>
<tr>
<th style="width: 125px;">Product Id </th>
<th>Product Details</th>
<th>Product Details</th>
<th>Inventory Update</th>
<th>Summary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>
{{productitem.esriproductid}}
</td>
<td>
<div><span class="GridSubTitle">Product Name : </span>{{productitem.productname}}</div>
<div><span class="GridSubTitle">Product Supplier : </span>{{productitem.productsuppliername}}</div>
<div><span class="GridSubTitle">Product Type : </span>{{productitem.producttypename}}</div>
<div><span class="GridSubTitle">Total Quantity : </span>{{productitem.totalquantity}}</div>
<div><span class="GridSubTitle">Product Price (OMR) : </span>{{productitem.productpriceinOMR}}</div>
<div ng-if="productitem.datevalidityforprice < FromDate"><span class="GridSubTitle">Date Validity for Price : </span><span class="expirylicense">{{productitem.datevalidityforprice | date:"dd-MMM-yyyy"}}</span></div>
<div ng-if="productitem.datevalidityforprice >= FromDate"><span class="GridSubTitle">Date Validity for Price : </span>{{productitem.datevalidityforprice | date:"dd-MMM-yyyy"}}</div>
</td>
<td>
<div><span class="GridSubTitle">Utilized : </span>{{productitem.ProductUtilization}}</div>
<div><span class="GridSubTitle">Balance : </span>{{productitem.ProductBalance}}</div>
<div><span class="GridSubTitle">Total Cost (OMR) : </span>{{productitem.TotalProductCostOMR}}</div>
<div><span class="GridSubTitle">Usage Type : </span>{{productitem.usagetypename}}</div>
</td>
<td>
<div><span class="GridSubTitle">Total Utilized Cost(OMR) : </span>{{productitem.TotalUtilizationProductCostOMR}}</div>
<div><span class="GridSubTitle">Quantity Utilization Trigger : </span>{{productitem.quantityutilizationtrigger}}</div>
<div><span class="GridSubTitle">Version : </span>{{productitem.version}}</div>
<div></div>
</td>
<td>
<div class="action" ng-if="productitem.datevalidityforprice > FromDate">
<a href="/LicenseManagement/AddLicense?productid={{productitem.productid}}" title="Edit"><i class="fa fa-pencil-square-o"></i></a>
<a ng-click="deleteproduct(productitem)" title="Delete"><i class="fa fa-trash-o"></i></a>
</div>
<div> </div>
<div> </div>
<div ng-if="productitem.datevalidityforprice > FromDate">
<a ng-click="activeproduct(productitem)" title="Active"><img ng-if="productitem.isactive==1" src="~/Content/img/active.png" /></a>
<a ng-click="inactiveproduct(productitem)" title="Deactive"><img ng-if="productitem.isactive==0" src="~/Content/img/inactive.png" /></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$http,$timeout, Excel) {
$http.get("cate.json").then(function (response) {$scope.items = response.data;});
$scope.exportData = function () {
$('#customers').tableExport({ type: 'json', escape: 'false' });
};
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
$scope.exportToPdf = function(){
html2canvas(document.getElementById('customers'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 110,
}]
};
pdfMake.createPdf(docDefinition).download("example.pdf");
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
});
app.factory('Excel',function($window){
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]--></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 {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
</script>
</body>
</html>