vue打印

打印插件
"vue-print-nb": "^1.7.5",

main.js
import Print from 'vue-print-nb' // 打印插件

Vue.use(Print);
//页面中
<table id="bidAssessPrintPreview" class="print_preview_table">
</table>
<el-button v-print="printOption" type="primary">打 印</el-button>

data() {
   return {
      title: "打印预览",
      form: {},

      printOption: {
         id: 'bidAssessPrintPreview', // 打印元素的id 不需要携带#号
         popTitle: '标前项目评估表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
   }
},


/* 打印预览表格样式 */
.print_preview_table {
   width: 100%;
   border-collapse: collapse;

   th,
   td {
      border: 1px black solid;
      padding: 2px 4px;
   }

   th {
      font-size: 18px;
      font-weight: bold;
   }

   .el-checkbox__input.is-disabled .el-checkbox__inner {
      border-color: #333333;
      background-color: #FFFFFF;
   }
   .el-checkbox__input.is-disabled + span.el-checkbox__label {
      color: #333333;
   }
   .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
      border-color: #333333;
      border-width: 2px;
      top: 0;
      background-color: transparent;
   }
   .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
      border-color: #333333;
      background-color: #FFFFFF;
   }
}