添加打印样式的三种方式

在使用 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;

使用这种方法时有两点需要注意，不然可能会出现编译失败：

1. css 文件中注释请使用 /* css标准注释 */。
2. 如引用文件为 scss 时，请不要在 <style lang="scss"> 中使用，这样一些 scss 的函数，变量都会编译报错，最好在 main.js 中直接引用。

第三种：在 HTML 中使用 标签

<link rel="stylesheet" media="print" href="my-print-style.css”>