Я использую jsPDF для преобразования html в pdf. В некоторых случаях, когда html имеет svg-диаграммы, некоторые данные дублируются в сгенерированном PDF-файле.Повторяющийся контент в pdf, созданный с помощью jsPDF
например. Если в диаграммах есть легенды, они дублируются. См. Снимок экрана ниже. Имена городов и проценты повторяются.
Ниже приведен код для создания PDF.
pdf.addHTML($("#page1"), options, function(){
pdf.addPage();
pdf.addHTML($("#page2"), options, function(){
pdf.addPage();
pdf.output('dataurlnewwindow');
});
});
EDIT 1:
Это то, что я понял до сих пор.
<div id="outerDiv">
<div id="pieChart"></div>
</div>
Когда я делаю это, pdf.addHTML($("#pieChart"), никаких вопросов здесь.
Но, когда я это делаю, pdf.addHTML($("#outerDiv"), затем метки повторяются.
и это, как я генерировать мои c3js диаграммы
var pieChart = c3.generate({
bindto: '#pieChart',
EDIT 2: -
Ниже весь мой код.
<!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: -
Я пытался просто преобразовывая HTML на холст с помощью html2canvas. Это также дает ту же проблему.
Редактировать 4:
я мог исправить дубликата вопрос сейчас. Но диаграммы и текст, написанный в формате pdf, немного размыты. В принципе, я добавил функцию replaceAllSVGsWithTempCanvas, а затем использовал это при записи в pdf. Но, похоже, эта функция делает что-то плохое для html, что делает контент, написанный в формате pdf, размытым. На самом деле круговые диаграммы и т. Д. Больше не кругах, а овальной форме.
Отредактированный вопрос с измененным js.
пожалуйста, вы можете загрузить HTML, JS код поиграться – Raki
@Raki Я редактировал вопрос и добавил все HTML и JS код. – ashishjmeshram
Jus add $ (". C3 svg"). Css ({"font-size": "0px"}); перед pdf.addHTML (... Как объясняет мой андер.;) –