jqueryを使用してPDF形式の結果をプリントする方法

Question

PDFのHTMLページを入手したいと思います。

いくつかの研究の後、私はpdfJSプラグインを見つけ、それはブートストラップといくつかの問題を抱えている、レイアウトが乱雑になり、ここで

http://jsfiddle.net/5ud8jkvf/

は、私はPDF結果として、デフォルトの印刷を見つけフィドル

です偉大

var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
     return true; 
    } 
}; 

$('#cmd').click(function() { 
    doc.fromHTML($('#content').html(), 15, 15, { 
     'width': 170, 
      'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-file.pdf'); 
}); 

です0

それで、pdfJSの問題を修正するのではなく、pdfとしてpdfを入手するhtml/jqueryの方法があるのだろうか。

HTMLをPDFに変換する必要がありますが、1ページのみの申込書で、おかげでたくさん

Answer 1

現在のバージョンでは、blobまたはpdfのarraybufferを取得できます。あなたがしなければならない唯一のことは、ライブラリの1.2.xの0.9から更新し、あなたがDataTablesのjQueryを使用することができますFormat.So PDFにテーブルのデータを印刷しようとしているようです。この

var myBlob; 

$('#cmd').click(function() { 
    doc.fromHTML($('#content').html(), 15, 15, { 
     'width': 170, 
      'elementHandlers': specialElementHandlers 
    }); 
    myBlob = doc.save('blob'); 
}); 

Answer 2

あなたがhtml2canvasを（それが適用されるスタイルを計算し、DOMを解析します）試すことができますように。

(function(){ 
var 
form = $('.form'), 
cache_width = form.width(), 
a4 =[ 595.28, 841.89]; // for a4 size paper width and height 

$('#create_pdf').on('click',function(){ 
$('body').scrollTop(0); 
createPDF(); 
}); 
//create pdf 
function createPDF(){ 
getCanvas().then(function(canvas){ 
    var 
    img = canvas.toDataURL("image/png"), 
    doc = new jsPDF({ 
      unit:'px', 
      format:'a4' 
     });  
     doc.addImage(img, 'JPEG', 20, 20); 
     doc.save('techumber-html-to-pdf.pdf'); 
     form.width(cache_width); 
}); 
} 

// create canvas object 
function getCanvas(){ 
form.width((a4[0]*1.33333) -80).css('max-width','none'); 
return html2canvas(form,{ 
    imageTimeout:2000, 
    removeContainer:true 
    }); 
} 

}()); 

これが見つかりましたhereです。詳しい情報が必要な場合はリンクを確認してください。

Answer 3

のようにsaveを呼び出すことですプラグイン。

データシートは、PDFボタンを使用できるbuttonライブラリを提供します。HTML5とFlashの両方のサポートとボタンタイプで、FlashとHTMLのボタンオプションが自動的に選択されます。

$('#myTable').DataTable({ 
buttons: [ 
    'pdf' 
] 
}); 

その、あまりにもエクスポート機能を優れて提供し、あなただけのexcelボタンを追加する必要があります。

$('#myTable').DataTable({ 
buttons: [ 
    'copy', 'excel', 'pdf' 
] 
}); 

私はすでにアプリケーションで使用していますが、ブートストラップと競合しません。

Answer 4

試してみてください。jsPDF-AutoTable (jsPDF plugin)を試してください。これは、必要に応じてHTMLからPDFに変換するのに役立ちます。 demo