安装相关插件

cnpm i vue-print-nb --save

在main.js里面全局引用

import Print from 'vue-print-nb'  // 引入
Vue.prototype.$print = Print;  // 挂载
Vue.use(Print);   // 使用

页面代码

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

<div class="printTableInfo" id="gatprintArea">我是要打印的区域</div>

data数据

print: {
  id: "gatprintArea", // 打印区域的id
  popTitle: "", // 打印配置页上方标题
  extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
  preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
  previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
  previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
  zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
  previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
  previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
  beforeOpenCallback() {}, // 开启打印前的回调事件
  openCallback() {}, // 调用打印之后的回调事件
  closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
  url: "",
  standard: "",
  extraCss: "",
},

打印样式新写一个 style即可

<style media="print" lang="scss">
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    height: auto;
    margin: 0px;
  }
  input[disabled="disabled"] {
    background-color: #fff;
    color: #000;
  }
  body {
    border: solid 1px #ffffff;
  }
  #gatprintArea {
    // 在这里面填写打印的样式
    background-color: #006dd1;
  }
}
</style>

 点击打印，就可以看到要打印的内容了