web-dev-qa-db-ja.com

PDF jqueryを使用した結果として印刷を取得する方法

HTMLページをPDFで取得したいのですが。

いくつかの調査を行った後、pdfJSプラグインを見つけました。bootstrapで問題があり、レイアウトが乱雑になります

http://jsfiddle.net/5ud8jkvf/

ここがフィドルです

PDF結果は素晴らしいです。

enter image description here

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

したがって、pdfJSの問題を修正する代わりに、pdfとして印刷からpdfを取得するhtml/jqueryの方法はあるのでしょうか。

HTMLはPDFに変換する必要があります。1ページのアプリケーションフォームのみです。どうもありがとうございます。

javascriptjqueryhtmlcsspdf
23
user782104

現在のバージョンでは、pdfの blob または arraybuffer を取得できます。あなたがしなければならない唯一のことは、ライブラリの0.9から1.2.xに更新し、このようにsaveを呼び出すことです

var myBlob;

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

テーブルデータをPDF Format。で印刷しようとしているようです。 DataTables jQueryプラグインを使用できます。

データテーブルは button ライブラリを提供し、その中でPDFボタンを使用できます。 HTML5とFlashの両方をサポートし、ボタンタイプはFlashおよびHTMLボタンオプションから自動的に選択します。

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

Excelエクスポート機能も提供しています。Excelボタンを追加するだけです。

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

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

2
Mohd Sayeed

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

}());

私はこれを発見しました ここ 。詳細については、リンクを確認してください。

2
vijaykumar

jsPDF-AutoTable（jsPDFプラグイン） を試してみてください。これは、PDF HTMLから必要に応じて変換するのに役立ちます。 demo を確認してください。

1
Raj_King