在使用 window.print() 时常常会发现打印的样式十分混乱，首先是因为打印机采用的是 mm 单位，而不是我们页面常用的 px，同时有些样式在打印时也不会生效。所以一般我们都需要为打印样式重新进行设计，一般我们有三种方法添加打印专用样式文件。
第一种：媒体查询 @media print
@media print {
@page {
size: auto; //页面大小自动，防止打印版不全
margin: 5mm; //页面边距的设定
}
.noprint { //不需要打印的元素
display: none;
}
html,
body,
#app {
background-color: #ffffff;
height: auto !important;
margin: 0px;
border: none;
}
.pageBreak {
/* 插入分页符，两种方法选择 */
page-break-after: always;
page-break-before: always;
}
.card::before {
/* 利用伪类添加表头等 */
content: '表头';
font-size: 20px;
display: block;
text-align: center;
font-weight: bold;
line-height: 40px;
}
}
第二种：CSS 中使用 @import … print
@import url("my-print-style.css") print;
使用这种方法时有两点需要注意，不然可能会出现编译失败：
- css 文件中注释请使用
/* css标准注释 */。 - 如引用文件为 scss 时，请不要在
<style lang="scss">中使用，这样一些 scss 的函数，变量都会编译报错，最好在 main.js 中直接引用。
第三种：在 HTML 中使用 <Link> 标签
<link rel="stylesheet" media="print" href="my-print-style.css”>
