Vue打印功能

news/2024/11/23 2:08:07/

这里介绍一个插件(vue-print-nb),蛮好用的,用起来很方便,所以想记录一下 

npm官方: https://www.npmjs.com/package/vue-print-nb

安装 

V2版本

npm install vue-print-nb --save

V3版本 

npm install vue3-print-nb --save

引入 

V2版本 

main.js 

import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);//or// Local instruction
import print from 'vue-print-nb'directives: {print   
}

V3版本 

main.js 

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')//or// Local instruction
import print from 'vue3-print-nb'directives: {print   
}

使用 

目前我使用的是Vue2,所以以V2为例介绍。vue3和vue2使用基本是一样的。

1. 打印整个页面: 

只需要添加 v-print 指令即可 

<button v-print>Print the entire page</button>

 2. 打印某个范围:

我们要给打印的一个区域一个id,然后在 v-print 指令指定该id即可 

<button v-print="'#print-content'">打印</button>
<div id="print-content"><p>葫芦娃,葫芦娃</p><p>一根藤上七朵花 </p><p>小小树藤是我家 啦啦啦啦 </p><p>叮当当咚咚当当 浇不大</p><p> 叮当当咚咚当当 是我家</p><p> 啦啦啦啦</p><p>...</p>
</div>

3. 也可以给 v-print 指令设置对应的各个配置: 

参数作用类型可选项默认值
id局部打印有效,标识符String-'printId'
standard局部打印有效,打印的文本类型StringHTML5/loose/strictHTML5
extraHead局部打印有效,添加在打印区域的最顶端String--
extraCss局部打印有效,为打印区域提供Stylesheet样式表String--
popTitle局部打印有效,编辑页眉的标题String-Document Title
clickMounted全局有效,调用v-print绑定的按钮点击事件callbackFunction-this.Object
openCallback全局有效,调用打印时的callbackFunction-this.Object
closeCallback全局有效,调用关闭打印的callback(无法区分确认or取消)Function-this.Object
beforeOpenCallback全局有效,调用开始打印之前的callbackFunction-this.Object
preview全局有效,控制打印预览Booleantrue/falsefalse
previewTitle编辑预览页面的预览标题String-‘打印预览’
previewPrintBtnLabel编辑预览页面的打印按钮文本String-‘打印’
previewBeforeOpenCallback调用打开预览页面之前的callbackFunction-this.Object
previewOpenCallback调用打开预览页面之后的callbackFunction-this.Object
url非局部打印有效,打印指定的URL,确保同源策略相同String--
asyncUrl非局部打印有效,异步加载打印指定的URL,确保同源策略相同Function--
zIndex预览有效,预览窗口的z-index,默认是20002,最好比默认值更高String,Number-20002
<template><div class="main"><button v-print="printObj" @click="print">打印</button><div id="print-content"><p>葫芦娃,葫芦娃</p><p>一根藤上七朵花 </p><p>小小树藤是我家 啦啦啦啦 </p><p>叮当当咚咚当当 浇不大</p><p> 叮当当咚咚当当 是我家</p><p> 啦啦啦啦</p><p>...</p></div><h2>哈哈哈哈哈哈</h2></div>
</template>
<script>
export default {data() {return {printObj: {id: 'print-content',popTitle: 'good print', // 如果不设置 默认是没有值即 undifined}}}
}

写的有点儿仓促,基本使用应该够用了,碰到复杂的需求或者其他的到时候再研究,先记录一下。


http://www.ppmy.cn/news/11560.html

相关文章

Anaconda安装环境下载慢以及pip下载慢

一、下载慢Anaconda 是一个用于科学计算的 Python 发行版&#xff0c;支持 Linux, Mac, Windows, 包含了众多流行的科学计算、数据分析的 Python 包。Anaconda 安装包可以到 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 下载。TUNA 还提供了 Anaconda 仓库与第三方…

CANoe-Model Editor介绍以及如何创建一个服务

Model Editor,模型编辑器,可以打开导入的ARXML文件,编辑现有的或定义新的应用层对象(CO、DO) 什么是CO和DO? Model Editor页面的整体布局为: 在左侧的子窗口中,你可以选择要编辑的内容根据你的选择,相应的内容将显示在右侧根据你在此处的选择,你可以使用其他拆分器来…

Orin 编译UEFI

文章目录1.前言2. 下载源码3.编译3.1 基础安装3.2 安装mogo3.3 安装 Stuart4.下载使用1.前言 (Unified Extensible Firmware Interface&#xff0c;缩写UEFI&#xff09;是一种个人电脑系统规格&#xff0c;用来定义操作系统与系统固件之间的软件界面&#xff0c;作为BIOS的替…

【Flink系列】部署篇(一):Flink集群部署

主要回答以下问题&#xff1a; Flink集群是由哪些组件组成的&#xff1f;它们彼此之间如何协调工作的&#xff1f;在Flink中job, task, slots,parallelism是什么意思&#xff1f;集群中的资源是如何调度和分配的&#xff1f;如何搭建一个Flink集群&#xff1f;如何配置高可用服…

Linux项目自动化构建工具-make/Makefifile

目录 背景 实例代码 依赖关系 依赖方法 原理 项目清理 可重复执行的依据 背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系…

华为交换机、路由器设备批量配置端口方法步骤

华为交换机、路由器批量配置端口方法步骤 在现实工作中&#xff0c;如果要对多个端口做同样的配置&#xff0c;每个接口逐一进行相同的配置&#xff0c;很容易出错&#xff0c;而且造成大量重复工作。 配置端口组功能就可以解决这个问题啦。 你只需要将这些以太网接口加入同一…

RocketMQ部署详解

上篇文章已经介绍过RocketMQ&#xff0c;这里就不再写了&#xff0c;下面直入主题&#xff0c;介绍RocketMQ安装 因为RocketMQ是基于Java开发的&#xff0c;所以安装RocketMQ之前&#xff0c;我们需要先安装JDK&#xff0c;因为服务器一般采用Linux&#xff0c;所以本文只介绍基…

【C/C++】静态顺序表详解(附完整源码)

本章内容 1.什么是线性表 2.什么是顺序表 3.静态顺序表结构的定义 4.静态顺序表的函数接口实现 5.静态顺序表的问题及思考 1.什么是线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&…