Javascript 在带有背景图像的HTML5页面中使用jsPDF生成PDF
您好,这是我的第一个jsPDF项目,我必须打印一个完整的HTML5页面,页面的CSS样式包括表格背景图像和填充设置 我已经通过许多网站,但没有找到一个正确的解决方案,请帮助。 我可以成功生成没有背景图像的表格,代码如下:Javascript 在带有背景图像的HTML5页面中使用jsPDF生成PDF,javascript,jquery,css,jspdf,Javascript,Jquery,Css,Jspdf,您好,这是我的第一个jsPDF项目,我必须打印一个完整的HTML5页面,页面的CSS样式包括表格背景图像和填充设置 我已经通过许多网站,但没有找到一个正确的解决方案,请帮助。 我可以成功生成没有背景图像的表格,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" media="print, screen" href="print.css">
<title>JS to pdf check</title>
<!-- -->
<style>
</style>
</head>
<body style="backgorund : url(js/1234.PNG);">
<div class="panel-body panel-body-table">
<table id="customers" class="table table-striped">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</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>
</div>
<!-- <button href="#" onClick ="$('#customers').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</button>-->
<button href="#" onClick ="print();">PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/tableexport.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/sprintf.min.js"></script>
<script src="js/jspdf.min.js"></script>
<script src="js/base64.js"></script>
<script src="js/plugins/from_html.js"></script>
<script src="js/plugins/split_text_to_size.js"></script>
<script src="js/plugins/standard_fonts_metrics.js"></script>
<script src="js/plugins/addimage.js"></script>
<script>
function print()
{
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
// doc.addImage(src, 'PNG', 10, 20, 280, 150);
doc.output("dataurlnewwindow");
}
</script>
</body>
</html>
JS到pdf检查
国家
人口
日期
%通用电气
中国
1,363,480,000
2014年3月24日
19.1
印度
1,241,900,000
2014年3月24日
17.4
美国
317,746,000
2014年3月24日
4.44
印度尼西亚
249,866,000
2013年7月1日
3.49
巴西
201,032,714
2013年7月1日
2.81
PDF
函数打印()
{
var doc=new jsPDF();
var elementHandler={
“#ignorePDF”:函数(元素、渲染器){
返回true;
}
};
var source=window.document.getElementsByTagName(“正文”)[0];
doc.fromHTML(
来源:,
15,
15,
{
“宽度”:180,“elementHandler”:elementHandler
});
//addImage文件(src,'PNG',10,20,280,150);
文档输出(“dataurlnewwindow”);
}
如何打印body
tag中的背景图像集?尝试以下操作:首先将其更改为画布,打印画布。此操作:首先将其更改为画布,打印画布