如何删除或添加pdf内容的边框

时间：2015-08-27 07:37:41

标签： jquery html css pdf jspdf

我将html内容显示为PDF格式。单击按钮时，将另存为pdf。为此，我使用＆＃39; jsPDF＆＃39; jquery插件。一切正常。但问题是，内容在pdf中有边框，如表格式。我想删除那个边框。由于我是新手，我无法找到添加或删除pdf内容边框的位置。请帮我解决这个问题...

这是我的HTML代码

＆＃13;
＆＃13; 
<!Doctype html>
<head>
<link rel="stylesheet" type="text/css" href="css/ITPortal.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/ITPortal.js"></script>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/html5shiv-printshiv.js"></script>

</head>
<body>
<div id="mainContentWide">
  <h2>WorkPlace Services</h2>
    <h3 class="curveBoxWide">Description</h3>
    <div class="curveBoxWide">
  <p></p></div>
  <table id="mytab1">
		<thead>
			<tr class="thead item">
				<th>Desktop Software</th>
				<th>Quantity</th>
				<th>One time Price ($)</th>
				<th>Annual Price ($)</th>
				<th>One time Extended Cost ($)</th>
				<th>Annual Extended Cost ($)</th>
				<th>Sub-Total</th>
			</tr>
		</thead>
		<tbody>
			<tr class="item odd">
				<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>
			<tr class="item odd">
				<td class="title"><p>Oracle Database</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">270</td>
				<td>56</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>PTC</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">180</td>
				<td>45</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 odd">
				<td class="title"><p>Windchill Heavy</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">0</td>
				<td>1600</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>Windchill Light</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">0</td>
				<td>700</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 odd">
				<td class="title"><p>Qlikview</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">915</td>
				<td>220</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>Red-Hat Linux</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">0</td>
				<td>550</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 odd">
				<td class="title"><p>Cisco Smartnet</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">0</td>
				<td>500</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 category">
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td><p>Microsoft License</p></td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr class="item">
				<td class="title"><p>Windows OS</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">125</td>
				<td>36</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 odd">
				<td class="title"><p>MS Office</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">160</td>
				<td>37</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>Visio Standard</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">220</td>
				<td>50</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 odd">
				<td class="title"><p>Visio Pro</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">550</td>
				<td>110</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>Project Pro</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">1050</td>
				<td>0</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 odd">
				<td class="title"><p>Project Server</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">4210</td>
				<td>850</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>Project</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">125</td>
				<td>210</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 odd">
				<td class="title"><p>SQL CAL</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">160</td>
				<td>36</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>SQL Server Standard</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">685</td>
				<td>154</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 odd">
				<td class="title"><p>SQL Server Enterprise</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">5210</td>
				<td>1470</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>Visual Studio Premium w/ MSDN</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">4740</td>
				<td>940</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 odd">
				<td class="title"><p>Visual Studio Pro w/ MSDN</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">800</td>
				<td>380</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>Sharepoint Server</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">3750</td>
				<td>850</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 odd">
				<td class="title"><p>Sharepoint sites Ent.</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">32000</td>
				<td>7100</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 category">
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td><p>SAP Licenses</p></td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr class="item">
				<td class="title"><p>SAP Bus Suite Pro User</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">2850</td>
				<td>570</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 odd">
				<td class="title"><p>SAP Bus Suite Ltd Pro User</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">1125</td>
				<td>225</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 odd">
				<td class="title"><p>SAP Bus Suite Expert</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">3750</td>
				<td>750</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>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</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:printDiv('mytab1')" />
	<script language="javascript" type="text/javascript">
        function printDiv(divID) {
            //Get the HTML of div
            var divElements = document.getElementById(divID).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;

            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body>" + 
              divElements + "</body>";

            //Print Page
            window.print();

            //Restore orignal HTML
            document.body.innerHTML = oldPage;

          
        }
    </script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这是我的css文件

＆＃13;
＆＃13; 
.btn {
	border: none;
	font-family: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 15px;
	display: inline-block;
	margin: 15px 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	font-size: 14px;
	text-align: center;
	width: 200px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-3 {
	background: #B9BBC0;
	color: #231F20;
}

.btn-3:hover {
	background: #f29e0d;
}

.btn-3:active {
	background: #f58500;
	top: 2px;
}

.btn-3:before {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 140%;
	width: 60px;
	background: #647685;
}

.btn-3d {
	/*padding: 25px 60px 25px 120px;
	border-radius: 10px;*/
}

.btn-3d:before {
	background: #677A8A;
	z-index: 2;
}

.btn-3d:active:before {
	color: #f58500;
}

#mainContentHome h1.title {
color: #C68332;
margin-top: 15px;
margin-bottom: 15px;
}

.clearBoth{
clear:both;
}

#mainContentHolderHome{
background-color:#002239;
min-height: 300px;
}

#mainContentHome a{
display:inline-block;
text-decoration:none;
}


table#mytab1 {
border-collapse: collapse;
font-family: Helvetica, 'Helvetica Neue', Arial, san-serif;
background-color:#fff;
}

table#mytab1 th {
text-align: center;
color: #fff;
font-weight: normal;
padding: 10px 8px;
font-size: 14px;
vertical-align: middle;
}

table#mytab1 td {
/*border: 1px solid #7eaac2;*/
border:0 none;
text-align: center;
padding: 6px 8px;
font-size: 12px;
vertical-align: middle;
}

table#mytab1 td.title {
font-size: 13px;
text-align:left;
color:#000;
width: 180px;
}

table#mytab1 tr.item {
background-color:#eee;
}

table#mytab1 tr.odd {
background-color:#DEDEDE;
}

table#mytab1 tr.thead {
border-bottom: 2px solid #fff;
background-color: #666;
}

table#mytab1 a.button{
padding:5px;
background-color:#eee;
text-decoration:none;
color:#000;
}

table#mytab1 tbody tr:hover{
background-color: #777;
}

table#mytab1 tbody tr:hover td.title{
color: #fff;
}

table#mytab1 tr.category {
font-weight: bold;
background-color: #ccc !important;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}

table#mytab1 tbody tr.category:hover{
background-color: #fff;
}

table#mytab1 tfoot tr{
background-color:#787878;
color:#fff;
}

table#mytab1 td p {
margin: 0;
}

table#mytab1 td input {
width: 50px;
text-align:right;
}

table#mytab1 td input.subtotal1 {
width: 100px;
}

table#mytab1 td input#total {
width: 100px;
}

table#mytab1 td.grandTotal{
text-align:right;
}

table#mytab1 tfoot td.title {
color:#fff;
font-size:14px;
text-align:center;
}

#sidebar1 ul.leftNav li a:hover {
color: #fff !important;
}

#sidebar1 ul.leftNav li, #sidebar1 ul.leftNav li a{
float:none;
}
＆＃13;
＆＃13;
＆＃13;

这是我的页面的屏幕截图：http://postimg.org/image/8zgnxtdd1/b4455e81/

1 个答案:

答案 0 :(得分：0)

我没有看到您的CSS代码，但我认为您没有为您的表定义边框。在HTML上使用它：

 <table id="mytab1" border="0">
                    ^^^^^^^^^^

或者在CSS中：

 #mytab1 {
     border: 0;
 }
相关问题
最新问题