IT技术 - PDF 中的边框未正确对齐 [附加片段] - 吾爱随笔录

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

IT技术 javascript reactjs pdf jspdf html2canvas

2021-05-21 20:15:31

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

索引.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 的 divprintable-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`);
    });
  };

完整的工作示例：

任何人都可以虚心帮助我实现使边框与整个页面正确对齐的结果吗？如果使用的库需要更改为其他替代方案也可以。

要求：

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

2个回答

我检查了你的代码和框，似乎你已经应用了@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。

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

其它你可能感兴趣的问题

上一篇从扩展存储中取出3d打印机后应该注意什么下一篇使用 react-select 使用 bootstrap 4 创建标记