2017-09-14 1 views
0

Ich möchte die aktuelle Seite in pdf per Button-Klick herunterladen, verwendete ich das html2canvas Konzept und hier ist der BeispielcodeEntfernen Sie die Grenze für Bild von pdf in Chrom geöffnet

$("#btnPdf").click(function(){ 

    var dt = new Date(); 
    var day = dt.getDate(); 
    var month = dt.getMonth() + 1; 
    var year = dt.getFullYear(); 
    var hour = dt.getHours(); 
    var mins = dt.getMinutes(); 
    var postfix = month + "-" + day + "-" + year + "_" + hour + ":" + mins; 
    var docs = 'dd'+ postfix; 



    html2canvas(document.getElementById("main-div"), { 
     onrendered: function(canvas) { 

      var width = canvas.width; 
      var height = canvas.height; 
      var millimeters = {}; 
      millimeters.width = Math.floor(width * 0.264583); 
      millimeters.height = Math.floor(height * 0.264583); 


      var imgData = canvas.toDataURL('image/png',1.0); 
      console.log('Report Image URL: '+imgData); 

      var doc = new jsPDF('p', 'mm', "a4"); //210mm wide and 297mm high 
      doc.deletePage(1); 
      doc.addPage(millimeters.width, millimeters.height); 
      doc.addImage(imgData, 'png',0,0); 
      doc.save(docs+'.pdf'); 
     }, 

    }); 

}); 

und arbeitet fine.I bin immer die Grenzen für das Bild der aktuellen Seite in pdf nur, wenn Sie die PDF in Chrom öffnen, aber ich habe keine Grenze in PDF beim Öffnen in Adobe, Firefox usw. Aber das Problem ist in Chrom. Bitte irgendwelche Vorschläge, wie Sie den Rahmen für die Bilder in PDF in Chrom geöffnet entfernen. Vielen Dank im Voraus

Antwort

1

Ich glaube, Ihre Frage ist:

Wie HTML-Stil, wenn speichern Sie es als pdf von Chrom „Seite drucken“ kontrollieren?

Vielleicht können Sie zuerst img Stil über chrome "Element" pannel oder per Javascript, entfernen Sie img Grenze, dann Aufruf save API.

PS:

Soweit ich weiß, etwas Chrom tun, wenn der Druck Seite als pdf-Komplex ist.

Zum Beispiel, es muss Seiteninhalt (Pixel) in PDF-Größe (a4/a3/a2) zu transformieren, das entscheidet pdf Typograph.

Einige Webdesigner passen die Arbeit an Drucksachen an, indem sie ein <link> Element mit dem Attribut media="print" hinzufügen. Diese Style-Datei wirkt sich nur beim Drucken aus.