PDF 中的边框未正确对齐 [附上代码片段]

Question

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

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

根据我的评论，这是您可以用来设置 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)

Answer 2

我检查了你的 codesandbox，你似乎已经应用了@Ihsan 的解决方案，但为了构建该解决方案，我发现 jsPDF 有一个 fromHMTL 函数，所以你可以跳过渲染到第一个canvas.

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`);
};

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

编辑

您可以绘制一个矩形并对其进行描边以创建外边框，而不是一堆矩形，然后使用一条线填充水平“条”。 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.

PDF 中的边框未正确对齐 [附上代码片段]

Border not aligned properly in PDF [Snippet attached]

javascript

pdf

html2canvas

jspdf

reactjs

编辑