window.print()

转载地址

快捷键来（Mac 上是 command + p）触发打印

在 JavaScript 中可以通过调用window.print() 方法来实现，调用之后会出现打印预览的对话框。这样做的好处就是我们可以在用户打印之前从服务端获取一些数据然后动态地生成一些内容插入到文档中，这在某些特定的场景中是非常有用的。通过媒体查询来引入打印所需要的样式

    /* index.css */CSS 提供了一种叫做媒体查询的功能
    @media print {
      .noprint {
        display: none;
      }

      .printable {
        display: block;
      }
    }
    注意：
    1、如果打印的内容里含有图片，最好是给图片设置一个最大宽度或者最大高度（max-width: 100% or max-height: 100%），这样做是为了图片尺寸太大超出纸张大小影响布局。
    2、@page @page 这个规则很强，可以让我们在 CSS 中设置打印页面的一些属性如：纸张尺寸、边距等。比如以下代码：
    @page {
      size: A4 landscape;
      margin: 2cm;
    }
    3、-webkit-print-color-adjust: exact
    打印的对话框中我们可以设置是否打印背景图形，通过这个属性我们可以强制打印的页面有背景图形，即便你在打印对话框中没有勾选背景图形，做这个的好处就是不要用户再费心探究了。当然这是一个非标准属性，以后可能会更改，目前在 Chrome、Safari 是有效的，Firefox 上不生效。