vue html页面打印功能vue-print-nb

最新推荐文章于 2024-07-23 10:25:19 发布

吾五岁

最新推荐文章于 2024-07-23 10:25:19 发布

阅读量204

点赞数

文章标签： vue.js html less

本文链接：https://blog.csdn.net/weixin_55103282/article/details/120988729

版权

本文介绍了如何在Vue项目中集成vue-print-nb库来实现网页内容的打印功能。通过安装和注册插件，然后在页面中指定需要打印的容器ID，可以轻松创建一个打印按钮，点击后即可打印包含特定内容的区域，例如文本和表单元素。

摘要由CSDN通过智能技术生成

使用方式

安装 npm install vue-print-nb --save

在main.js文件中注册


import Print from 'vue-print-nb'

Vue.use(Print);

页面中使用,给需要打印的容器加一个id,打印按钮传入这个id

html:

<div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
        <div class="describle">
          <el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
            <el-form-item label="姓名:" prop="name">
              <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>
    </div>
 
    <button v-print="'#printMe'">Print local range</button>

点击打印按钮,就可以打印页面了