JQuery

2016-05-13 16 views
22

kullanarak PDF sonucu yazdırması nasıl yapılır? HTML sayfasını PDF'de almak istiyorum. Bu bootstrap ile bazı sorun var ben pdfJS eklentisi buldum bazı çalışmalardan sonraJQuery

, düzen burada

http://jsfiddle.net/5ud8jkvf/

Ben PDF sonucu varsayılan izi bulduk keman

olan dağınık olacak Büyük

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'); 
}); 
olduğunu 0

Yani, pdfJS için sorunu düzeltmek yerine, pdf olarak pdf elde etmek için html/jquery yolu var merak ediyorum.

HTML

çok

+2

'a bakın. Aynı gereksinime de ihtiyacım var – Nagaraju

+1

Soruya "html" yi ekleyebilir misiniz? – guest271314

+0

@ user782104 bootstrap ve jstopdf ile karşılaştığınız sorunu belirtebilir misiniz? –

cevap

3

Geçerli sürüm, pdf dosyasının blob veya arraybuffer olmasını sağlar. Yapmanız gereken tek şey kütüphanenin 1.2.x 0,9 ila güncelleme ve O size DataTables jQuery kullanabilirsiniz Format.So PDF içine tablo verileri yazdırmak için çalışıyoruz görünüyor bu

var myBlob; 

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

sen (O DOM ayrıştırmak uygulanan stilleri hesaplayın olacak) html2canvas deneyebilirsiniz olabilir, PDF yalnızca bir sayfa uygulama şeklidir dönüştürmek sayesinde gerekir.

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

}()); 

Bu here buldum. Daha fazla bilgi istiyorsanız lütfen bağlantıyı kontrol edin.

2

gibi tasarruf çağırmaktır Eklenti.

Veritabanları, PDF düğmesini kullanabileceğiniz button kütüphanesini sağlar. Hem HTML5 hem de Flash ve düğme tipindeki desteği, Flash ve HTML düğmesi seçenekleri arasında otomatik olarak seçim yapar.

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

Onun da ihracat özelliği excel sağlamak sadece excel düğme eklemek gerekir.

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

Zaten kullandığımız uygulamada bootstrap ile herhangi bir çakışma olmayacaktır.