使用jspdf创建带有Div边框的Pdf

Question

我想使用JsPdf库基于HTML元素创建PDF文档。我想知道是否可以在div边框中实现，还是必须使用doc.line属性并逐行绘制我的div周围的线条。例如：

var doc = new jsPDF()

doc.line(20, 20, 60, 20)

我更愿意使用<div style="border: solid; width: 300px ">

有人试过这个吗？

这是我的Fiddle

- Leonardo Wildt

---

我的解决方案已经实现了你的要求，将CSS导入PDF中。是否有什么我可以做来改进我的答案？ - lancew

Answer 1

如何将 jsPdf 与 Html2Canvas 配合使用？首先将 html 渲染成 canvas，然后将 canvas 添加到 pdf 中作为图片，具体操作如下：

var img = canvas.toDataURL("image/png");
doc.addImage(img, 'JPEG', 300, 200);
doc.save('test.pdf');

请查看完整示例： http://jsfiddle.net/nLLuvnwL/

- lancew

Answer 2

不必逐条绘制每条线，你可以使用doc.rect来绘制矩形。你还可以使用doc.setLineWidth来改变边框宽度。

doc.setLineWidth(2);
doc.rect(10, 20, 150, 75);

doc.save('sample-file.pdf');

看这里的例子 http://jsfiddle.net/508p61r6/5/

- phil652

Answer 3

找到了解决方法，为每个PDF页面放置一个矩形作为边框，并通过在页面高度上进行差异来从第二页和其他页面开始向下移动一点，希望这能解决一些问题...

html2canvas(myCanvas, { useCORS: false }, { allowTaint: true }).then(function (canvas) {

  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = new jsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');

});};

- avnesh nigam

Answer 4

for (var i=1;i<pdf.internal.pages.length;i++){
pdf.internal.pages[i].push("0.00 595.28 841.89 -595.28 re");
pdf.internal.pages[i].push("S");
}

- Prem Kumar Nayak

---

你能描述一下这个程序是做什么的吗？否则，它对其他人来说将没有帮助。 - wwerner