ブラウザ内でPDFを作成するためにjspdfを使用しています。グラフデータとしてsvgを持つ複数のグラフがあります。pdfにデータを追加するためにcanvas.toDataURL
方法。このすべての変換後、jspdfによって作成されたファイルのサイズは巨大です(約50 MB)。以下は、チャートデータとキャンバスのdivのコードです。
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関数のコードです:
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);
Pngを使用しているため、imagequalityパラメーターを使用できません。
誰でもファイルサイズを小さくするのを手伝ってもらえますか?
生成するPDFの画像を圧縮する必要があります。 Deflate.jsとadler32cs.jsを使用してみて、使用しているjsPDF関数とaddImage関数の両方でcompressパラメーターを使用してください。例えば:
var doc = new jsPDF('p', 'pt','a4',true);
最後のパラメーターを必ず「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、FAST、MEDIUM、SLOWのいずれかを選択できます。
1つのドキュメントに複数の画像を追加する場合は、使用します
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');
じゃない
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');
そうしないと、最初の画像が他のすべての画像に置き換わります。
canvg
を試しましたか?ファイルサイズが小さくなる可能性はあまりありませんが、少なくとも試してみてください。
this reply のスニペットをご覧ください。
私の場合、compressパラメーターは機能しませんでした。そこで、次の機能を使用して、現在の画像のサイズを自分で変更しました。
function resizeBase64Img(base64, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var deferred = $.Deferred();
$("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
context.scale(width/this.width, height/this.height);
context.drawImage(this, 0, 0);
deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));
});
return deferred.promise();
}
そして、次のように呼び出します。
//select my image in base64
var imageStr64 = "/9j/4RiDRXhpZgAATU0AKgA...";
//resize image, add image and create the pdf
resizeBase64Img(imageStr64, 1000, 1000).then(function(newImg){
doc.addImage($(newImg).attr('src'), 15, 90, 180,180);
doc.save('mypdf.pdf');
});
ResizeBase64Img関数の「width」および「height」パラメーターを使用して、より良いまたは最悪の画質で重いpdfを生成できます。