jsPDF黑色背景和错误的样式

时间:2018-08-20 19:33:33

标签: javascript jspdf

我希望将HTML页面的一部分转换为pdf,并正在使用jsPDF。当我下载pdf时,所有样式都弄乱了,图片也不会显示。它也显示为黑色背景。

这里是显示的图片

enter image description here

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
<div id="content">
<h1>Title</h1>
<p><strong>Bold</strong> aaaaaaaa ddddddd gggggg jjjjjj</p>
<p style="color: blue;">bluye blue</p>
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12233437/Entlebucher-Mountain-Dog-On-White-01.jpg" width="300px" height="200px"/>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>

<button onclick="generatePDF()">generate PDF</button>

CSS

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

JavaScript

  var doc = new jsPDF();
  doc.addHTML(document.getElementById('content'),function() {
      doc.save('html.pdf');
  });

提琴:http://jsfiddle.net/La85762t/

0 个答案:

没有答案