项目背景偶尔我们的网站会遇到这样的需求：我要打印它，尤其是当我们的网站主要提供一些在线的报表和文档时，打印功能就显得尤为重要重要的解决方案是使用打印css，这是跨平台兼容性的标准。不推荐使用浏览器插件方式实现打印。两种实现方式都是将打印相关的样式单独写成一个打印样式表，方便管理，然后通过链接导入，例如：注意：需要在link标签中添加media="print"属性，保证样式表只在打印文件时生效，这样就可以在里面写正常的样式，保证只在打印文件时生效印刷。通过css中的@mediaprintselector，可以为对应的元素样式设置你需要的样式，例如：@mediaprintselector{...}或@mediaprint{selector{...}}用@添加的样式mediaprint只会在打印的时候生效，不会影响正常显示时的样式，所以这里可以设置打印的样式。比如页面的宽度等。这种方法不需要单独创建css样式表，只需要在需要的地方写上selector和style即可。特殊设置@page规则@page规则用于在打印文档时修改某些CSS属性。不能使用@page规则修改所有CSS属性，只能修改margin、orphans（元素内部发生分页时必须保留在页面底部的最小行数）、widow（最小行数）元素内部发生分页时必须保留在页面底部的行数)保留在顶部的最小行数),文档的分页符(分页符设置)。对其他属性的修改无效。---MDN:https://developer.mozilla.org...代码示例如下@page:pseudo-class{size:A4landscape;margin:2cm;}这个属性不是很好用，我就是用了没用。仔细研究过后再写。代码详解@mediaprint{/*总是在section标签前插入分页符，也就是说每个section标签都会自动分页*/section{page-break-before:always;}/*总是在h1之后插入分页符，也就是说h1标签之后的内容会被分到下一页*/h1{page-break-after:always;}/*避免在p中插入分页符标签，但是当标签的内容长度超过一页时，会继续分页*/p{page-break-inside:avoid;}}@mediaprint{/*当分页发生在p标签内部时，至少有3行页面底部保留，顶部至少保留2行*/p{orphans:3;widows:2;}}对于页面显示但不打印的其他内容，可以将其display设置为none，避免打印。需要打印的内容尽量避免浮动。某些浏览器不会正确打印浮动内容。您可以调用window.print()函数来打印当前页面。分页打印或换页打印：page-break-before和page-break-after这两个CSS属性不会修改网页在屏幕上的显示。这两个属性用来控制文件的打印方式。每个打印属性可以设置4种设置值：auto、always、left和right。其中，Auto为默认值，只有在必要时才需要设置分页符（Page-breaks）。如果page-break-before设置为always，当遇到特定组件时，打印机将重新开始打印新页面。如果page-break-before设置为left，将插入分页符，直到指定的组件出现在左侧空白页上。如果page-break-before设置为right，将插入分页符，直到指定的组件出现在右边的空白页上。page-break-after属性将在指定组件之后添加分页符，而不是之前。
