JSPDF addHTML 不显示背景图片

Question

我有一个简单的 HTML 页面，其中 header 部分有背景图片。

使用 jspdf 将页面 Html 转换为 pdf 后，所有内容显示都需要背景图片。

看看这个小提琴 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>

Answer 1

为了回答这个问题，我首先尝试使用较新版本的html2canvas（1.0.0-rc.5），看看是否有添加背景图片的功能。尽管进行了多次尝试，但我并不走运。这是我的一个解决方案（更正确地定义为解决方法）：

由于库考虑的唯一属性是 background-color，我们不能直接将图像放在 css 中。这时一个解决方案是将图片直接插入到jsPDF中，并在上面写上标题或其他文字。

只有在 header 几乎总是相同的情况下，此解决方案才可能且方便。

var imgData = 'data:image/jpeg;base64,'+ Base64.encode('your-image.jpeg');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

然后可以通过 addHTML 添加其余内容，同时考虑文本相对于图像坐标的坐标。

JSPDF addHTML 不显示背景图片

JSPDF addHTML not showing background image

javascript

jquery

pdf-generation

jspdf