使用jspdf創建的PDF文件太大太大

我在瀏覽器中使用jspdf創建PDF。我有多個圖表svg作爲圖表數據。爲了向pdf中添加數據，我使用canvas將svg轉換爲png，然後使用canvas.toDataURL方法將Base64數據轉換成png。在由jspdf創建的文件的所有這些轉換大小很大（大約50 MB）之後。以下是圖表數據和畫布div的代碼。下面使用jspdf創建的PDF文件太大太大

newdiv = document.createElement("div"); 
newdiv.className = "big_Con_graph big_Con_graph0"; 
newdiv.style.height = "0px"; 
newdiv.id = "big_Con_graph" + id;

爲SVG圖表負載的尺寸。

document.getElementById("big_Con_graph" + id).style.display = "block"; 
var big_chartReference = FusionCharts("big_myChartId"+id); 
if(big_chartReference != null){ 
    big_chartReference.dispose(); 
} 
var big_width = "1088"; 
var big_height = "604";

現在下面爲上述圖SVG數據的轉換和添加到PDF的代碼。

var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true); 
svgString = $(elem_graph).find("span").html(); 
var img = document.createElement('img'); 
var DOMURL = self.URL || self.webkitURL || self; 
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName); 
img.src = url;

這是PDFAfterImageLoad函數的代碼：我使用PNG

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 
var png = canvas.toDataURL("image/png"); 
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

，所以不能使用IMAGEQUALITY參數。

任何人都可以幫助我減小文件大小？

來源

2016-06-07 Asha Koshti

您是否轉換爲base64，因爲jspdf需要？ – YakovL

我沒有通過單擊按鈕獲取svg數據並將其轉換爲png的圖像存儲在我的結尾，因此整個過程需要base64數據.even我不能將所有圖形數據存儲在客戶端存儲。 –

我明白了。你爲什麼用png代替jpeg？使用帶質量修飾符的jpeg會有所幫助（請參閱https：// developer。mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL） – YakovL

您需要使用壓縮所生成的PDF中的圖像。嘗試使用Deflate.js和adler32cs.js，並在您使用的jsPDF和addImage函數中使用compress參數。對於如：

var doc = new jsPDF('p', 'pt','a4',true);

確保您設置的最後一個參數爲「真」是指：https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

通過它，你可以清楚地看到，最後一個參數是啓用壓縮。

還可以使用：的

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

代替

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

可以NONE，速度快，中，慢之間選擇，哪個適合你。

來源

2016-06-20 06:12:12 hkm93

這個工程。在底部獲得一條邊界線 - 使用jspdf addimag。如何刪除該行 – Lini

反正水平線不打印在紙上。 – Lini

我正在從自定義圖形創建PDF。我能夠使用jspdf生成pdf。但是網頁上圖形和字體顏色的顏色正在複製到PDF上。（圖形中缺少箱陰影效果，圖形看起來模糊）。我該如何解決它。？ –

你試過canvg？這不太可能會減少文件大小，但至少可以嘗試。

查看this reply中的片段。

來源

2016-06-15 17:28:14 YakovL

是的，我已經使用canvg爲IE和Safari瀏覽器，但它與任何文件大小減少有關。 –

如果添加多個圖像到一個文檔，使用

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');

不

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

否則第一個圖像將取代所有其他人。

來源

2016-12-09 21:13:31

是的，它只是給出的例子，pdf.addImage（png，'PNG'，leftmargin，120,485,270，undefined，'FAST'）; 在那個未定義的，你必須指定不同的名稱，每當你添加image.as每個API它是別名，它必須是唯一的每個圖像。 –

剛開始說上面的例子，我的4Mb PDF（11頁，每頁有10個圖表）下降到977kb。非常感謝你這個提示！ – JasonMHirst

使用jspdf創建的PDF文件太大太大

回答

相關問題