在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(关于 ...
随机推荐
- java 上传MultipartFile和String post请求
/** * POST Multipart Request * @Description: * @param requestUrl 请求url * @param requestText 请求参数 * @ ...
- Android开发 音视频开发需要了解的专业术语知识
前言 在摸索一段时间的音视频开发后,越来越发现这个坑的深度真是特别的深. 除了了解Android自带的音视频处理API以外,还得了解一些视频与音频方面的知识.这篇博客就是主要讲解这方面的专业术语.内容 ...
- css实现字母或数字强制换行
//换行white-space:normal;word-break:break-all;word-wrap: break-word; 相关属性white-space: normal|pre|nowra ...
- this指针/常函数、常对象
this指针引入 类中对象的成员变量和成员函数是分开存储的,sizeof(空class) = 1,另外示例中涉及到字节对齐的问题,double本身的字节为8,int为4,由于字节对齐,int也为8,所 ...
- fastjson json转linkedhashmap为null
试了几种JSONObject.parseObject的方法,返回的都是null: 使用Gson就可以转成功. LinkedHashMap<String, String> map = gso ...
- php多维数组
一个数组中的值可以是另一个数组,另一个数组的值也可以是一个数组.依照这种方式,我们可以创建二维或者三维数组: 实例 <?php // A two-dimensional array: $cars ...
- 自定义HtmlHelper扩展方法
核心:通过TagBuilder类实现Html元素的创建 TagBuilder: 前台调用: @Html.Messger("tag","span-tag", @V ...
- JS实用插件
1. jQuery鼠标滚轮事件插件Mouse Wheel 下载链接:https://github.com/brandonaaron/jquery-mousewheel/ 使用方法: // using ...
- Link-Cut Tree(LCT)
转载自LCT(Link-Cut Tree)详解(蒟蒻自留地) 如果你还没有接触过LCT,你可以先看一看这里: (看不懂没关系,先留个大概的印像)http://www.cnblogs.com/BLADE ...
- [转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox
反反复复考虑后,准备把这一章的切入点瞄准ListBox.并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox ...