score:14
Thanks to Pawel Fus for the nod in the right direction, we got this working using canvg.js, which temporarily replaces the svg with a canvas before calling html2canvas.
The final issue came when some of the html within the svg uses em's to size the font (which unfortunately a lot of our templates do). We got around this by updating the font size for anything using em's to the underlying pixel size before rendering the svg into a canvas (see Get computed font size for DOM element in JS for how we calculated the actual font size)
Below is the updated code for the download button click
$('#download').click(function() {
var svgElements = $("#container").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();
});
html2canvas($("#container"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
$("#container").find('.screenShotTempCanvas').remove();
$("#container").find('.tempHide').show().removeClass('tempHide');
});
See an updated jsfiddle of it in action here - http://jsfiddle.net/zuvzcgvz/22/
Source: stackoverflow.com
Related Query
- Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox
- Not able to render the charts in pdf using Wickedpdf and Highcharts in rails 2.3 app
- Highcharts series doesnt show data and render the chart
- How to create a column range chart in Highcharts using range and navigator functions?
- Using Highcharts and displaying a message over or on the chart when there is no data
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- display pie chart using highcharts api and mysql
- highcharts display in my render html page which i want to convert into PDF using wkhtmltopdf in rails
- Weekly PDF generation using PHP and Highcharts
- Creating depth chart using highcharts and creating bids and asks in such a way that bids and asks are created from center of chart
- Highcharts display label for pie chart using html table as data source
- Using hours and minutes as data in highcharts donut chart
- median and standard deviation chart using highcharts
- Displaying count on bar and percentage on Y-axis of cloumn chart using Highcharts
- Highcharts Export Chart To PDF on The Fly Using TCPDF
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Converted PHP code that built an array to JS and now highcharts doesn't work - what did I do wrong?
- Real Time Bar chart using Highcharts and AngularJs
- Highcharts resize chart size using custom export button and replace expand and collapse button dynamically
- Trying to put points on a chart using a SharePoint list and Highcharts
- How to render a chart using highstocks in highcharts in angular 6?
- Updating the axis of a highcharts chart object using jquery after inital render (django)
- PDF having Highcharts (multiple series) chart generated using svg2pdf.js throws error
- using a few data columns to plot chart and some to show on tooltip highcharts
- Highcharts - Performance issue using chart with x values date and TIME
- Parsing CSV and then Using the Data to Build Highcharts Bar Chart
- I can't use gauge-solid and spline chart at the same time by using HighCharts
- Show Column and line chart together in drill down using highcharts
- Chart using highcharts and Json asp.net MVC
- How to display the value instead of percentage in a pie chart using jquery Highcharts
More Query from same tag
- chart.scrollablePlotArea unexpected behavior
- Highcharts: Force show a yAxis tick
- Highcharts yaxis higher values displayed lower
- Highcharts addSeries yAxis Label Formatting
- maxPadding doesn't work for Highstock
- How to create dynamic color for highchart with dynamic dates?
- Issue in multiple exporting for HighChart with scrollbar
- How to make pie chart with data border radius in highchart
- How to convert current xhtml page with javascript charts to pdf
- Highcharts - how to export chart with different scale in one click
- Highchartjs doesn't render properly with the data
- Why inactive option not working on scatter highcharts
- highstock chart move selection on keybord arrow key press
- Highchart overflows modal window
- What is the fastest way to preprocess data?
- Highchart redraw is throwing error Uncaught TypeError: Cannot read property 'length' of undefined(…)
- highchart Dynamically updated data
- Filename not assigned to csv export in HighCharts on Mac
- Highcharts legend is cutting off
- highcharter both nominal and percentage values
- MongoDB aggregation by time interval PHP
- Highchart reduce gap size in heatmap and data missing
- Highcharts tooltip backgroundColor inherit from the hovered element
- Highcharts remove theme background before printing
- map.js is not working with highstock in 4.2.4 version ( mapNavigation )
- Highcharts, multiple parts chart
- highcharts show additional custom data in tooltip
- How do I turn string insert data into a series for react highcharts?
- how to display hctreemap2 unique levels?
- Y-axis labels on spiderweb graphs