web-dev-qa-db-ja.com

html2canvasとjspdfを使用して適切かつ簡単な方法でpdfにエクスポートする方法

私は現在、学校管理ソフトウェアに取り組んでいます。通常、data tablesおよびdiv tag。

できればcssを使用して、HTMLデータを適切にエクスポートできるコードを作成するためのあらゆる手段を試しました。ここでいくつかの質問と回答を確認した後、spdfを使用してみましたが、うまくいきませんでした。

テーブルの配置が破壊され続けるので、html2canvasしかし、jspdfで実装するのが私の問題でした。html2canvasキャンバスをjspdfに送信して、キャンバスをPDFとしてエクスポートします。

以下は私のコードです：

<script src="assets/js/pdfconvert/jspdf.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js">  </script>
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script>
<script src="assets/js/pdfconvert/filesaver.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script>
<script src="assets/js/pdfconvert/html2canvas.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script>

ここにjsコードがあります

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

あなたのためにjsfiddleを作成しました。

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>

'

        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

jsfiddle： http://jsfiddle.net/rpaul/p4s5k59s/5/

Chrome38、IE11、Firefox 33でテスト済み。Safariで問題があるようです。しかし、Mac OSx上のSafari 8では、PNGからJPEGに切り替えることでAndrewが動作するようになりました。詳細については、以下の彼のコメントを参照してください。

20
Razan Paul

これは、dpi/resolution調整でページ上の選択された要素のみを印刷する方法を示しています

HTML：

<html>

  <body>
    <header>This is the header</header>
    <div id="content">
      This is the element you only want to capture
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>
  </body>

</html>

CSS：

body {
  background: beige;
}

header {
  background: red;
}

footer {
  background: blue;
}

#content {
  background: yellow;
  width: 70%;
  height: 100px;
  margin: 50px auto;
  border: 1px solid orange;
  padding: 20px;
}

JS：

$('#print').click(function() {

  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {
    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.save('sample-file.pdf');
    }
  });
});

jsfiddle： https://jsfiddle.net/marksalvania/dum8bfco/

4
Mark Salvania