score:1

Accepted answer

I have fixed these problems

  • add id .attr("id","svg-container")
  • use svg size instead of canvas default size

and its working well

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://canvg.github.io/canvg/canvg.js"></script>
  <script type="text/javascript" src="https://canvg.github.io/canvg/rgbcolor.js"></script>
  <script type="text/javascript" src="https://canvg.github.io/canvg/StackBlur.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
</head>
<body>

<table align="center">
  <caption style="text-align: left; font-weight: bold">DETTE ER EN FAKTURABRIK</caption>
  <br>
  <tr>
    <td id="str1">Kategori 1</td>
    <td id="nr1">10000</td>
  </tr>
  <tr>
    <td id="str2">Kategori 2</td>
    <td id="nr2">20000</td>
  </tr>
  <tr>
    <td id="str3">Kategori 3</td>
    <td id="nr3">30000</td>
  </tr>
  <tr>
    <td id="str4">Kategori 4</td>
    <td id="nr4">40000</td>
  </tr>
  <tr>
    <td id="str5">Kategori 5</td>
    <td id="nr5">50000</td>
  </tr>
  <tr>
    <td id="str6">Kategori 6</td>
    <td id="nr6">60000</td>
  </tr>
  <tr>
    <td id="str7">Kategori 7</td>
    <td id="nr7">70000</td>
  </tr>
  <tr>
    <td id="str8">Kategori 8</td>
    <td id="nr8">80000</td>
  </tr>
</table>

<div><button id="getPdf" style="display:block;padding : 20px;width:100%;margin:10px;font-weight:bold;background:#f88">Get PDF</button></div>
<script>//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);
function getPdf() {
  //Get svg markup as string
  var svgElement = document.getElementById('svg-container');
  var svg = svgElement.innerHTML;
  if (svg) svg = svg.replace(/\r?\n|\r/g, '').trim();

  var canvas = document.createElement('canvas');
  canvas.width = svgElement.clientWidth;
  canvas.height = svgElement.clientHeight;
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width , canvas.height);
  canvg(canvas, svg);
  var imgData = canvas.toDataURL('image/png');

  // Generate PDF
  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 100, 100);

  //doc.text(20, 20, 'Hello world!');
  doc.save('save', 'test.pdf');

}

var data = [
  $("#nr1").text(),
  $("#nr2").text(),
  $("#nr3").text(),
  $("#nr4").text(),
  $("#nr5").text(),
  $("#nr6").text(),
  $("#nr7").text(),
  $("#nr8").text()];
var margin = {top: 20, right: 10, bottom: 30, left: 70},
  width = 800 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
var y = d3.scale.linear()
  .domain([0,100000])
  .range([height, 0]);
var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1)
  .domain(d3.entries(data).map(function(d) { return "Kategori " + d.key; }));
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");
var svg = d3.select("body").append("svg").attr("id","svg-container")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(-6," + height + ")")
  .call(xAxis);
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Kroner");


var bar = svg.selectAll()
  .data(d3.entries(data))
  .enter().append("rect")
  .attr("x", function(d) { return x("Kategori " + d.key) + x.rangeBand()/2 })
  .attr("width", x.rangeBand()/2)
  .attr("y", function(d) { return y(d.value ); })
  .attr("height", function(d) { return height - y(d.value); })
  .style( "fill", "#66a3ff" );
bar.append("text")
  .attr("x", function(d) { return x("Kategori " + d.key) + x.rangeBand() / 2; })
  .attr("dx", -3) // padding-right
  .attr("dy", ".35em") // vertical-align: middle
  .attr("text-anchor", "end") // text-align: right
  .text( function(d) {  return d.value; });
</script>

</body>
</html>


Related Query

More Query from same tag