2017-11-17 6 views
3

特定のdivをPDFやJPGとして印刷したいと考えています。 phantomjsを実行している間、私は、次のコードを使用:Webページの特定のdivをpdfとして印刷する方法はありますか?

var bb = page.evaluate(function() { 
    return document.getElementsByTagName("fieldset")[7].getBoundingClientRect(); 
}); 

page.clipRect = { 
    top: bb.top, 
    left: bb.left, 
    width: bb.width, 
    height: bb.height 
}; 

これは、PNGのために正常に動作しますが、PDFのためにそれだけでページ全体を印刷します。なぜこれが起こっているのか、どうやって解決するのか誰にも分かりますか?誰かがこれを解決するための他の方法を知っていれば、たとえファントムジやそれに直面している解決策に関与していないものさえあれば、私は彼らが共有すれば義務づけられます。私はこの問題の回避策を探しています

編集は、任意のフロントエンドまたはバックエンドのソリューションは、このトピックに関する以前の質問のいくつかはhtml2canvasまたはjsPdf伴う提案を提供しますが、それらは非常に任意の解像度に問題があるacceptable.Howeverあります他の答えの解決策が評価されます。

+1

可能な複製(https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-使用して - javascript) –

答えて

3

私はdivをPDFに送信する必要がありますが、私はこのコードを使用して問題なく動作します。 (JQueryが必要です)。 [DIV Javascriptを使用してHTMLからPDFを生成]の

function testPdf(){ 
 
    
 
    //send the div to PDF 
 
    html2canvas($("#DIV_ID_HERE"), { // DIV ID HERE 
 
     onrendered: function(canvas) { 
 
      var imgData = canvas.toDataURL('image/png'); 
 
      var doc = new jsPDF('landscape'); 
 
      doc.addImage(imgData, 'PDF', 10, 10); 
 
      doc.save('sample-file.pdf'); //SAVE PDF FILE 
 
     } 
 
    }); 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 

 
<div id="DIV_ID_HERE"> 
 
    
 
Test - This div to pdf 
 
<br><input type="button" value="print" onclick="testPdf();"> 
 
<div>

+1

ありがとう、私のために働いてこれの変形! –

+0

あなたは大歓迎です:) – sergioBertolazzo

関連する問題