使用 JavaScript 以具有定义属性的 PDF 格式打开

Question

我使用 JavaScript 创建了一个项目，用户可以在其中单击按钮生成 PDF 文档。一切都很完美，除了两件事，但我不确定它是否可以工作。所以这是我到目前为止所做的以下操作：

HTML:

<div class="card-body" id="card">
</div>

<input type="button" id="createDoc" value="Generate PDF" />

JavaScript:

 //Generate pdf
 $("body").on("click", "#createDoc", function () {
     var sTable = document.getElementById('card').innerHTML;
     var style = "<style>";
            
     style = style + "body { border: 2px solid #1f497d; padding: 4%; margin: 0; }";
     style = style + "table { width: 100%; font: 17px Calibri; } #showImages { height: 140px; width: 180px; } #BoxLeft { font-size:14px; width: 100%; margin: 0 auto; margin-top: 6%; height: 40px; } .Box1, .Box2 { float: left; width: 15%; } .box { height: 25px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px #bdbdbd; -webkit-box-shadow: 0 0 10px #bdbdbd; box-shadow: 0 0 10px #bdbdbd; } .Box1 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; } .Box2 { background-color: white; -webkit-print-color-adjust: exact; }  #BoxRight { font-size:14px; width: 100%; margin: 0 auto; margin-top: -12%; height: 40px; } .Box3, .Box4 { float: right; width: 15%; } .Box3 { -webkit-print-color-adjust: exact; } .Box4 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; }";
     style = style + "table, td { border: solid 2px #1f497d; border-collapse: collapse; font-size:14px;";
     style = style + "padding: 2px 3px;text-align: center; } #projects th { height:10px; font-size:14px; background-color: #1f497d; -webkit-print-color-adjust: exact; color: white; }";
     style = style + ".detailsWidth { width:60%; } .checked { color: gray; } #projects { margin-top: 9%; } .action, .hideId, .hide, .hideDate { display:none; } .top { margin-top: -5%; margin-left: 4%; } .topAside { margin-top: -5%; margin-left: 4%; } .heading { margin-top:3%; text-align:center; } .logoGpp { -webkit-print-color-adjust: exact; height: 140px; width: 250px; display: block; margin-left: auto; margin-right: auto; }";
     style = style + "</style>";

     var win = window.open('', '', 'height=700,width=700');

     win.document.write("<html><head>");
     win.document.write(style);
     win.document.write("</head>");
     win.document.write("<body><img class='logoGpp' src='/img/logo.jpg' /><div class='top topAside'><div id='BoxLeft'><div class='Box1'><div class='box'><h4 class='heading'>Job Reference: </h4></div></div><div class='Box2'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div></div></div>");
     win.document.write("<div class='top'><div id='BoxRight'><div class='Box3'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div><div class='Box4'><div class='box'><h4 class='heading'>Initiation Date: </h4></div></div></div></div><br />");
     win.document.write(sTable);
     win.document.write("</body></html>");

     win.document.close();

     win.print();
});

所以使用上面的方法，我从 table 中检索所有数据，这些数据附加到 div card（带有 id）。它以 PDF 格式在打印预览中完美呈现内容。但是我想知道是否可以使用上面的 JavaScript 代码在 landscape 和 A4 纸张尺寸中呈现格式，所以我可以默认使用这些属性渲染它。现在，我必须在打印预览部分手动完成。

Answer 1

有一项实验性 CSS 功能可以在打印预览对话框中为默认设置设置建议，目前仅 Chrome 和具有 Chromium 基础的浏览器支持：

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

但总的来说，我对您提供的代码的印象是它不会生成 PDF 文件，但会打开一个新的 window 或带有 HTML 页面的选项卡，因此用户必须打印此使用虚拟 PDF 打印机的页面。

PHP 有许多库可以从 HTML 内容生成真实的 PDF 文件。也许其中之一可以成为您的可持续解决方案。

Dompdf 是这样做的众多图书馆之一： https://github.com/dompdf/dompdf

使用 JavaScript 以具有定义属性的 PDF 格式打开

Open in PDF Format With Defined Properties Using JavaScript

javascript

pdf