web-dev-qa-db-ja.com

エクスポートPDF jspdfでCSSをレンダリングしない

私はjspdf.debug.jsを使用してウェブサイトから異なるデータをエクスポートしていますが、いくつかの問題があり、エクスポートされたPDFでCSSをレンダリングすることができませんエクスポートしているページの画像、PDFは空白を返します...

誰もこれを修正する方法を知っていますか？

jsfiddle は、CSSをレンダリングしていないことを示しています

そして私のスクリプト

$(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 );
})
});
jquerycssrenderingjspdf
26
Alin

私が知っているように、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()が見つからない場合は この行 を参照してください

22
Mihir

jspdfはcssでは機能しませんが、html2canvasで機能します。 jspdfをhtml2canvasとともに使用できます。

ページのスクリプトにこれらの2つのファイルを含めます。

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

https://github.com/niklasvh/html2canvas/releaseshttps://cdnjs.com/libraries/jspdf などのスクリプトファイルをダウンロードする必要があります。

ページ上でクリック可能なボタンを作成すると、pdfが生成され、元のhtmlページと同じように表示されます。

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

完璧に機能します。

13
Bhinal Chauhan

次のリンクでjspdfを使用して、css実装HTMLからPDFへの変換の例を取得できます。 JSFiddle Link

これは、jspdf html to pdfダウンロードのサンプルコードです。

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

@ rejesh-yadavのすばらしい回答へのわずかな変更。

html2canvasがpromiseを返すようになりました。

    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');        
    });

これが役に立つことを願っています！

0
user3180664