vue 打印页面功能

<div style="height: 50px">
        <el-button size="small" type="primary" class="fr" v-print="printBill">打印</el-button>
      </div>


<div id="printBill"       >
         <el-row>
              <el-col :span="8">
                <el-form-item label="部门" prop="section" class="line-input">
                  <el-input v-model="ruleForm.section" placeholder="请填写部门" style="width: 216px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人" prop="username" class="line-input">
                  <el-input v-model="ruleForm.username" placeholder="请填写申请人" style="width: 216px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请时间" prop="time">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.time" style="width: 216px;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
 </div>

export default {
    data () {
        return {
            printBill: {
            id: 'printBill', // 打印元素的id 不需要携带#号
            preview: true, // 开启打印预览
            previewTitle: '打印预览', // 打印预览标题
            popTitle: '保证金申请表', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            extraHead: "",
            // 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点
            // extraHead:'https://***/***.css, https://***/***.css',
            // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点
            // extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
            previewBeforeOpenCallback: () => {
          console.log("触发打印预览打开前回调");
        },
        previewOpenCallback: () => {
          console.log("触发打开打印预览回调");
        },
        beforeOpenCallback: () => {
          console.log("触发打印工具打开前回调");
        },
        openCallback: () => {
          console.log("触发打开打印工具回调");
        },
        closeCallback: () => {
          console.log("触发关闭打印工具回调");
        },
        clickMounted: () => {
          console.log("触发点击打印回调");
        }
      },
        }
    }
}

去掉页眉页脚

<style media="print">
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
</style>

首先先下载 npm install vue-print-nb --save

然后在main.js中引入 main.js中引入

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