我有一个简单的 HTML 页面，其中的标题部分带有背景图像。
使用 jspdf 将页面转换为 Html 到 pdf 后，所有内容都会显示背景图像。
看看这个 fiddle https://jsfiddle.net/rmtest/30augcvj/2/
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>
最佳答案
为了回答这个问题，我首先尝试使用较新版本的html2canvas(1.0.0-rc.5)来看看是否有添加背景图片的功能。尽管进行了多次尝试，我还是很不幸。这是我的一个解决方案(更正确地定义为解决方法):
由于库考虑的唯一属性是背景颜色，因此我们不能直接将图像放入 CSS 中。此时的解决方案是直接将图像插入 jsPDF 并在其顶部写入标题或其他文本。
只有当 header 几乎总是相同时，此解决方案才可能且方便。
var imgData = 'data:image/jpeg;base64,'+ Base64.encode('your-image.jpeg');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
然后可以通过 addHTML 添加其余内容，同时考虑文本相对于图像的坐标。
关于javascript - JSPDF addHTML 不显示背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59086813/