Vue实现打印功能(vue-print-nb)

1、安装依赖

npm install vue-print-nb --save

2、在main.js中引入

import Print from 'vue-print-nb'
Vue.use(Print)

3、在组件的打印区域标签上加 id=“printArea”

<div id="printArea"> 打印区域 </div>

4、在组件的打印按钮标签上使用指令 v-print=“print”,print是配置对象

<el-button v-print="print" type="primary">打印</el-button>

5、在组件的data中定义print配置对象

print: {id: 'printArea',popTitle: '打印', // 打印配置页上方标题extraHead: '', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)previewTitle: '', // 打印预览的标题(开启预览模式后出现),previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)   previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)beforeOpenCallback() {}, // 开启打印前的回调事件openCallback() {}, // 调用打印之后的回调事件closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)url: '',standard: '',extraCss: '',},

打印过滤(隐藏打印区域不需要打印的内容)
只需要在组件的打印区域里,给需要隐藏的内容的标签上添加

class="noprint"
.noprint {display: none}

配置打印的样式
在全局样式中,新增标签,里面是打印时才生效的样式

<style media="print">
@page {size: auto;margin: 3mm;
}html {background-color: #ffffff;height: auto;margin: 0px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Halcon将彩色图像二值化,并保存结果

* 读取彩色图像 read_image(Image, /zu.jpg) * 将彩色图像转换为灰度图像 rgb1_to_gray(Image, GrayImage) * 对灰度图像进行二值化处理 binary_threshold (GrayImage, Region, max_separability, dark, UsedThreshold) * 显示转换后的二值图像 dev_display (Region) write…

UML---活动图

活动图概述 活动图&#xff08;Activity Diagram&#xff09;是UML&#xff08;Unified Modeling Language&#xff0c;统一建模语言&#xff09;中的一种行为建模工具&#xff0c;主要用于描述系统或业务流程中的一系列活动或操作。活动图通常用于描述用例中的行为&#xff0c…

opengl pyqt 显示文字

目录 效果图 效果图 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QOpenGLWidgetfrom OpenGL.GL import * from OpenGL.GLUT import * from OpenGL.GLU import *class OpenGLWidget(QOpenGLWidget):def __init__(self, parentNone):super(OpenGLWidget…

开源分子对接程序rDock的安装及使用流程

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 前言 本文介绍开源分子对接程序rDock在Linux Ubuntu 22.04系统上的conda安装、编译安装过程及程序使用流程。 一、rDock是什么&#xff1f; rDock来源 rDock是一个快速、多功能的开源对接程序&#xff0c;可用…

IOS不使用默认的mainStroryboard作为首个controller的方法

步骤1&#xff1a; 删除info.plist文件下的一条配置&#xff0c;如图 步骤2&#xff1a; 编辑AppDelegate.m&#xff0c;参考以下代码 interface AppDelegate () //property (strong, nonatomic) UIWindow * window; property(nonatomic,strong) UIWindow * win; property(…

【Ubuntu】使用WSL安装Ubuntu

WSL 适用于 Linux 的 Windows 子系统 (WSL) 是 Windows 的一项功能&#xff0c;可用于在 Windows 计算机上运行 Linux 环境&#xff0c;而无需单独的虚拟机或双引导。 WSL 旨在为希望同时使用 Windows 和 Linux 的开发人员提供无缝高效的体验。安装 Linux 发行版时&#xff0c…

K8s安全一

Kubernetes是一个开源的&#xff0c;用于编排云平台中多个主机上的容器化的应用&#xff0c;目标是让部署容器化的应用能简单并且高效的使用, 提供了应用部署&#xff0c;规划&#xff0c;更新&#xff0c;维护的一种机制。其核心的特点就是能够自主的管理容器来保证云平台中的…

医院信息系统(HIS):一文扫盲,算是所有信息系统里面复杂的

大家好&#xff0c;我是贝格前端工场&#xff0c;本期继续分享常见的B端管理系统&#xff0c;欢迎大家关注&#xff0c;如有B端写系统界面的设计和前端需求&#xff0c;可以联络我们。 一、什么是HIS系统 HIS系统&#xff08;Hospital Information System&#xff09;是医院信…

K线实战分析系列之三:吞没形态

K线实战分析系列之三&#xff1a;吞没形态 一、吞没形态二、看涨吞没形态三、看跌吞没形态四、吞没形态判别标准 一、吞没形态 两根或两根以上的K线形成的组合形态&#xff0c;吞没形态就是一种主要的反转形态。 这个形态由两根K线组成&#xff0c;前短后长&#xff0c;一阴一…

第三百六十五回

文章目录 1. 概念介绍2. 方法与信息2.1 获取方法2.2 详细信息 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何获取设备信息"相关的内容&#xff0c;本章回中将介绍如何获取App自身的信息.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…

LeetCode LCR 085.括号生成

正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&#xff1a; 输入&#x…

备战蓝桥杯—— 双指针技巧巧答链表1

对于单链表相关的问题&#xff0c;双指针技巧是一种非常广泛且有效的解决方法。以下是一些常见问题以及使用双指针技巧解决&#xff1a; 合并两个有序链表&#xff1a; 使用两个指针分别指向两个链表的头部&#xff0c;逐一比较节点的值&#xff0c;将较小的节点链接到结果链表…

leetcode单调栈

739. 每日温度 请根据每日 气温 列表&#xff0c;重新生成一个列表。对应位置的输出为&#xff1a;要想观测到更高的气温&#xff0c;至少需要等待的天数。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 例如&#xff0c;给定一个列表 temperatures [73, …

利用python获取一部电视剧中的相关关键字台词的内容

需要使用Python的文本处理库和在线API。以下是基本步骤&#xff1a; 1. 获取电视剧字幕或剧本: 你可以从网上下载电视剧的字幕文件&#xff08;通常是.srt格式&#xff09;或剧本。 如果你无法直接获取&#xff0c;可以考虑使用屏幕抓取技术&#xff08;如Selenium&#xff0…

【Linux】 logout命令使用

logout命令 Linux logout命令用于前登录的用户退出系统。 它会终止当前用户的会话并返回到登录界面或者重新登录。当使用logout命令时&#xff0c;系统会关闭所有与当前用户相关的进程和程序&#xff0c;并释放占用的资源。 使用logout命令可以方便地切换用户或者注销当前用…

vue教程

v 创建一个vue实例插值表达式{{}}vue响应式特性vue指令v-if vs. v-show 指令v-else-if 指令v-on指令 注册监听内联语句methods中的函数名![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8b9d81539ba74e6691b27694813e0f65.png)v-on 调用传参 v-bind 动态的设置html…

Machine Learning - 机器学习笔记

文章目录 1. 机器学习简介1.1 机器学习是什么&#xff1f; 2. 机器学习分类2.1 监督学习2.2 无监督学习 3. 初识机器学习3.1 线性回归模型3.2 代价函数3.2.1 代价函数公式3.2.2 理解代价函数 4. 了解梯度下降算法4.1 梯度下降4.2 梯度下降的实现4.3 理解梯度下降4.4 学习率4.5 …

MobaXterm连接VirtualBox虚拟机

目录 1.下载MobaXterm 2.获取连接配置 3.mobaXterm连接虚拟机 4.更好的方案 1.下载MobaXterm 据说MobaXtrem是远程终端的超级全能神器,官网下载地址&#xff1a;MobaXterm free Xserver and tabbed SSH client for Windows 选择适合你的版本&#xff1a;一个是Home Editi…

Matlab/simulink光伏发电的扰动观察法MPPT仿真(持续更新)

1.光伏发电的电导增量法MPPT仿真 2.光伏发电的恒定电压法MPPT仿真 3.光伏发电的扰动观察法MPPT仿真 4.光伏发电的占空比法MPPT仿真 5.基于神经网络的MPPT光伏发电仿真 6. 基于模糊控制的MPPT光伏发电仿真 7. 基于粒子群算法&#xff08;PSO&#xff09;的500w光伏系统MPPT控…

洛谷P8869 [传智杯 #5 初赛] A-莲子的软件工程学

#先看题目 题目背景 在宇宙射线的轰击下&#xff0c;莲子电脑里的一些她自己预定义的函数被损坏了。 对于一名理科生来说&#xff0c;各种软件在学习和研究中是非常重要的。为了尽快恢复她电脑上的软件的正常使用&#xff0c;她需要尽快地重新编写这么一些函数。 题目描述 …