D3.js SVG 给它一个 ID 或将 SVG 添加到 PDF

Question

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

    <script src="jspdf.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="d3.v3.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>

<svg class="chart" style="display: block; margin:auto;"></svg>
<div id="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
    <rect height="300" width="300" style="stroke:#f7f7f7; fill: #2440ad" /></svg>
</div>
<div><button id="getPdf">Get PDF</button></div>
<script>//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);
function getPdf() {
    //Get svg markup as string
    var svg = document.getElementById('svg-container').innerHTML;
    if (svg) svg = svg.replace(/\r?\n|\r/g, '').trim();

    var canvas = document.createElement('canvas');
    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');

}
</script>

<script type="text/javascript">
    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("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>

所以我用 D3.js

生成垂直条形图 SVG

但是，有两件事我想不通

如何给 SVG 图表一个 ID 然后 select 它用 var svg = document.getElementById('svg-container').innerHTML; （目前它将 select 我用 HTML 制作的蓝色矩形并将其放入 PDF 中）
将 SVG 图表转换为图像或使用 doc.addSVG 将其添加到我的 PDF。

Answer 1

我已经解决了这些问题

添加id .attr("id","svg-container")
使用 svg 大小而不是 canvas 默认大小

并且运行良好

<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>

D3.js SVG 给它一个 ID 或将 SVG 添加到 PDF

D3.js SVG giving it an ID or adding the SVG to PDF

javascript

pdf

svg

pdf-generation

d3.js