我尝试使用jsPdf和html2canvas从html生成pdf。
但是当我的div不可见时,我会收到错误:
IndexSizeError:索引或大小为负数或大于允许的数量,并且无法创建pdf。
如果我的div可见,一切正常。
如何解决我的问题?如何从隐藏的HTML创建pdf?
我尝试做过类似的事情:
$("#btn").click(function() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#testDiv')[0], function() {
pdf.save('PdfFile.pdf');
});
});

#testDiv {
position: absolute;
left: -9999px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDiv" style="display: none">
<p>Some text to pdf</p>
</div>
&#13;
但是我得到了带黑色区域的pdf,这就是全部。
使用CSS添加我的代码:
<div id="template_invoice">
<div id="first_head">
<div id="logo_invoice">
<img src="logo.PNG" width="200px">
</div>
<div id="main_header_info">hth</div>
</div>
<div class="clearFix"></div>
</div>
<style>
html{
background: #fff !important;
}
#first_head,#second_head,#content_invoice{
width: 100%;
}
#logo_invoice, #main_header_info,#lead_address,#lead_invoice_info{
width: 50%;
float:left;
}
.clearFix{
float:none;
clear:both;
}
#second_head{
margin-top: 100px;
}
#template_invoice{
margin: 0 auto;
width: 1170px;
}
#template_invoice{
visibility: hidden;
width: 0px;
height: 0px;
}
</style>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#template_invoice')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 10,
bottom: 10,
left: 10
};
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) {
pdf.save('Test.pdf');
}, margins);
}
</script>
答案 0 :(得分:1)
试试这个CSS:
#testDiv{
visibility:hidden;
height:0px;
}
希望它能奏效。
我试过这个并且有效。
<强>脚本强>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[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: 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 强>
<div id="customers">
<table id="tab_customers" class="table table-striped">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>
<强> CSS 强>
#customers{
visibility:hidden;
height:0px;
}
答案 1 :(得分:1)
只需执行以下技巧:-
#some_selector {
visibility:hidden;
height:0;
overflow: hidden;
}