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. U-BOOT 命令的介绍

    U­BOOT 常用命令 通常使用 help(或者只使用问号?),来查看所有的 U­BOOT 命令.将会列出在当前配置下所有支持的命令. 但是我们要注意,尽管 U­BOOT 提供了很多配置选项,并不是所 ...

  2. (转)FastCgi与PHP-fpm之间是个什么样的关系

    首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  3. 如何在Vue项目中使用Element组件

    [前提] 1.安装webpack    cnpm install webpack -g 2.安装vue/vue-cli    cnpm install vue vue-cli -g 3.初始化vue  ...

  4. Android开发 从代码里设置Drawable图片不显示的问题

    问题描述 我们从代码里获得Drawable在设置给View时会发现,图片不显示的问题.比如如下代码: Drawable drawable = getResources().getDrawable(R. ...

  5. 《OpenCV3编程入门》 札记

    图像处理和计算机视觉的区别在于: 图像处理侧重于 "处理"图像 --- 如增强,还原,去噪,分割,等等:而计算机视觉重点在于使用计算机(也许是可移动式的)来模拟人的视觉,因此模拟菜 ...

  6. openssl操作公私钥和加解密的一些常用命令

    生成公私钥实践: 生成私钥,这里以椭圆曲线secp256k1为例: openssl ecparam -name secp256k1 -genkey -out secp256k1-priv.pem #带 ...

  7. 关于IOC

    1. [调侃]IOC前世今生 http://www.cnblogs.com/showjan/p/3950989.html#!comments 2. 使用ConfigurationManager类 读写 ...

  8. 0903NOIP模拟测试赛后总结

    分-rank33.这次考试心态挂了. 拿到题目通读三道题,发现都十分恶心. 然后把时间押到了T1上.将近两个小时,打了个dfs,一直调调调. 最后没调出来,手模了个数据就把自己两个小时的思路hack了 ...

  9. vue2.0 使用webpack搭建项目遇到的最搞笑的坑

    报错如下: 源码: 然后找了半天没搞明白... 无意中翻看了一下ES6语法规则.. 然后我发现:源代码最后一行要空一行,我心想这什么狗屁规定?MMP

  10. 为WCF增加UDP绑定(储备篇)

    日前我开发的服装DRP需要用到即时通信方面的技术,比如当下级店铺开出零售单时上级机构能实时收到XX店铺XX时XX分卖出XX款衣服X件之类的信息,当然在上级发货时,店铺里也能收到已经发货的提醒.即时通信 ...