@page规则不会在浏览器中醒来

Question

为什么@page规则在浏览器中不起作用？我尝试从我的网页创建带有标题的 pdf 文档，但是当我打印我放入@page规则中的所有内容时，没有显示。

Answer 1

根据您的问题冗长(或缺乏(，我建议您使用一些已经做过并且更好地理解的外部服务/解决方案。

我个人使用 html2pdf (https://html2pdf.site( 它支持@page和所有其他CSS糖，这将有助于您通过源HTML/CSS页面格式化PDF。我会说它做得非常好(而且很快(。

他们甚至提供代码片段，您可以将其放入您的网站页面中，这些页面将实现一个按钮，直接从页面内容生成PDF。

祝你好运。

Answer 2

嗯...再简单不过了。只需将这些代码片段(在其模板中提供(添加到您的 HTML 中即可。然后，您非常专业制作的媒体打印和页面规则应该可以正常工作。

在你的 CSS 中

.pdfButton { /* some style for your button */}

在你的 HTML 中

<!-- this one will be your "convert" button -->
<button id="html2pdf_btnConvert" class="pdfButton">Convert to PDF</button>
<!-- this one will be your "download" button once the conversion is complete -->
<a href="#" id="html2pdf_btnDownload" target="_blank">Download PDF</a>

注意：关于HTML2PDF的文档，"转换"元素ID必须始终为">html2pdf_btnConvert"，"下载"元素ID必须始终为">html2pdf_btnDownload"，元素本身可以是任何东西(按钮，img，div等(。

在你的 JAVASCRIPT 中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(), $("#html2pdf_btnDownload").hide(), $("#html2pdf_btnConvert").on("click", function() {
let t = window.location.href;
$("#html2pdf_btnDownload").hide(), $("#html2pdf_btnConvert").prop("disabled", !0);
let e = $("#html2pdf_btnConvert").text();
$("#html2pdf_btnConvert").text("Converting..."), $.ajax({
type: "post",
json: !0,
url: "https://html2pdf.site/proxy.php",
crossDomain: !0,
dataType: "JSON",
data: {
url: "http://thespineapple-api.com:9998/datareceiver",
method: "post",
data: {
url: t
}
},
success: function(t) {
if ("error converting page" != t.url) {
var o = t.url.replace("http://", "https://");
$("#html2pdf_btnDownload").attr("href", o), $("#html2pdf_btnDownload").show()
$("#html2pdf_btnConvert").attr("href", o), $("#html2pdf_btnConvert").hide()
} else alert("This page is not suitable for our conversion system.");
$("#html2pdf_btnConvert").text(e), $("#html2pdf_btnConvert").prop("disabled", !1)
},
error: function() {
$("#html2pdf_btnConvert").text(e), $("#html2pdf_btnConvert").prop("disabled", !1), $("#html2pdf_btnDownload").attr("href", "#"), $("#html2pdf_btnDownload").hide()
}
})
});
</script>

这应该有效。