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. 移植 thttpd Web 服务器

    下载 从 http://www.acme.com/software/thttpd/下载 thttpd 到/tmp 目录当中,并解压. 编译 thttpd [arm@localhost thttpd­2 ...

  2. Django流程

    开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/polls/,接下来浏览器会把请 ...

  3. jmeter遇到的问题之Windows读取jtl文件出错

    问题描述 ① 使用linux运行jmeter.jmx文件后生成result.jtl文件 jmeter -n -t /tmp/jmeter.jmx -l /tmp/testresult/result.j ...

  4. CF1163E Magical Permutation

    题意:给定集合,求一个最大的x,使得存在一个0 ~ 2x - 1的排列,满足每相邻的两个数的异或值都在S中出现过.Si <= 2e5 解:若有a,b,c,令S1 = a ^ b, S2 = b ...

  5. 0810NOIP模拟测试赛后总结

    明日之后将是什么. 悲哀, 还是希望? 60分我没脸了…… 所以T1好不容易想到了正解结果实现打挂w0了…… 贪心想的还是相当完美的. 不知道我咋想的开了1e6个栈然后dfs模拟结果MLE原地自爆…… ...

  6. 洛谷P2526 【SHOI2001】小狗散步

    原题传送门 题目背景 Grant喜欢带着他的小狗Pandog散步.Grant以一定的速度沿着固定路线走,该路线可能自交.Pandog喜欢游览沿途的景点,不过会在给定的N个点和主人相遇.小狗和主人同时从 ...

  7. 洛谷P1129 【ZJOI2007】矩阵游戏

    原题传送门 题目描述 小QQ是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N \times NN×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每 ...

  8. python网络框架Twisted

    什么是Twisted Twisted是一个用python语言写的事件驱动网络框架,它支持很多种协议,包括UDP,TCP,TLS和其他应用层协议,比如HTTP,SMTP,NNTM,IRC,XMPP/Ja ...

  9. Joomla - 权限系统(访问权限限制)

    Joomla - 权限系统,以下以全局配置的权限设置为例,每个扩展都有自己的权限设置

  10. 一台电脑同时添加git和bitbucket两个网站的ssh key

    添加第一个ssh key 就不多说了,不懂的可以自己查资料 ssh-keygen -t rsa -C 'email_1@email.com' 然后一路enter就好了 假设已经添加好了git的ssh ...