2013-10-31 27 views
12

Sto lavorando in HTML5 e utilizzo canvas come strumento di progettazione. Tuttavia, desidero salvare la mia tela in un file jpeg come predefinito è image/png e voglio mostrare l'anteprima della mia tela in un PDF.HTML5 canvas to PDF

Spero di ricevere presto l'aiuto.

+0

Possibile duplicato di http://stackoverflow.com/questions/13201679/export-canvas-content-to-pdf –

+0

Ho attraversato quel collegamento che @paul pensa di dare la soluzione per la mia richiesta. Ma ho esaminato l'intera soluzione per questa domanda, ma non ho ottenuto una soluzione fattibile. Quindi sto chiedendo qui per ottenere una soluzione particolare e funzionante. – justin

risposta

19

Un buon approccio consiste nell'utilizzare la combinazione di jspdf.js e html2canvas.

<canvas id="canvas" width="480" height="320"></canvas> 
     <button id="download">Download Pdf</button> 

'

 html2canvas($("#canvas"), { 
      onrendered: function(canvas) {   
       var imgData = canvas.toDataURL(
        'image/png');    
       var doc = new jsPDF('p', 'mm'); 
       doc.addImage(imgData, 'PNG', 10, 10); 
       doc.save('sample-file.pdf'); 
      } 
     }); 

jsfiddle: http://jsfiddle.net/p4s5k59s/1222/

Testato in Chrome 38, IE11 e Firefox 34. Per Safari, potrebbe essere necessario cambiare il formato immagine JPEG fron PNG.

+1

Questo è davvero un buon modo per sezioni css complesse – cycopepe

+1

@Blizzard, questo è l'esempio perfetto. Semplice, azionato da un pulsante, facile da capire. (Perché non è la parte superiore degli esempi di github per jspdf?) Facilmente visualizzato in jsfiddle. Grazie molto. – zipzit

+0

Questa libreria non sembra essere più aggiornata, questo si blocca sul mio browser e ci sono più problemi aperti relativi agli arresti anomali. –