實現列印功能，需要安裝一個外掛vue-print-nb，使用方法如下

1）安裝全域性的外掛

npm install vue-print-nb -S

2）在main.js中註冊

import Print from 'vue-print-nb'

Vue.use(Print)

3）在頁面中使用

<template>
  <div>
    <!-- 要列印的區域 -->
    <div id="printMe">
        <p>今天的天氣真好啊</p>
          <el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
            <el-form-item label="姓名:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="描述:" prop="describle">
              <el-input
                :disabled="detail"
                type="textarea"
                :rows="4"
                :maxlength="2000"
                placeholder=""
                v-model="form.describle">
              </el-input>
            </el-form-item>
          </el-form>
    </div>
    <!-- 列印的按鈕，顯示列印預覽 -->
    <el-button v-print="'#printMe'">列印</el-button>
  </div>
</template>

<script>

export default {
  data() {
      return {
        form:{}
      }
  },
}
</script>

<style scoped>

</style>
 

專案執行後，輸入資訊點選列印，就會看到列印預覽的資訊，如圖

左側是列印的預覽圖，右邊的列印設定，在目標印表機選項中還可以選擇另存為pdf。