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解釋。;） –