记vue3+打印

•   首先下载 ：

• npm install vue3-print-nb --save
  
  
  //全局挂载一下 /main.js
  
  import print from "vue3-print-nb";
  app.use(print)

• 下面就是使用

•   <el-button size="large" type="primary" v-print="printObj">打 印</el-button>
   <div class="box" id="main"><div>
  
  const printObj = reactive({
    id: "main", // 这里是要打印元素的ID
    popTitle: "", // 打印的标题
    extraCss: "", // 打印可引入外部的一个 css 文件
    extraHead: "", // 打印头部文字
  });
  
  
  <style lang="scss" scoped>
  /*去除页眉页脚*/
  @page {
    size: auto; /* auto is the initial value */
    margin: 3mm; /* this affects the margin in the printer settings */
  }
  
  html {
    background-color: #ffffff;
    margin: 0; /* this affects the margin on the html before sending to printer */
  }
  
  body {
    border: solid 1px blue;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }
  /*去除页眉页脚*/
  </style>