window.print()

[mynameisjohnahahah]

最简单的原生打印 直接调用window.print() google浏览器有预览 其他浏览器好像是直接打印的 IE？不管 不认识这个东西

我做项目的时候遇到了个问题，就是内容宽度溢出了A4纸的纵向布局宽度，默认的设置是A4纵向 有边距 所以打印出来会缺一块，如果你用了margin: auto的话 应该会出现这个问题 ⬇️ 解决

@media print{
@page{
margin:0; // 边距自定义 一定要设置成0 我给它搞疯了
size:auto; // 控制是使用a4还是使用其它纸张规格
}
}

[mynameisjohnahahah]

crabbly/Print.js

它可以指定某个div打印，这点就比原生好很多了,还可以指定样式，你就可以实现表格展示一个样式，打印另一个样式。

下载依赖

npm install print-js --save 或者 yarn add print-js

引入

import printJS from 'print-js'

基础的table(参考)

<button onclick="printJS({ printable: 'form-1-a5', type: 'html', scanStyles: false, css: '你指定的css' })"></button>
<div id="form-1-a5" class="a5">
  <div class="form-header">
    <h2>体育中心门诊<span>药房出入类别及库存金额统计</span></h2>
    <div class="form-info">
      <span>统计时间：2018-12-11 15:00</span>
      <span>打印时间：2018-12-11 15:30</span>
    </div>
  </div>
  <table border="1">
    <thead>
      <tr>
        <th width="" class="">出入库类型</th>
        <th width="" class="">西药</th>
        <th width="" class="">中药</th>
        <th width="" class="">中成药</th>
        <th width="" class="">材料</th>
        <th width="" class="">检验材料</th>
        <th width="" class="">器械</th>
        <th width="" class="">合计</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>上期结余</td>
        <td>0</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
  </table>
  <div class="form-footer">
    <span>审核人：<div class="placeholder-div"></div></span>
    <span>审核时间：<div class="placeholder-div"></div></span>
    <span>复核人：<div class="placeholder-div"></div></span>
    <span>复核时间：<div class="placeholder-div"></div></span>
    </div>
</div>

基础样式(参考)

.print-btn{padding:2px 8px;margin-bottom:20px;}@media print{@page{margin:0;padding: 0;size:auto;}}.outer-wrap{margin:50px;}.form-header{text-align:center;}.form-header h2{margin:8px 0;}.form-info span{padding-right:8px;}.form-footer{text-align:center;margin:5px 0;}.form-footer span{padding-right:4px}table{border-collapse:collapse;text-align:center;width:100%;margin:5px auto;}.a5{width:195mm; height:135mm;padding:10px 15px;margin-bottom:20px;}.placeholder-div{ width: 70px; height: 20px; display: inline-block;}

[mynameisjohnahahah]

https://www.cnblogs.com/huashanqingzhu/p/4345698.html