Javascript 如何检测jsPDF上的第一页
如何在jsPDF的第一页上检测/条件 我想检测第一页,这样我就可以只在第一页上应用上页边距,而不在下一页上应用上页边距。这样我就可以静态地使用.text()方法添加标题 这是我目前的代码:Javascript 如何检测jsPDF上的第一页,javascript,jquery,css,jspdf,Javascript,Jquery,Css,Jspdf,如何在jsPDF的第一页上检测/条件 我想检测第一页,这样我就可以只在第一页上应用上页边距,而不在下一页上应用上页边距。这样我就可以静态地使用.text()方法添加标题 这是我目前的代码: <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title></title> {{ HTML::script("js/jspdf/js
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
{{ HTML::script("js/jspdf/js/jquery/jquery-1.7.1.min.js")}}
{{ HTML::script("js/jspdf/js/jquery/jquery-ui-1.8.17.custom.min.js")}}
{{ HTML::script("js/jspdf/js/libs/polyfill.js")}}
{{ HTML::script("js/jspdf/jspdf.js")}}
{{ HTML::script("js/jspdf/js/libs/deflate.js")}}
{{ HTML::script("js/jspdf/js/libs/adler32cs.js/adler32cs.js")}}
{{ HTML::script("js/jspdf/js/libs/FileSaver.js/FileSaver.js")}}
{{ HTML::script("js/jspdf/js/libs/Blob.js/Blob.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.standard_fonts_metrics.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.split_text_to_size.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.addimage.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.cell.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.from_html.js")}}
</head>
<body>
<div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv">
<div>
<br>
<br>
<br>
</div>
<table>
<colgroup>
<col width="10%">
<col width="30%">
<col width="40%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th>id</th>
<th>item name</th>
<th>description</th>
<th>price</th>
<th>qty</th>
<th>subtotal</th>
</tr>
</thead>
<tbody>
@for ($x=0; $x < 20; $x++)
@foreach ($items as $item => $value)
<tr>
<td>{{$value->itemId}}</td>
<td>{{$value->itemName}}</td>
<td>{{$value->description}}</td>
<td>{{$value->itemPrice}}</td>
<td>{{$value->quantity}}</td>
<td>{{$value->quantity*$value->itemPrice}}</td>
</tr>
@endforeach
@endfor
</tbody>
</table>
</div>
<div>
<button onclick="javascript:demoFromHTML()" class="button">Run Code</button></p></div></div>
</div>
</div>
<script>
$(document).ready(function() {
demoFromHTML();
});
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter')
pdf.setFontSize(16)
pdf.text(40, 60, 'Doe, John Smith')
pdf.setFontSize(12)
pdf.text(40, 72, '795 Folsom Ave, Suite 600')
pdf.text(40, 84, 'San Francisco, CA 94107')
pdf.text(40, 96, '(123) 456-7890')
, source = $('#fromHTMLtestdiv')[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
)
}
</script>
</body>
<footer>
</footer>
</html>
{{HTML::script(“js/jspdf/js/jquery/jquery-1.7.1.min.js”)}
{{HTML::script(“js/jspdf/js/jquery/jquery-ui-1.8.17.custom.min.js”)}
{{HTML::script(“js/jspdf/js/libs/polyfill.js”)}
{{HTML::script(“js/jspdf/jspdf.js”)}
{{HTML::script(“js/jspdf/js/libs/deflate.js”)}
{{HTML::script(“js/jspdf/js/libs/adler32cs.js/adler32cs.js”)}
{{HTML::script(“js/jspdf/js/libs/FileSaver.js/FileSaver.js”)}
{{HTML::script(“js/jspdf/js/libs/Blob.js/Blob.js”)}
{{HTML::script(“js/jspdf/jspdf.plugin.standard_fonts_metrics.js”)}
{{HTML::script(“js/jspdf/jspdf.plugin.split_text_to_size.js”)}
{{HTML::script(“js/jspdf/jspdf.plugin.addimage.js”)}
{{HTML::script(“js/jspdf/jspdf.plugin.cell.js”)}
{{HTML::script(“js/jspdf/jspdf.plugin.from_HTML.js”)}
身份证件
项目名称
描述
价格
数量
小计
@对于($x=0;$x<20;$x++)
@foreach($items为$item=>$value)
{{$value->itemId}
{{$value->itemName}
{{$value->description}
{{$value->itemPrice}
{{$value->quantity}
{{$value->quantity*$value->itemPrice}
@endforeach
@结束
运行代码
$(文档).ready(函数(){
demoFromHTML();
});
函数demoFromHTML(){
var pdf=新的jsPDF('p','pt','letter')
pdf.setFontSize(16)
文本(40,60,'Doe,John Smith')
pdf.setFontSize(12)
pdf.text(Folsom大道40号、72号、795号、600号套房)
文本(40,84,'加利福尼亚州旧金山94107')
文本(4096'(123)456-7890')
,source=$('#fromHTMLtestdiv')[0]
//我们支持特殊的元素处理程序。用jQuery风格注册它们
//ID或节点名称的ID选择器。(“#iAmID”、“div”、“span”等)
//不支持任何其他类型的选择器
//(类,指化合物)此时。
,SpecialElementHandler={
//id为“bypass”的元素-jQuery样式选择器
“#绕过我”:函数(元素、渲染器){
//true=“在别处处理,绕过文本提取”
返回真值
}
}
边距={
排名:80,
底数:60,
左:40,,
宽度:522
};
//所有坐标和宽度都以jsPDF实例声明的单位表示
//在本例中为“英寸”
pdf.fromHTML(
source//HTML字符串或DOM元素引用。
,margins.left//x坐标
,margins.top//y坐标
, {
“宽度”:margins.width//PDF上内容的最大宽度
,“elementHandlers”:specialElementHandlers
},
功能(处置){
//dispose:将最后一行的X,Y添加到PDF中的对象
//这允许在html之后插入新行
保存('Test.pdf');
},
边距
)
}
上面的代码生成此pdf:
我尝试增加页边距顶部的值,但它会影响所有页面:/
我尝试在顶部添加
s,但它也不起作用。任何帮助都将不胜感激!谢谢你抽出时间。如果有不清楚的地方或者你需要更多的信息,请在下面发表评论。!祝你今天愉快 我不确定是否可以在插件中检测当前页码,但jsPDF API有一个名为setPage的函数。因此,您可以只选择第一页,而不尝试检测它
请注意,setPage()使用基于一的索引
pdf.setPage(1);
问题可能太老,无法回答,但您可以通过如下所示的内部方法检测页码:
let doc = new Pdf();
let pageInfo = doc.internal.getCurrentPageInfo();
console.log(pageInfo.pageNumber) // Logs your current page number.