如何使用canvas2pdf将带有canvas的内容div转换为PDF？答案

【问题标题】：How to convert content div with canvas to PDF using canvas2pdf?如何使用canvas2pdf将带有canvas的内容div转换为PDF？
【发布时间】：2018-05-08 09:28:30
【问题描述】：

我尝试在https://github.com/joshua-gould/canvas2pdf 阅读更多内容。在这里，有一个创建新 PDF 画布的指南，但我想使用一个 div 包含两个画布

$('#PDF').click(function(e) {
  e.preventDefault();
  // In here, I need get data a div with two canvas , 
  // and then add this to below
  //Create a new PDF canvas context.
  var ctx = new canvas2pdf.Context(blobStream());

  //draw your canvas like you would normally
  ctx.fillStyle = 'yellow';
  ctx.fillRect(100, 100, 100, 100);
  // more canvas drawing, etc...

  //convert your PDF to a Blob and save to file
  ctx.stream.on('finish', function() {
    var blob = ctx.stream.toBlob('application/pdf');
    saveAs(blob, 'example.pdf', true);
  });
  ctx.end();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pdf-viewer" style="height: 300px; width: 100%; background: #d4d4d4; overflow: scroll">
  <canvas height="792" width="612" style="margin: 2px auto; display: block; border: 2px solid rgb(255, 0, 0);"></canvas>
  <canvas height="792" width="612" style="margin: 2px auto; display: block; border: 2px solid rgb(255, 0, 0);"></canvas>
</div>

我需要一种在 div 中获取数据并使用此转换为 PDF 的方法。

【问题讨论】：

标签： javascript jquery html pdf html5-canvas

【解决方案1】：

我正在努力运行库本身，但已经找到了我认为您正在寻找的代码：

var iframe = document.querySelector('iframe');
var text = document.querySelector('.page');

//Create a new PDF canvas context.
var stream = blobStream();
var ctx = new canvas2pdf.PdfContext(stream);
eval(text);
console.log(stream);
ctx.stream.on('finish', function() {
  iframe.src = ctx.stream.toBlobURL('application/pdf');
});

<html>

<body>
  <div id="page-2" class="page">
    <h1>Second Page</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <img src="assets/images/logo-georg.png" width="300">
  </div>
  <iframe style="border:1px solid black;" width="600" height="775"></iframe>
</body>

</html>

【讨论】：