前端使用print.js实现打印功能(基于vue)

// const MyPlugin = {};
// MyPlugin.install = function (Vue, options) {
//     // 4. 添加实例方法
//     Vue.prototype.$print = Print;
// };
// export default MyPlugin;
export default Print;

<div class="printDom">指定打印区域</div>
<div id="printDom">指定打印区域</div>
<div ref="printDom">指定打印区域</div>

//main.js
import Print from './print';
Vue.use(Print);
// xx.vue
 this.$print(this.$refs.printDom, {});

<div class="no-print">不打印区域</div>
Print('#printDom');

<div class="no-print-box">自定义不打印区域类名</div>
Print('#printDom',{noPrint:'.no-print-box'});

this.$print(this.$refs.printDom, {
     noPrint: '.noPrint',
     onStart: () => {
        console.log('打印开始');
     },
     onEnd: () => {
         onsole.log('打印完成');
     }
});

 table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}
table tr {
    background: #EFF3F5;
}
table td,
table th {
    /**文字垂直、水平居中 */
    vertical-align: middle;
    text-align: center;
    /** 基础样式 */
    border: 2px solid black;
    border-left: 0px;
    color: #666;
    height: 40px;
    font-size: 18px;
    min-width: 150px;
    line-height: 30px;
}
table td:last-child,
table th:last-child {
    border-right: 0px;
}
table thead th {
    background-color: #CCE8EB;
    width: 100px;
}

@page { size: 5.5in 8.5in; }

@page {
  size: A4;
}

@page { size: A4 landscape; }

@page {
    size: A3 landscape;
}

@page :left { margin-left: 1cm; }
@page :right { margin-left: 8cm; }

@page :first {
}

@page :blank { @top-center { content: "This page is intentionally left blank." } }