HTML 为包含 CSS 的 PDF

Question

我正在寻找一种使用 jsPDF 将我的页面转换为 PDF 文档的方法，但目前我无法转换任何 CSS 样式。只有文字，没有图形。

这是我目前使用的代码

    var specialElementHandlers = {
        '#ignorePDF': function (element,renderer) {
            return true;
        }
    };

    var doc = new jsPDF();

    doc.fromHTML($('#page-with-images').get(0), 20, 20, {'width': 500, 'elementHandlers': specialElementHandlers,});
    doc.save("Test.pdf");

但是结果不是我想要的，因为没有包含样式。我该如何解决这个问题？

Answer 1

试试这个。

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#content"), function() {
  var output = pdf.output("datauristring");
  alert(output);
  //pdf.output("datauri"); //This will output the PDF in a new window
});

div {
  width: 100%;
  background-color: lightblue;
  padding: 15px;
  border: 2px solid black;
}

p {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<body>
  <div id="content">
    <div>
      <div>
        <div>
          <div>
            <p id="to-pdf">HTML content...</p>  
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

HTML 为包含 CSS 的 PDF

HTML to PDF with CSS included

html

javascript

pdf

jquery

jspdf