PDF 中的边框未正确对齐 [附加片段]

Question

我正在制作一个内容极少的非常简单的反应应用程序。

index.js：

<div className="App">
  <div id="printable-div">
    <h1>Generate PDF</h1>
    <p>Create a screenshot from the page, and put it in a PDF file.</p>
    <p style={{ color: "red" }}>
      *Open this page in new window and press the button.
    </p>
  </div>
  <br />
  <button id="print" onClick={printPDF}>
    PRINT
  </button>
</div>

id 为 printable-div 的 div 将在此处打印。

我也为此应用了一个 css，

#printable-div {
  border: 2px solid #000;
  padding: 20px;
}

但是当点击按钮时，会发生 pdf 的下载，而在打开 pdf 文件时，边框没有正确对齐。

同样在这里，订单需要到页面，但它只适用于 div。

使用的库：

->jsPdf

->html2canvas

点击打印按钮执行的代码如下，

  const printPDF = () => {
    const domElement = document.getElementById("printable-div");
    html2canvas(domElement).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPdf();
      pdf.addImage(imgData, "JPEG", 0, 0);
      pdf.save(`${new Date().toISOString()}.pdf`);
    });
  };

完整的工作示例：

谁能虚心帮我实现让边框与整个页面正确对齐的结果？ 如果需要将使用的库更改为其他替代方案，也可以..

要求：

整个页面需要有边框可见，所有边间距相等，内容需要在边框内..

Answer 1

我检查了您的代码框，看来您已经应用了@Ihsan 的解决方案，但在该解决方案的基础上，我发现jsPDF 有一个fromHMTL 函数，因此您可以先跳过对画布的渲染。

const printPDF = () => {
  const domElement = document.getElementById("printable-div");
  const doc = new jsPdf();
  doc.fromHTML(domElement, 10, 5); // position within rectangle
  doc.rect(5, 5, 200, 0.3);
  doc.rect(5, 5, 0.3, 285);
  doc.rect(5, 290, 200, 0.3);
  // doc.rect(5, 30, 200, 0.3); // this is the "middle" horizontal bar
  doc.rect(205, 5, 0.3, 285);
  doc.save(`${new Date().toISOString()}.pdf`);
};

我注释掉了中间的水平条，因为该条的垂直位置只需要根据您想要/需要的位置进行调整。

编辑

您可以绘制一个矩形并对其进行描边以创建外边框，而不是一堆矩形，然后使用一条线填充水平“条”。 IMO 这读起来更干净一些。

const printPDF = () => {
  const domElement = document.getElementById("printable-div");
  const doc = new jsPdf();

  // Create border
  doc.rect(5, 5, 200, 285, "S").line(5, 45, 205, 45, "S");

  // Inject HTML
  doc.fromHTML(domElement, 10, 5);

  // Save out to PDF
  doc.save(`${new Date().toISOString()}.pdf`);
};

公平地说，我认为 Ihsan 应该获得大部分功劳，因为这基本上是他们的答案，我只是通过不同的方式将内容放入其中，并定位了复制的 HTML。

Answer 2

根据我的评论，这是您可以用来设置 pdf 布局的示例。你可以在在线编辑器上试试

var doc = new jsPDF();

  doc.setFillColor("#000000")
  doc.rect(5, 5, 200, 0.3)
  doc.rect(5, 5, 0.3, 285)
  doc.rect(5, 290, 200, 0.3)
  doc.rect(5, 30, 200, 0.3)
  doc.rect(205, 5, 0.3, 285)