Jspdf 对齐/布局不起作用

Question

我正在使用 jspdfHTML 进行 pdf 转换

这是我的运行代码...

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

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

我无法实现简单的布局/对齐，padding/float 等。

它应该是这样的（你也可以在这里看到我的 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 Whosebug 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 渲染到 canvas 上，然后将屏幕截图转换为 PDF。这并不完美，但至少元素将处于正确的位置和对齐方式。

缺点：

像 jsPDF 的 HTML 渲染器，html2canvas 理解很少 CSS。主要区别在于html2canvas可以访问浏览器所做的布局。
图片只有96dpi，导致画质不佳。
结果PDF会比较大

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

I cannot get the pdf link in this example to open in new window or download, as long as it is ran in Whosebug's Code snippet. If you put the code elsewhere you can call pdf.save like this fiddle: http://jsfiddle.net/xwksc4ku/1

Jspdf 对齐/布局不起作用

Jspdf Alignment/ layout not working

javascript

pdf-generation

jspdf