laravel 如何创建 A4 页面大小的打印视图并修复每页的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18758355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create print view with A4 page size and fix border per page
提问by Mohammad
i have a big page on html gen from php
and in want to create print view with html and css
i use print.css style to create this page
then have some question :
我在 php 的 html gen 上有一个大页面，
并且想用 html 和 css 创建打印视图，
我使用 print.css 样式来创建这个页面，
然后有一些问题：
- how to create A4size page
- how to create borderfor all pages and for per page
- how to create fix sizeview in any browser ?
- have phpclass for generate this ?
- 如何创建A4大小的页面
- 如何为所有页面和每页创建边框
- 如何在任何浏览器中创建固定大小视图？
- 有生成这个的php类吗？
thanks for your answers :)
谢谢你的回答:)
回答by Alex
The basis:
依据：
on your CSSprint styles add a media query for printing and use the @pagerule
在您的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 */
}
}
have php class for generate this ?
有生成这个的 php 类吗？
I dont think you really need extra libraries to do that. But, probably, you'll need some browser compatiblity... isn't?
我不认为你真的需要额外的库来做到这一点。但是，您可能需要一些浏览器兼容性……不是吗？
EDIT
编辑
To support IE10+ you may want to add also this rule:
要支持 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 */
}
}
You should be able to manage yourself with only CSS to print a website content.
您应该能够仅使用 CSS 管理自己以打印网站内容。
回答by Alex
this may be help u out
这可能会帮助你
<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;
}
