Vue结合vue-print-nb实现打印功能

安装

npm install vue-print-nb --save

main.js中全局引入

import Print from 'vue-print-nb'
Vue.use(Print)

页面中使用

<div id="printMe" >
          <p>打印内容</p>
</div>
<div  class="table-btn">
        <Button type="info" v-print="printObj" class="btn-no">打印</Button>
</div>
<script>
export default {
  name: "printInfo",
  data() {
    return {
      list:[],
      printObj: {
        id: "printMe",
        popTitle: "打印模板",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
    };
  },
  methods: {},
  computed: {},
  created() { },
};
</script>

v-print='''#printMe'"直接打印

printObj:可以设置打印页眉

去掉页面页脚

<style> 
  @page{
      margin-top:1mm;   //去掉页眉
      margin-bottom: 1mm;    //去掉页脚
    }
</style>