Jspdf对齐/布局不工作

Question

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

这是我的运行代码..。

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

您可以看到输出(下面)与PDF..There不同，没有边框和对齐。

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

这就是它的外观(您也可以在这里看到我的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的html2canvas一样，html2canvas几乎不懂CSS。主要的区别是html2canvas可以访问浏览器所做的布局。
2. 图像只有96 low，造成低质量。
3. 结果PDF会比较大。

现在，这是我最好的HTML到PDF解决方案。为了获得更好的结果，我将手动构建PDF (没有HTML)。

只要在StackOverflow的代码片段中运行，我就无法在新窗口或下载中打开这个pdf链接。如果将代码放在其他地方，您可以像这样调用pdf.save：http://jsfiddle.net/xwksc4ku/1