Vue实现打印功能最简单的方法

摘要： 今天做了一个ERP系统打印订单的功能，下面是效果图：

查了很多资料，一开始我直接用print.js这个插件，虽然能实现打印功能，但是当你需要打印的表格数据太多了，就无法实现分页打印，为了不浪费大家时间，所以在这里，我建议大家直接使用vue-print-nb这个插件，可以随心所欲的实现打印功能。在这里我就不多说了，用了就知道！下面说下安装和使用方法：

1、安装vue-print-nb

npm install vue-print-nb --save

2、在main.js文件中引入

   import Print from 'vue-print-nb'
   Vue.use(Print);  //注册

3、在需要打印的页面的代码如下：

<!-- 打印模板 -->
        <div id="printMe">
            <div style="font-size: 20px;font-weight: bold;text-align: center;">采购订单</div>
            <div class="table-list">
                    <div style="width: 270px;">采购单号:&nbsp;&nbsp; {{order.no}}</div>
                    <div style="width: 260px;">单据日期:&nbsp;&nbsp;{{order.order_time}}</div>
                    <div style="width: 200px;">业务类型:&nbsp;&nbsp;普通采购</div>
                    <div style="width: 270px;">供应商:&nbsp;&nbsp;{{order.supplier_name}}</div>
                    <div style="width: 260px;">部门:&nbsp;&nbsp;{{order.department_name}}</div>
                    <div style="width: 200px;">备注:&nbsp;&nbsp;{{order.remark}}</div>
            </div>
			<!--表格-->
            <a-table class="AStockOutDetailTable" :data-source="dataSource" :columns="columnsthree"
                :pagination="false" :rowkey="id">
            </a-table>
        </div>

温馨提示：这里form表单样式获取不到，所以我全都换成了div，然后重新调整样式！

printObj:{
                    id: "printMe", //打印区域 Dom ID
                    popTitle: '打印页面标题文字',
                    extraCss: 'https://www.google.com,https://www.google.com',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>', //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；

                },

温馨提示：这一块js代码直接放在data(){...}里就行了,如下图

然后需要给打印按钮一个点击事件！

<a-button type="primary" v-print="printObj">打印</a-button>

好了，只需要三步就行，可以直接复制我的代码，快速实现打印功能！

---

下面我再来说下安装vue-print-nb这个插件的过程中可能有部分人会遇到报这样一个错误，导致项目无法跑起来！

这个主要是由于vue-template-compiler的版本问题，vue的版本与vue-template-compiler不一致导致的。

更新vue-template-compiler模块即可解决！

npm add vue-template-compiler

提示：重要的问题说三遍！

强烈建议直接使用这个插件，不要用其他的，不然到时候遇到坑就又得多花时间研究，有什么不懂欢迎留言！