我使用jsPDF将html转换成pdf.在某些情况下,如果html具有svg图表,则在生成的pdf中会复制一些数据.
例如如果图表有传说,它们将被重复.请参阅下面的截图.城市名称和百分比重复.
下面是创建pdf的代码.
pdf.addHTML($("#page1"),options,function(){
pdf.addPage();
pdf.addHTML($("#page2"),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"),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：
我尝试使用html2canvas将html转换为canvas.这也是同样的问题.
编辑4：
我可以解决重复的问题.但是图表和写在pdf中的文字有点模糊.基本上,我添加了函数replaceAllSVGsWithTempCanvas,然后在写入pdf时使用.但是似乎这个功能对于使内容写成pdf模糊的html来说是微不足道的.事实上,饼图等,没有更多的圆圈,但看起来像椭圆形.
用修改过的js编辑了这个问题.
解决方法
看起来像是html2canvas中的一个bug.您应该在加载html2canvas之后添加底部代码来修复(Credits转到
this guy)：
NodeParser.prototype.getChildren = function(parentContainer) {
return flatten([].filter.call(parentContainer.node.childNodes,renderableNode).map(function(node) {
var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node,parentContainer) : new NodeContainer(node,parentContainer)].filter(nonIgnoredElement);
return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
},this));
};
由于html2canvas作为模块加载,您应该直接在源代码中找到NodeParser.prototype.getChildren,并将其编辑为与上述匹配.这意味着您无法从CDN加载它.
