在VUE中实现打印
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中实现打印的更多相关文章
- vue项目中批量打印二维码
前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
- [Vue] vue中setInterval的问题
vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...
- vue(6)—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- vue中遇到的坑!!!!!
一 .vue安装的坑 报错时的常见问题 1.cnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 –save(关于 ...
随机推荐
- [NOIP2019模拟赛]数数(gcd)
题目大意: 求l~r中有多少数与x互质,带单点修改 分析: 两个30的部分分很好打: ·n<=1000暴力O(nq)就好了 ·$a_i<=100$用树状数组维护每个x的前缀和就好了 100 ...
- Android开发 控件阴影详情
如何给控件设置阴影? <com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" andr ...
- LoadRunner例子:检查点为参数的一个例子
LoadRunner例子:检查点为参数的一个例子 检查点是LoadRunner的一个功能,用来验证业务功能的正确性.如果检查的内容是变化的,脚本该如何写呢? 问题提出:LoadRunner订票网站例子 ...
- LinkedHashMap笔记
一.最基本元素存储单元 /** * HashMap.Node subclass for normal LinkedHashMap entries. */ static class Entry<K ...
- ng-zorro-mobile中遇到的问题
一.Modal(弹出框)使用上的问题 在官方文档中,Modal是这样使用的: 这里需要注意的一点就是,看到上方代码中只用了Modal的全局方式,所以个人认为下面这段注入初始化的东西是没有用的便去掉: ...
- PHPstorm同步服务器代码的缺点---命名空间undefined
在把一个服务器的代码同步到phpstorm下开发的时候,发现新建的命名空间代码都失效了,然而换到 https://blog.csdn.net/afraid_to_have/article/deta ...
- Python import用法以及与from...import的区别
Python import用法以及与from...import的区别 在python用import或者from...import来导入相应的模块.模块其实就是一些函数和类的集合文件,它能实现一些相应的 ...
- fastjson过滤字段
1.注解(字段上添加) @JSONField(serialize=false) 2.过滤器 PropertyFilter propertyFilter = new PropertyFilter() { ...
- 03_springmvc整合mybatis
一.整合思路 springmvc+mybaits的系统架构: 第一步整合dao层:mybatis和spring整合:通过spring管理mapper接口,使用mapper的扫描器自动扫描mapper接 ...
- springboot整合aop实现网站访问日志记录
目的: 统一日志输出格式,统计访问网站的ip. 思路: 1.针对不同的调用场景定义不同的注解,目前想的是接口层和服务层. 2.我设想的接口层和服务层的区别在于: (1)接口层可以打印客户端IP,而服务 ...