vue实现打印功能的两种方法
第一种方法:通过npm 安装插件
1,安装 npm install vue-print-nb --save
2,引入 安装好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print); //注册
3,现在就可以使用了
<div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <button v-print="'#printTest'">打印</button>
4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。
5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。
第二种方法:手动下载插件到本地
插件地址:https://github.com/xyl66/vuePlugs_printjs
1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下
import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print">
打印内容
<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用
2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
3.指定不打印区域
方法1. 添加no-print样式类
<div class="no-print">不要打印我</div>
方法2. 自定义类名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
vue实现打印功能的两种方法的更多相关文章
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- java打印等腰三角形的两种方法!(根据行数,根据底边长度)
首先来看根据用户输入的底边的长度判断: package cn.edu.nwpu.java; import java.util.Scanner; public class IsoscelesTriang ...
- Android下打印堆栈的两种方法
1. for(StackTraceElement i:Thread.currentThread().getStackTrace()){ System.out.println(i); } 2. Log. ...
- 解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法
import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app' ...
- Vue 创建组件的两种方法
地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...
- 两种方法使vue实现jQuery调用
引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...
- vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法
最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...
- R语言中将hello打印10次的两种方法
我们有两种方法来做这件事情: 1.for结构 for循环重复的执行一个语句,直到某个变量的值不再包含在序列seq中为止. 语法: for (var in seq) statement 例如: > ...
- python中执行shell的两种方法总结
这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...
随机推荐
- [Swift]LeetCode633. 平方数之和 | Sum of Square Numbers
Given a non-negative integer c, your task is to decide whether there're two integers a and b such th ...
- mysql与PHP建立连接实现增删查改
mysql与PHP连接的查询写法: <?php //1.建立与数据库的连接 //类似于宽字符集问题,mysqli是额外的扩展 //需要找到配置文件去开启扩展 //如果需要在调用函数 之前忽略错误 ...
- 学习Python--函数进阶
函数进阶 目标 函数参数和返回值的作用 函数的返回值 进阶 函数的参数 进阶 递归函数 01. 函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以 相互组合,一共有 4 种 组合形 ...
- Dockerfile指令介绍
FROM:指定基础镜像 在Dockerfile中FROM是必备的指令,用于指定基础的镜像. FROM centos:latest LABEL:指定镜像标签 LABEL指令用来指定镜像的标签. 格式: ...
- SQLplus下命令输入错误如何删掉重新输入
如下当我们输入命令出错时想删掉重新输入,按delete或者backspace键无法删除且出现如下情况: SQL> show urerej ^H^H^H^H^H 可以是使用ctrl+backsp ...
- 华为oj之等差数列前n项和
题目: 等差数列 热度指数:1010 时间限制:1秒 空间限制:32768K 题目描述 功能: 对于等差数列 2,5,8,11,14- 输入: 正整数N >0 输出: 求等差数列前N项和 返回: ...
- 在Mac电脑编译c51程序
如果不是Seven问起来,我以为C51这种东西已经属于历史遗迹了.不过简单搜索了一下,发现c51老而弥坚,仍然茁壮的生长着.原因据说,一方面是有很大的用户群和既有的软硬件资源,另外一方面,的确在很多的 ...
- vue的基本操作
vue的基本概念 挂载点:就是el属性对应html中的节点,实例只会处理挂载点下的内容. 模版:在挂载点内部的内容,也可以将模版内容卸载实例里面 如果有template属性会用模版替换外部html ...
- 为VIP解决问题时写的源码
平时为学生们解决问题时,建立的项目源代码,方便大家学习与讨论. 开源DEMO列表 1. https://github.com/bfyxzls/student_orderBy 2. https://gi ...
- 【c#】RabbitMQ学习文档(一)Hello World
一.简介 RabbitMQ是一个消息的代理器,用于接收和发送消息,你可以这样想,他就是一个邮局,当您把需要寄送的邮件投递到邮筒之时,你可以确定的是邮递员先生肯定会把邮件发送到需要接收邮件的人的手里,不 ...