Jspdf对齐/布局不起作用

Question

我正在使用 jspdf 进行 HTML 到 pdf 的转换

这是我的运行代码...

http://codepen.io/anon/pen/dPZaYN

您可以看到输出（下图）与 PDF 不同。没有边框和对齐方式。

我无法实现简单的布局/对齐、填充/浮动等。

这就是它的外观（您也可以在这里查看我的 Html 代码）

http://screencast.com/t/xE6fbJKrA9m

但是当我从 jspdf 获取这个的 pdf 时，它看起来像这样

http://screencast.com/t/z8cizeY9

这是我的 jspdf 代码..

     var doc = $wnd.jsPDF('p', 'pt', 'a4', true);
   var source = $('#content').first();
   var specialElementHandlers = {
      '#bypassme': function (element, renderer) {
          return true;
      }
  };
   doc.fromHTML(
      htmltest, 
     {
          'elementHandlers': specialElementHandlers
      });

  doc.save('Test.pdf');

这是我的头

           <script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/jspdf.min.js"></script> 


<script type="text/javascript" src="jspdf/jquery-1.11.2.min.js"></script>
 <script type="text/javascript" src="jspdf/libs/adler32cs.js"></script>
  <script type="text/javascript" src="jspdf/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>

Answer 1

jsPDF 的 html 插件不支持大多数 css。但不要绝望，这里有一个变通方法。

试试看：

$( 'a' ).hide();
html2canvas( document.body, { onrendered : function( canvas ) { 'use strict';
  var pdf = new jsPDF(), border = 10, width = 210-border*2;
  pdf.addImage( canvas.toDataURL( 'image/jpeg' , 0.98 ), 'JPEG',
                border, border, width, canvas.height*width/canvas.width );
  // pdf.save() does not work on StackOverflow because of cross origin restriction
  $('a').show()[0].href = pdf.output( 'dataurlstring' );
  // IE 11 does not allow datauri pdf, use save() instead
} } );

body{font:12px "Times New Roman",serif;}h1{font-size:24px;line-height:24px;font-weight:bold;margin-top:0;text-align:right;margin-bottom:5px;}#render_me > div > div{float:right}#render_me > div > div > div{border-bottom:1px solid black;border-right:1px solid black;padding:3px; text-align:center}.b_top{border-top:1px solid black;}.f_c_b_left:last-child{border-left:1px solid black;}

<a href="#">PDF<br>(Ctrl+Click me or open me in new window)</a>

<div id="render_me"><div>
	<h1>Invoice</h1>
	<div><div class="b_top">Invoice #</div><div>00001-2</div></div>
	<div class="f_c_b_left"><div class="b_top">Date</div><div>2015-02-05</div></div>
</div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src='http://parall.ax/parallax/js/jspdf.js'></script>

想法是，使用html2canvas 将 HTML 渲染到画布上，然后将屏幕截图转换为 PDF。 这并不完美，但至少元素将处于正确的位置和对齐方式。

缺点：

1. 和 jsPDF 的 HTML 渲染器一样，html2canvas 理解的 CSS 很少。主要区别在于 html2canvas 可以访问浏览器所做的布局。
2. 图片只有96dpi，画质低。
3. 结果 PDF 会比较大。

目前，这是我最好的 HTML 到 PDF 解决方案。 为了获得更好的结果，我将手动构建 PDF（不包含 HTML）。

我无法获取此示例中的 pdf 链接以在新窗口中打开或下载，只要它是在 StackOverflow 的 Code sn-p 中运行的。如果您将代码放在其他地方，您可以像这样调用 pdf.save：http://jsfiddle.net/xwksc4ku/1