Экспорт PDF с помощью jspdf not rendering CSS

Я использую jspdf.debug.js для экспорта разных данных с веб-сайта, но есть несколько проблем, я не могу заставить его отображать CSS в экспортированном PDF файле, и если у меня есть изображение на странице, я экспорт, PDF возвращает пустое...

Кто-нибудь знает, как это исправить?

Вот jsfiddle, показывая, что это не отображение CSS

И мой script

$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('.export').get(0) // HTML element
        , 25  // x coord
        , 25  // y coord
        , {
              'width': 550 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
})
});

Ответ 1

Как я знаю, jsPDF не работает с CSS, и с той же проблемой я столкнулся.

Чтобы решить эту проблему, я использовал Html2Canvas. Просто добавьте HTML2Canvas JS, а затем используйте pdf.addHTML() вместо pdf.fromHTML().

Вот мой код (без другого кода):

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });

Удачи!

Изменить: Обратитесь к этой строке, если вы не нашли .addHTML()

Ответ 2

jspdf не работает с css, но может работать вместе с html2canvas. Вы можете использовать jspdf вместе с html2canvas.

включить эти два файла в script на вашей странице:

<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript" src="jspdf.min.js"></script>
  <script type="text/javascript">
  function genPDF()
  {
   html2canvas(document.body,{
   onrendered:function(canvas){

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();
   doc.addImage(img,'JPEG',20,20);
   doc.save('test.pdf');
   }

   });

  }
  </script>

Вам необходимо скачать script файлы, такие как https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

сделайте нажав кнопку на странице, чтобы она создавала PDF, и она будет видна так же, как и исходная страница html.

<a href="javascript:genPDF()">Download PDF</a>

Он будет работать отлично.

Ответ 3

Вы можете получить пример преобразования HTML в PDF с использованием jspdf по следующей ссылке: JSFiddle Link

Это пример кода для загрузки jspdf html в pdf.

$('#print-btn').click(() => {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() {
        pdf.save('web.pdf');
    });
})

Ответ 4

Небольшое изменение в @rejesh-yadav прекрасный ответ.

html2canvas теперь возвращает обещание.

    html2canvas(document.body).then(function (canvas) {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF();
        doc.addImage(img, 'JPEG', 10, 10);
        doc.save('test.pdf');        
    });

Надеюсь, это поможет некоторым!

Ответ 5

Чтобы удалить черный фон, добавьте только цвет фона: белый; в стиле