npm install vue-print-nb --save
# 或
yarn add vue-print-nb

import Print from 'vue-print-nb'

Vue.use(Print)

<template>
  <div>
    <!-- 打印按钮 -->
    <button v-print="printConfig">打印当前内容</button>
    
    <!-- 隐藏非打印内容 -->
    <div class="non-printable">
      这部分不会被打印
    </div>
    
    <!-- 打印区域 -->
    <div id="printArea">
      <h2>销售订单</h2>
      <table>
        <tr>
          <th>产品名称</th>
          <th>数量</th>
          <th>单价</th>
        </tr>
        <tr>
          <td>Vue教程</td>
          <td>1</td>
          <td>¥99</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printConfig: {
        id: "printArea",     // 要打印的区域ID
        popTitle: '订单详情', // 打印窗口标题
        extracss: 'https://example.com/print-styles.css', // 额外CSS
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
      }
    }
  }
}
</script>

<style>
/* 普通屏幕样式 */
.non-printable {
  background: #f0f0f0;
  padding: 10px;
}

/* 专门用于打印的样式 */
@media print {
  body * {
    visibility: hidden; /* 隐藏所有元素 */
  }
  
  #printArea,
  #printArea * {
    visibility: visible; /* 只显示打印区域 */
  }
  
  #printArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  .no-print {
    display: none !important; /* 强制隐藏不需要的元素 */
  }
}
</style>