1.安装

npm install vue-print-nb --save

2.在mian.js中引入

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

3.在页面中使用

<el-dialog title="打印页面" :visible.sync="dialogVisible" width="40%" :loading="loading" size='small' @open="dialogOpen">
<div style="width:500px">
<img id="printTest" :src="printImg" style="width:100%; height:auto;" >
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="print" v-print="'#printTest'">去打印</el-button>
</span>
</el-dialog>

 在图中的
id="printTest"

写在要打印的标签身上
v-print="'#printTest'"

把他写在要去打印的按钮上
写上就能打印了~

在VUE中实现打印的更多相关文章

  1. vue项目中批量打印二维码

    前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  4. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  5. [Vue] vue中setInterval的问题

    vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...

  6. vue(6)—— vue中向后端异步请求

    异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...

  7. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  8. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  9. vue中遇到的坑!!!!!

    一 .vue安装的坑 报错时的常见问题 1.cnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 –save(关于 ...

随机推荐

  1. kali linux 入门(1) 基于win10和docker的环境搭建

    1. 前言 渗透测试并没有一个标准的定义.国外一些安全组织达成共识的通用说法是,渗透测试是通过模拟恶意黑客的攻击方法,来评估计算机网络系统安全的一种评估方法,这个过程包括对系统的任何弱点.技术缺陷或漏 ...

  2. Atcoder arc096

    C:Half and Half 几个if语句贪心算一算就好了 #include<cstdio> #include<algorithm> using namespace std; ...

  3. Codeforces Parking Lot

    http://codeforces.com/problemset/problem/630/I 简单的排列组合,推式子技巧:举一个小样例,看着推,别抽象着推,容易错 #include <iostr ...

  4. re模块补充

    )# 后面加数字代表前面多少个进行替换print(ret8) # stars466c7#7.subn() 会返回替换了多少次ret9=re.subn('\d','asd','sh8sd6sds7smm ...

  5. SaaS加速器,到底加速了谁? 剖析阿里云的SaaS战略:企业和ISV不可错过的好文

    过去二十年,中国诞生了大批To C的高市值互联网巨头,2C的领域高速发展,而2B领域一直不温不火.近两年来,在C端流量饱和,B端数字化转型来临的背景下,中国越来越多的科技公司已经慢慢将触角延伸到了B端 ...

  6. Zuul的过滤器

    过滤器类型与请求生命周期:         Zuul中定义了4种标准过滤器类型,这些过滤器类型对应于请求的典型生命周期         PRE: 这种过滤器在请求被路由之前调用.可利用这种过滤器实现身 ...

  7. shell与crontab定时器的结合

    crond服务 以守护进程方式在无需人工干预的情况下来处理一些列的作业指令与服务 查看服务状态 systemctl status cron.service 停止服务 systemctl stop cr ...

  8. C#可扩展编程之MEF(五):MEF高级进阶

      好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较 ...

  9. MyEclipse使用总结——MyEclipse安装maven插件[转]

    打开 myeclipse, MyEclipse -->  Preferences -->Maven4MyEclipse 确定jdk是可用的 选择自己安装的maven: 点击Add选中我们的 ...

  10. 3. 单元测试框架(unittest)1——TestCase

    1. import unittest 引入unittest模块:   2. class SearchTest (unittest.TestCase): 定义一个继承于TestCase类的子类:   3 ...