Vue頁面實現打印功能

實現打印功能，需要安裝一個插件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。