边框在PDF中未正确对齐[附加代码段] [英] Border not aligned properly in PDF [Snippet attached]

问题描述

我正在制作一个非常简单的具有最小内容的React应用程序.

index.js:

 < div className =" App">< div id ="printable-div">< h1>生成PDF</h1>< p>从页面创建屏幕截图，并将其放入PDF文件中.< p style = {{color:"red"}}>*在新窗口中打开此页面，然后按按钮.</p></div>< br/>< button id ="print"onClick = {printPDF}>打印</button></div> 

此处将打印ID为 printable-div 的div.

我也为此应用了css，

 #printable-div {边框:2px实线#000；内边距:20px;} 

但是在单击按钮时，会进行pdf下载，而在打开pdf文件时，边框未正确对齐.

在这里，顺序也必须是页面的顺序，但是它只适用于div.

使用的库:

->

有人能谦虚地帮助我实现使边框与整个页面正确对齐的结果吗?可以，如果需要将使用的库更改为其他替代方法.

要求:

整个页面的边框必须可见，且各边的间距均等，并且内容必须在边框内.

解决方案

我检查了您的codeandbox，看来您已经应用了@Ihsan的解决方案，但是以该解决方案为基础，我发现 jsPDF 具有 fromHMTL 功能，因此您可以先跳过渲染到画布.

  const printPDF =()=>{const domElement = document.getElementById("printable-div");const doc = new jsPdf();doc.fromHTML(domElement，10，5);//矩形内的位置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);doc.save(`$ {new Date().toISOString()}.pdf`);}; 

我注释掉了中间的水平条，因为只需要调整该条的垂直位置即可.

编辑

您可以绘制单个矩形并对其进行描画以创建外边界，而不是一堆矩形，并使用一条线填充水平的条".IMO的读法更清晰了.

  const printPDF =()=>{const domElement = document.getElementById("printable-div");const doc = new jsPdf();//创建边框doc.rect(5，5，200，285，"S").line(5，45，205，45，"S");//注入HTMLdoc.fromHTML(domElement，10，5);//保存为PDFdoc.save(`$ {new Date().toISOString()}.pdf`);}; 

公平地说，我认为Ihsan应该得到很大的荣誉，因为这基本上是他们的答案，我只是通过不同的方式获得了其中的内容，并定位了复制的HTML.

I am making a very simple react application with ver minimal of content.

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>

Where here the div with id printable-div will gets printed.

I also applied a css for this like,

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

But while click on the button, the download of pdf happens whereas on opening the pdf file, the border is not aligned properly.

Also here, the order needs to be to the page but whereas it applied only to the div.

Libraries used:

-> jsPdf

-> html2canvas

And the code executed on click on the print button as follows,

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

Complete working example:

Can anyone humbly help me to achieve the result of making the border properly aligned to the entire page? It is okay if the libraries used needs to be changed to other alternative..

Requirement:

The entire page needs to have border visible with all sides equal spacing and the content needs to be inside of the border..

解决方案

I checked your codesandbox and it seems you'd already applied @Ihsan's solution, but to build on that solution I found that jsPDF has a fromHMTL function, so you can skip rendering to a canvas first.

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

I commented out the middle horizontal bar as this bar's vertical position just needs to be tweaked for where you want/need it.

Edit

Instead of a bunch of rectangles you can draw a single rectangle and stroke it to create the outer border, and use a line to fill in the horizontal "bar". IMO this reads a little more cleanly.

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

In fairness I think Ihsan should get the bulk of the credit as this is basically their answer, I just got the content in there by a different means, and positioned the copied HTML.

这篇关于边框在PDF中未正确对齐[附加代码段]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！