Question

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

＆＃13;

$('#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();
});

＆＃13;

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

＆＃13;

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

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

如何使用canvas2pdf将带有画布的内容div转换为PDF？

1 个答案: