Jspdf Выравнивание/макет не работает

Question

я делаю в HTML для преобразования PDF-файл с jspdf

Вот мой код работает ...

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

Вы можете увидеть результат (ниже) отличается из PDF. Нет границ и выравнивания.

Я не в состоянии достигнуть простой макет/выравнивание, отступы/поплавок и т.д ..

Вот как это должно выглядеть (вы также можете увидеть здесь мой Html код)

http://screencast.com/t/xE6fbJKrA9m

Но когда я Получить PDF этого из jspdf выглядит как этот

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

HTML плагин jsPDF не поддерживает большинство 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> 
 
\t <h1>Invoice</h1> 
 
\t <div><div class="b_top">Invoice #</div><div>00001-2</div></div> 
 
\t <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>

Идея заключается в том, делает HTML на холсте с помощью html2canvas, затем поместить скриншот в формате PDF. Это не идеально, но, по крайней мере, элементы будут в правильных положениях и выравниваниях.

Недостатки:

1. Как HTML визуализатор jsPDF, в html2canvas понять несколько CSS. Основное различие заключается в том, что html2canvas может получить доступ к макету, сделанному браузером.
2. Изображение имеет только 96 точек на дюйм, что приводит к низкому качеству.
3. Результат 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 StackOverflow's Code snippet. If you put the code elsewhere you can call pdf.save like this fiddle: http://jsfiddle.net/xwksc4ku/1