Question

我有一个关于来自php的html gen的大页面并希望用html和css创建打印视图我使用print.css样式来创建此页面然后有一些问题：

如何创建 A4 尺寸页面
如何为所有网页和每页创建边框
如何在任何浏览器中创建修复尺寸视图？
有 php 类来生成这个吗？

感谢您的回答:)

Answer 1

基础：

在您的CSS打印样式上添加媒体查询以进行打印并使用@page规则

@media print{
  @page {
    size: auto;   /* auto is the initial value */
    size: A4 portrait;
    margin: 0;  /* this affects the margin in the printer settings */
    border: 1px solid red;  /* set a border for all printed pages */
  }
}

有php类来生成这个吗？

我认为你真的不需要额外的库来做到这一点。但是，可能，您需要一些浏览器兼容性......不是吗？

编辑

要支持IE10 +，您可能还想添加此规则：

/* IE10+ CSS print styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS print styles go here */
  @page {
    size: auto;   /* auto is the initial value */
    size: A4 portrait;
    margin: 0;  /* this affects the margin in the printer settings */
    border: 1px solid red;  /* set a border for all printed pages */
  }
}

您应该只使用CSS来管理自己以打印网站内容。

Answer 2

这可能对你有所帮助

<div id="printpage">  
 //blah blah
</div>  

<a href="#" onclick="printdiv()">Print</a>

function printdiv()
{
    //your print div data
    //alert(document.getElementById("printpage").innerHTML);
    var newstr=document.getElementById("printpage").innerHTML;

    var header='<header><div align="center"><h3 style="color:#EB5005"> Your HEader </h3></div><br></header><hr><br>'

    var footer ="Your Footer";

    //You can set height width over here
    var popupWin = window.open('', '_blank', 'width=1100,height=600');
    popupWin.document.open();
    popupWin.document.write('<html> <body onload="window.print()">'+ newstr + '</html>' + footer);
    popupWin.document.close(); 
    return false;
}

如何创建A4页面大小的打印视图并修复每页边框

2 个答案: