如何在pdf文档中添加css文件
How to add css file to the pdf document?
我正在尝试使用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>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;
}
}
尝试在父<table>上设置border-collapse: collapse;。根据CSS 2.1规范，除非设置了此属性，否则行不能有边框。在大多数情况下，默认属性是border-collapse: separate;，所以它应该只是覆盖这个问题。
相关文章：
- 如何添加CSS&JavaScript进入Windows窗体应用程序C#.net
- 对于每个json结果，使用类jquery添加css
- 为未标记的文本添加CSS样式
- 在WordPress中使用JavaScript在html元素上添加css类
- jQuery检查CSS宽度是否大于0，然后添加CSS属性
- 单击禁用的按钮添加 CSS
- 在 Twig Child 中添加 CSS 和 JavaScript
- 更改现有的css属性，并通过删除或添加css元素来使用它
- Ember.js为特定的模型id添加css类
- 我可以用添加css吗！重要的是，只使用jquery
- Regex用于添加CSS类
- 如何在一个表的输入中搜索一组特定的值，而不是另一个表's id(s）值以添加css
- 使用JQuery添加css属性悬停
- 通过程序添加CSS渐变作为背景图像
- 使用JS添加CSS规则
- 如何为Fabric.js中的文本添加CSS属性
- IE7/8未添加css属性'top'动态地作为内联样式
- 通过jquery损坏的旋转木马添加css样式
- Node.js Express应用程序:如果存在cookie，则从服务器端向元素添加CSS类
- 添加css转换时间以使用javascript切换类
