我想使用jspdf将html文档下载为pdf横向格式。我的文档中有表格和图像 我想我错过了一些导致错误的jspdf扩展 请编辑我的代码段以生成成功的pdf文件 这是jsPDF代码
<script src="JQueries/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
source = $('#download')[0];
// to an actual DOM element from which the text will be scraped.
// 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: 80,
bottom: 60,
left: 40,
width: 522
};
// 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) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
}
我已将html文档下载为pdf格式，使用chromes打印并手动下载pdf选项。这与html文档100％相同。我需要使用JavaScript下载它，我的客户可以通过单击轻松下载它。
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
source = $('#download')[0];
// to an actual DOM element from which the text will be scraped.
// 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: 80,
bottom: 60,
left: 40,
width: 522
};
// 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) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
} #challan_data
{
display:none;
}
.containerChallan
{
border-collapse: separate;
border-spacing: 5px;
font-family: calibri;
}
.innerChallan
{
border-collapse: collapse;
}
#original,#duplicate,#triplicate,#fourth_copy
{
width:25%;
}
.optional
{
color:green;
}
.headerMono
{
background-image: url('https://image.freepik.com/free-vector/blue-geometric-technological-background_1055-1907.jpg');
background-repeat: no-repeat;
background-size: 100% 81px;
background-position: top;
text-align: center;
vertical-align: text-bottom;
padding-top: 10px;
font-weight: bold;
}
#challan_no
{
border: 1px solid #000;
display: inline;
background: black;
font-weight: bold;
}
.challanDigitsP1
{
display: table-cell;
color:#FFF;
background-color:grey;
padding-left: 3px;
padding-right: 3px;
border-right: 1px solid #000;
}
.challanDigitsP2
{
display: table-cell;
color:#FFF;
background-color:#333;
padding-left: 3px;
padding-right: 3px;
border-right: 1px solid #000;
}
.mini_note
{
font-size: 60%;
}
.cell_contents
{
padding-left: 3px;
padding-right: 3px;
padding-top: 5px;
padding-bottom: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="clickbind" href="javascript:demoFromHTML();">Download PDF</a>
<br>
<table id="download" align="center" border="1" width="1267px" class="containerChallan">
<tr>
<td id="original">
<table border="1" width="100%" class="innerChallan">
<tr>
<td colspan="2" class="headerMono">
<span class="ch_title">BANK<BR>COPY</span>
<br><br><br>
Challan No.
<div id="challan_no">
<span id="chno_1" class="challanDigitsP1">A</span>
<span id="chno_2" class="challanDigitsP1">9</span>
<span id="chno_3" class="challanDigitsP1">0</span>
<span id="chno_4" class="challanDigitsP1">7</span>
<span id="chno_5" class="challanDigitsP1">1</span>
<span id="chno_6" class="challanDigitsP1">7</span>
<span id="chno_7" class="challanDigitsP2">1</span>
<span id="chno_8" class="challanDigitsP2">2</span>
<span id="chno_9" class="challanDigitsP2">3</span>
<span id="chno_10" class="challanDigitsP2">4</span>
</div>
<br>
<span class="mini_note">(For Credit to Collection Account of The Behya University of Indiana)</span> <br>Account No: <b>00327901156907</b>
</td>
</tr>
<tr>
<td width="39%" class="cell_contents">Name</td>
<td class="cell_contents"><b><span id="ch_name">Adam</span></td>
</tr>
<tr>
<td class="cell_contents">Father's Name</td>
<td class="cell_contents"><span id="ch_f_name">xyz</span></td>
</tr>
<tr>
<td class="cell_contents">CNIC No</td>
<td class="cell_contents"><span id="ch_cnic">3120268882285</span></td>
</tr>
<tr>
<td class="cell_contents">Address</td>
<td class="cell_contents"><span id="ch_address">Street No. 1, Model Town A, Bahawalpur</span></td>
</tr>
<tr>
<td class="cell_contents">Challan Category</td>
<td class="cell_contents"><span id="ch_main_cat">Cat-1</span></td>
</tr>
<tr>
<td class="cell_contents">Challan Purpose</td>
<td class="cell_contents"><span id="ch_sub_cat">p1</span></td>
</tr>
<tr class="hide_on_demand">
<td class="cell_contents">Department</td>
<td class="cell_contents"><span id="ch_department">Computer Science</span></td>
</tr>
<tr class="hide_on_demand">
<td class="cell_contents">Session</td>
<td class="cell_contents"><span id="ch_session">2016-18</span></td>
</tr>
<tr class="hide_on_demand">
<td class="cell_contents">Semester</td>
<td class="cell_contents"><span id="ch_semester">1st</span></td>
</tr>
<tr class="hide_on_demand">
<td class="cell_contents">Program</td>
<td class="cell_contents"><span id="ch_program">MCS</span></td>
</tr>
<tr>
<td class="cell_contents">Amount</td>
<td class="cell_contents"><b><span id="ch_amount">Rs. 2500/-</span></b></td>
</tr>
<tr align="center">
<td colspan="2" class="cell_contents">
<span style="float:left; margin-left:15px;margin-top: 28px;">Sign Officer</span><span style="float:right; margin-right:15px;margin-top: 28px;">Sign Cashier</span>
<div class="mini_note" style="display:table; margin:0 auto; font-style:italic;margin-top: 80px;">Challan Generation Date and Time : <span id="date_time">dd:mm:yyyy, ss:mm:hh</span></div>
</td>
</tr>
</table>
</td>
<td id="duplicate">
</td>
<td id="triplicate">
</td>
<td id="fourth_copy">
</td>
</tr>
</table>
<script>
document.getElementById("duplicate").innerHTML =
document.getElementById("triplicate").innerHTML =
document.getElementById("fourth_copy").innerHTML =
document.getElementById("original").innerHTML;
document.getElementsByClassName("ch_title")[1].innerHTML = "STUDENT<br>COPY";
document.getElementsByClassName("ch_title")[2].innerHTML = "TREASURER<br>COPY";
document.getElementsByClassName("ch_title")[3].innerHTML = "DIRECTOR IT<br>COPY";
</script>