我有一个简单的HTML页面,其中标题部分有一个背景图像。
使用jspdf将页面转换为Html以生成pdf后,所有内容都显示,但背景图像不显示。
请参见此fiddel链接
html:
<body id="pdf">
<!-- header section -->
<div class="section-header" id="main_d">
<h1>
data
</h1>
</div>
</body>
css
.section-header{
//background-color:red;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkxORFDMPY7v_DGrlgBxnFBHtwifP9Uz28Y5-8TcNpdTwILs3E");
background-repeat: no-repeat;
max-height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
var pdf = new jsPDF('1', 'pt', 'a4');
pdf.addHTML($('#pdf')[0], function () {
// pdf.output("dataurlnewwindow");
pdf.save('Test.pdf');
});
</script>