如何将HTML页面的一部分保存为PDF

Question

在我的代码中，我可以更改颜色并将文本引入画布（画布位于T恤上）。在介绍文字后，我想用画布将T恤保存为PDF。现在我只能保存画布的内容但是如何保存空洞div？这是我的JSFiddle代码：https://jsfiddle.net/g13kw3c6/。谢谢！

这是Javascript代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.font = "bold 15px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "center";

var $text3 = document.getElementById("sourceText3");

$text3.onkeyup = function(e) {
  redrawTexts();
}

function redrawTexts() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  wrapText(ctx, $text3.value, 66.5, 82, "Arial");
}

function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
  var words = text.split(' ');
  var line = '';
  var lineHeight = fontSize;

  context.font = fontSize + " " + fontFace;

  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
  return (y);
}

function color(v4) {
  switch (v4) {
    case "red":
      ctx.fillStyle = "#ff0000";
      break;

    case "green":
      ctx.fillStyle = "#009933";
      break;
  }
  redrawTexts();
}

download.addEventListener("click", function() {
  // only jpeg is supported by jsPDF
  var imgData = canvas.toDataURL("image/png", 1.0);
  var pdf = new jsPDF('p', 'mm');

  pdf.addImage(imgData, 'PNG', 10, 10);
  pdf.save("download.pdf");
}, false);

这是HTML代码：

<div id="testDiv">
  <h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>

  <button type="button" id="red" onclick="color(this.id)"></button>
  <button type="button" id="green" onclick="color(this.id)"></button>


  <h3 style="font-size: 15px;padding-top: 0px">Text test</h3>

  <input id="sourceText3" type="text" style="height: 32px;width: 223px;">

  <br>
  <br>
</div>

<div class="span9" id="1">
  <br>

  <div class="span4">
    <div id="shirtDiv" class="page" style="width: 380px; height: 400px; position: relative; background-color: rgb(255, 255, 255);">

      <img id="tshirtFacing" src="https://www.createakit.co.uk/wp-content/uploads/2017/03/red.png" width=380 height=400></img>

      <canvas id="myCanvas" width=115 height=100 style=" position: absolute; top: 140px; left: 137px; z-index: 10; "></canvas>
    </div>
  </div>

  <button id="download">download</button>

这是CSS代码：

#myCanvas {
  border: 2px dotted black;
  border-radius: 5px;
  position: absolute;
}

#green {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: #009933;
}

#green:hover,
#green:active,
#green:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

#red {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: #ff0000;
}

#red:hover,
#red:active,
#red:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}