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

Я делаю преобразование 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>

javascript jspdf pdf-generation
person junaidp    schedule 09.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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>
	<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>

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

Недостатки:

  1. Как и визуализатор HTML в jsPDF, html2canvas немного понимает CSS. Основное отличие состоит в том, что html2canvas может получить доступ к макету, созданному браузером.
  2. Изображение имеет только 96 точек на дюйм, что приводит к низкому качеству.
  3. Результат PDF будет относительно большим.

На данный момент это мое лучшее решение для преобразования HTML в PDF. Чтобы получить лучший результат, я вручную создам PDF (без HTML).

Я не могу получить ссылку pdf в этом примере, чтобы открыть ее в новом окне или загрузить, если она запущена во фрагменте кода StackOverflow. Если вы поместите код в другое место, вы можете вызвать pdf.save как эту скрипту: http://jsfiddle.net/xwksc4ku/1

person Sheepy    schedule 12.02.2015
comment
спасибо за помощь, в вашем коде jspdf/javascript .. где мы сообщаем источник html...... Если я заменю ваш код javascript/jspdf моим, он говорит, что $ is undefined - person junaidp; 12.02.2015
comment
@junaidp $ происходит из jQuery. $ равно undefined означает, что jQuery еще не загружен. В фрагменте кода JS запускается в конце, после трех <script>, поэтому, если вы поместите js раньше, вы также должны переместить вверх <script>. - person Sheepy; 12.02.2015
comment
В настоящее время я получаю, что html2canvas не определен. Я скачал и поместил html2canvas.js и html2canvas.min.js в свою военную папку и добавил внутрь html... ‹script type=text/javascript src=html2canvas.min.js› ‹/скрипт› - person junaidp; 12.02.2015
comment
@junaidp В jsFiddle играть проще: jsfiddle.net/xwksc4ku/1 (проверено в IE 11, Chrome 40, Firefox 35). Вполне вероятно, что в вашем коде есть другие ошибки, обусловленные качеством кода ссылки Codepen, и они могут выходить за рамки этого вопроса. - person Sheepy; 12.02.2015
comment
точно так же, как и вы, и добавляя те же библиотеки. Это говорит.. Uncaught TypeError: Не удается прочитать свойство «длина» нулевого значения: на этом снимке экрана.. Пожалуйста, посмотрите на скриншот.. screencast.com/t/sh0TS4Va ::screencast.com/t/9bBuLysL5h : :: - person junaidp; 12.02.2015
comment
@junaidp Если вы не можете воспроизвести это на jsfiddle, я тоже не смогу воспроизвести ошибку ... - person Sheepy; 12.02.2015