我正在尝试使用css为PDF文档的标题添加边框。但是我在css中使用的边界并没有采用pdf格式。即使对于图像我也只使用css，它正在采取，但对于边界，它不采取。你能帮我修一下这个边界吗？
这就是我想要的http://imgset.net/WPHuNd
这就是我得到的http://imgset.net/VWUM5z
这是我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/ITPortal.css"/>
<link rel="stylesheet" type="text/css" href="css/oneHarmanMain.css"/>
<link rel="stylesheet" type="text/css" href="css/corev4.css"/>
<link rel="stylesheet" type="text/css" href="css/ITServiceCatalog.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/ITPortal.js"></script>
<script type="text/javascript" src="js/compatibility.js"></script>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/printContent.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/typearray.js"></script>
<link rel="stylesheet" href="css/print.css" type="text/css" />
<style>
#new-logo {
visibility: hidden;
width: 124px;
height: 66px;
}
@media print {
#new-logo {
visibility: visible;
width: 124px;
height: 66px;
}
input[type=text] {
border: 1px solid #ccc !important;
text-align: center !important;
}
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function update() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
}
</script>
<body>
<div id="mainContentWide">
<h2>WorkPlace Services</h2>
<h3 class="curveBoxWide">Description</h3>
<div id="new-logo"> <img src="image/back-logo.png" alt="Harman Logo"/></div>
<table id="mytab1">
<thead>
<tr class="thead item" id="Phead">
<th><span class="colm1">Desktop Software</span></th>
<th><span class="colm1">Quantity</span></th>
<th><span class="colm1">One time Price ($)</span</th>
<th><span class="colm1">Annual Price ($)</span</th>
<th><span class="colm1">One time Extended Cost ($)</span</th>
<th><span class="colm1">Annual Extended Cost ($)</span</th>
<th><span class="colm1">Sub-Total</span</th>
</tr>
</thead>
<tbody>
<tr class="item odd" class="test">
<td class="title"><p>Symantec SEP</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">136</td>
<td>6</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
<tr class="item">
<td class="title"><p>Citrix</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">368</td>
<td>85</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="title"><p>Total:</p></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td id="grandTotal"><input id="total" type="text" value="0" readonly/></td>
</tr>
</tfoot>
</table>
<!-- end #mainContent --></div>
<button onclick="javascript:demoFromHTML()" type="button" id="buttonPDF">Save as PDF</button>
<input type="button" value="Print" onclick="javascript:PrintElem('#mainContentWide')" style="margin: 0 20px; padding: 1px 30px" />
<p style="text-align: center; padding-top: 15px"> ('Save as PDF' is working on IE9 and above, chrome and Firefox browsers )</p>
</body>
</html>
这是我的js文件：
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data){
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function demoFromHTML() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
var pdf = new jsPDF('1', 'mm', [380, 350])
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
, source = $('#mainContentWide')[0]
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true
}
}
margins = {
top: 10,
bottom: 10,
left: 10,
width:1000,
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose){alert('dispose');
pdf.save('Software.pdf');
},
margins
)
document.getElementById("buttonPDF").disabled = 'true';
}
CSS文件：
@media print {
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
#new-logo {
background-image: url("image/back-logo.png");
width: 124px;
height: 66px;
}
}
答案 0 :(得分：1)
尝试在父border-collapse: collapse;上设置<table>。除CSS 2.1 spec之外，除非设置此属性，否则行不能有边框。在大多数情况下，属性默认值为border-collapse: separate;，所以它应该只是覆盖它。