Ich benutze jsPDF, um HTML in PDF zu konvertieren. In einigen Fällen, in denen HTML SVG-Diagramme enthält, werden einige der Daten in der generierten PDF-Datei dupliziert.Duplizieren von Inhalt in PDF erstellt mit jsPDF
z.B. Wenn die Diagramme Legenden enthalten, werden sie dupliziert. Siehe den Screenshot unten. Ortsnamen und Prozentsätze werden wiederholt.
Unten ist der Code von PDF zu erstellen.
pdf.addHTML($("#page1"), options, function(){
pdf.addPage();
pdf.addHTML($("#page2"), options, function(){
pdf.addPage();
pdf.output('dataurlnewwindow');
});
});
EDIT 1:
Das ist, was ich bisher herausgefunden haben.
<div id="outerDiv">
<div id="pieChart"></div>
</div>
Wenn ich das tue, pdf.addHTML($("#pieChart"), keine hier Probleme.
Aber, wenn ich das tue, pdf.addHTML($("#outerDiv"), dann Etiketten wiederholt erhalten.
und das ist, wie ich meine c3js Charts erzeugen
var pieChart = c3.generate({
bindto: '#pieChart',
EDIT 2: -
Unter meinen ganzen Code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
<script type='text/javascript'>
function replaceAllSVGsWithTempCanvas(elemSelector) {
var svgElements = $(elemSelector).find('svg');
//replace all svgs with a temp canvas
svgElements.each(function() {
var canvas, xml;
// canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
$.each($(this).find('[style*=em]'), function(index, el) {
$(this).css('font-size', getStyle(el, 'font-size'));
});
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
//convert SVG into a XML string
xml = (new XMLSerializer()).serializeToString(this);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
//hide the SVG element
$(this).attr('class', 'tempHide');
$(this).hide();
});
}
jQuery(document).ready(function($) {
genChart();
});
function genPDF() {
var options = {
background: '#fff'
};
var pdf = new jsPDF('p', 'pt', 'a4');
replaceAllSVGsWithTempCanvas(".content");
pdf.addHTML($("#chartOuter"), options, function() {
pdf.output('dataurlnewwindow');
$(".content").find('.screenShotTempCanvas').remove();
$(".content").find('.tempHide').show().removeClass('tempHide');
});
}
function genChart() {
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type: 'pie'
}
});
}
</script>
</head>
<body class="content">
<table width="100%">
<tr>
<td width="50%">
<div id="chartOuter">
<div id="chart"></div>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<input type="button" onclick="genPDF();" value="Generate PDF" />
</td>
</tr>
</table>
</body>
</html>
EDIT 3: -
Ich habe gerade versucht, die Umwandlung mit Hilfe von HTML html2canvas auf der Leinwand. Es gibt auch das gleiche Problem.
bearbeitet 4:
Ich konnte nun das doppelte Problem beheben. Aber die Diagramme und der Text, die in pdf geschrieben sind, sind ein wenig verschwommen. Im Grunde genommen habe ich die Funktion replaceAllSVGsWithTempCanvas hinzugefügt und verwende sie dann beim Schreiben in PDF. Aber es scheint, dass diese Funktion zum HTML schmilzt, das Inhalt zum pdf verschwommen macht. In der Tat sind Kreisdiagramme usw. keine Kreise mehr, sondern sehen wie eine ovale Form aus.
die Frage mit modifizierten js Bearbeitet.
können Sie bitte Ihre HTML-Upload-Code JS – Raki
@Raki ich die Frage bearbeitet habe Geige und hinzugefügt, um den ganzen HTML-und JS-Code. – ashishjmeshram
Jus add $ (". C3 svg"). Css ({"font-size": "0px"}); vor pdf.addHTML (... wie mein anwer erklärt.;) –