10
我正在使用jsPDF将html转换为pdf。在某些情况下，html有svg图表，一些数据在生成的pdf中被复制。使用jsPDF创建的pdf中的重复内容
例如如果图表有传说，它们会重复。请参阅下面的截图。城市名称和百分比重复。
下面是创建PDF的代码。
pdf.addHTML($("#page1"), options, function(){
pdf.addPage();
pdf.addHTML($("#page2"), options, function(){
pdf.addPage();
pdf.output('dataurlnewwindow');
});
});
编辑1：
这是我迄今想通。
<div id="outerDiv">
<div id="pieChart"></div>
</div>
当我这样做，pdf.addHTML($("#pieChart")，这里没有问题。
但是，当我这样做时，pdf.addHTML($("#outerDiv")，然后标签重复。
，这是我如何生成我c3js图表
var pieChart = c3.generate({
bindto: '#pieChart',
编辑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>
编辑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（...正如我的anwer解释。;） –