從javascript庫生成優質pdf的問題：jspdf和html2canvas

那麼，我正在研究一個產生pdf輸出的實用工具。數據是從用戶提取的，經過一些操作轉換爲預定義的格式，然後以.pdf格式需要，所有css都完好無損。從javascript庫生成優質pdf的問題：jspdf和html2canvas

它是一個完全客戶端應用程序。

我爲此使用jsPdf + html2canvas。但我有以下擔憂：

首先，也找不到任何API文檔。我仍在使用各種網站上發現的代碼。無論如何，我已經實現了產量的質量遠未達到預期。
當我的HTML文檔大到可以佔用多個頁面時，我仍然只獲得第一頁的pdf。（這個，我猜是因爲我缺乏知識，再次是因爲缺少文檔。）

我看過了，還有很多類似的問題。我嘗試了幾乎所有的人，幾乎沒有人工作，很少觸發一些錯誤，我仍然卡住。

所以我的查詢：

是我的選擇，適合生產優質PDF（它是如何在屏幕上可見ATLEAST 80％-90％）。如果有人能夠指導我使用jspdf和html2canvas的高質量輸出作品，我們將會非常感激。
請指導有關這些庫的正確文檔。我目前所擁有的doc文件夾是在github中的zip文件中提供的，這當然不足以充分利用它。
如果這種方法不可行，請直接更好的產品。質量是我們的首要要求，性能可以協商。準備好付費圖書館。但更喜歡客戶端工具（因爲實際上不需要服務器端實現）。

我張貼上面的查詢問題，但萬一需要，我的代碼：

function previewCtrlFn($scope, Database){ 
     var vm = this; 
     vm.resume = Database.resume; 
     console.log(angular.toJson(vm.resume)); 
     vm.pdf = createPDF; 

     var form = $('#aa'), 
      width = form.width(), 
      a4 =[ 615.28, 841.89]; 

     function createPDF(){ 
     getCanvas().then(function(canvas){ 
      var 
      img = canvas.toDataURL("image/png"), 
      doc = new jsPDF({ 
        unit:'px', 
        format:'a4' 
       });  
     doc.addImage(img, 'JPEG', 5, 5); 
     doc.save('resume.pdf'); 
     form.width(width); 
     }); 
     } 

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

我真的需要這方面的一些快速幫助。

來源

2016-07-26 Saurabh Tiwari

您可以使用此代碼，您的PDF的大小和質量將提高

html2canvas(body,{ 
    onrendered:function(canvas){ 
     var img=canvas.toDataURL("image/png"); 
     console.dir(canvas); 
     var pdf=new jsPDF("p", "mm", "a4"); 
     var width = pdf.internal.pageSize.width;  
     var height = pdf.internal.pageSize.height; 
     pdf.addImage(canvas, 'JPEG', 0, 0,width,height); 
     pdf.save('test11.pdf'); 
    } 
})

來源

2016-09-09 12:18:13

從javascript庫生成優質pdf的問題：jspdf和html2canvas

回答

相關問題