关于打印工具print-js的使用
https://www.jianshu.com/p/f6f09dd9f7db
第一步 安装组件
//安装print-js
npm install print-js --save
//删除print-js
npm uninstall print-js
//安装固定版本
npm install print-js@版本号 --save
// 全局安装
npm install print-js --save -g第二步 引入组件
安装成功后,可以在当前目录下得根目录下的package.json文件查看。
可以全局引入即(在main.js中引入),也可以在需要的文件里面引入
import print from"print-js";第三步 使用组件,(这里使用的是局部引入)
<template><div id="printTable"> </div> <div @click="bindPrint">打印</div>
</template>
<script>import print from "print-js"export default {data () {return {}},methods:{bindPrint( () => {printJS({printable: "printTable",type:'html',header:null,targetStyles:['*'],style:"@page {margin:0 10mm}"})})}}
</script>print-js 参数配置
参数 | 类型 | 说明 | 可选值 | 默认值 |
printable | String、Object | pdf或图像url、html元素id或json数据对象。 | null | null |
type | String | 打印的类型 | pdf, html, image, json and raw-html | 'pdf' |
header | String、Boolean | 用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。 | null | true |
headerStyle | String | 要应用于标题文本的可选标题样式 | null | 'font-weight: 300;' |
maxWidth | Number | 最大文档宽度(以像素为单位)。根据需要更改此项。打印HTML、图像或JSON时使用。 | null | 800 |
css | String | 这允许我们传递一个或多个css文件URL,这些URL应应用于正在打印的html。值可以是具有单个URL的字符串,也可以是具有多个URL的数组。 | null | null |
style | String | 这允许我们传递一个自定义样式的字符串,该字符串应用于正在打印的html。 | null | null |
scanStyles | Boolean | 设置为false时,库不会处理应用于正在打印的html的样式。使用css参数时非常有用。 | true, false | true |
targetStyle | String | 默认情况下,打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。示例: ['padding-top', 'border-bottom'] | null | null |
targetStyles | 但是,与“targetStyle”相同,这将处理一系列样式中的任何样式。例如:['border', 'padding'],将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。也可以传递['*']来处理所有样式。 | null | null | |
ignoreElements | Array | 接受打印父html元素时应忽略的html ID数组。 | null | [ ] |
properties | String | 打印JSON时使用。这些是对象属性名称。 | null | null |
gridHeaderStyle | String | 打印JSON数据时网格标题的可选样式。 | null | 'font-weight: bold;' |
gridStyle | String | 打印JSON数据时网格行的可选样式。 | null | 'border: 1px solid lightgray; margin-bottom: -1px;' |
repeatTableHeader | Boolean | 打印JSON数据时使用。设置为false时,数据表标题将仅显示在第一页中。 | true,false | true |
showModal | 启用此选项可在检索或处理大型PDF文件时显示用户反馈。 | null | null | |
modalMessage | String | showModal设置为true时向用户显示的消息。 | null | 'Retrieving Document...' |
onLoadingStart | function | 加载PDF时要执行的函数 | null | null |
onLoadingEnd | function | 加载PDF后要执行的函数 | null | null |
documentTitle | String | 打印html、图像或json时,这将显示为文档标题。 | null | null |
fallbackPrintable | 打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递到“可打印”中的原始pdf文档。如果在备用pdf文件中插入javascript,这可能很有用。 | null | null | |
onPdfOpen | 打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,发生这种情况时将执行回调函数。在某些情况下,如果您希望处理打印流、更新用户界面等,它可能会很有用。 | null | null | |
onPrintDialogClose | 浏览器打印对话框关闭后执行回调函数。 | null | null | |
base64 | Boolean | 打印作为base64数据传递的PDF文档时使用。 | true,false | false |
相关文章:
关于打印工具print-js的使用
https://www.jianshu.com/p/f6f09dd9f7db第一步 安装组件//安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js版本号 --save // 全局安装 npm install print-js --save -g第二步 引入组件安装成功后&#…...
Doxygen使用
文章目录简介Doxygen的安装Doxygen的配置生成配置文件常用配置Doxygen注释头文件注释:函数的注释:Doxygen文档生成reference简介 Doxygen 是一个流行的用于生产代码文档的工具,关于它的介绍可以参考官网:https://www.doxygen.nl/index.html。 我使用Dox…...
MySQL数据库调优————表结构设计优化
三范式 第一范式 字段具有原子性,即数据库表的每一个字段都是不可分割的原子数据项,不能是集合、数组、记录等非原子数据项当实体中的每个属性有多个值时,必须拆分为不同的属性 第二范式 满足第一范式的基础上,要求每一行数据…...
set对象和map对象
1 Set对象 介绍: Set数据结构类似数组,但所有成员的值唯一。 Set本身为一个构造函数,用来生成 Set数据结构,使用 add方法来添加新成员。 let a new Set(); [1,2,2,1,3,4,5,4,5].forEach(x>a.add(x)); for(let k of a){ console.log(k…...
stream()流的使用
文章目录引入流流的操作中间操作终端操作流的使用谓词筛选筛选各异的元素流的切片截断流跳过元素映射流的扁平化查找和匹配归约元素求和、最大值和最小值数值流构建流由值构建流由数组创建流引入流 java api提供的一种利用声明式的方式处理数据集合的一个东西,可以…...
C++学习笔记-常量
在程序执行过程中,其值不能改变的量称为常量(Constant)。普通常量的类型是根据数据的书写形式来决定的。如 100 是整型常量,0.5 是实型常量,‘q’ 是字符型常量,“qianfeng” 是字符串常量。 常量是固定值,在程序执行期…...
JavaScript系列之实现继承的几种方式
文章の目录一、借助父构造函数继承属性1、实现方式2、优点3、缺点二、原型链继承1、实现方式2、优点3、缺点三、组合继承四、ES6继承的实现方式参考写在最后一、借助父构造函数继承属性 1、实现方式 先定义一个父构造函数(this指向为window);再定义一个子构造函数…...
java面试准备
1.自我介绍: 2.基础 : 1.集合 : java容器中分为collection 和map两大类 collection 分为list集合(有序且重复的),set集合(无序,不可重复) list集合分为arrayList集合 : 查询快,增删慢,它是基于数组结构的,对数据的增删是在数组的尾部进行添加或删除的,其效率相对于LinkedList…...
kafka-6-python单线程操作kafka
使用Python操作Kafka:KafkaProducer、KafkaConsumer Python kafka-python API的帮助文档 1 kafka tools连接 (1)/usr/local/kafka_2.13-3.4.0/config/server.properties listeners PLAINTEXT://myubuntu:9092 advertised.listenersPLAINTEXT://192.168.1.8:2909…...
【Spring教程】1.Spring概述
1、概述 1.1、Spring是什么? Spring 是一款主流的 Java EE 轻量级开源框架 ,Spring 由“Spring 之父”Rod Johnson 提出并创立,其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发。从简单性、可测…...
设计模式-代理模式
控制和管理访问 玩过扮白脸,扮黑脸的游戏吗?你是一个白脸,提供很好且很友善的服务,但是你不希望每个人都叫你做事,所以找了黑脸控制对你的访问。这就是代理要做的:控制和管理对象。 监视器编码 需求&…...
DPDK — MALLOC(librte_malloc,Memory Manager,内存管理组件)
目录 文章目录 目录MALLOC(librte_malloc,Memory Manager,内存管理组件)rte_malloc() 接口malloc_heap 结构体malloc_elem 结构体内存初始化流程内存申请流程内存释放流程MALLOC(librte_malloc,Memory Manager,内存管理组件) MALLOC 库基于 hugetlbfs 内核文件系统来实…...
【Java开发】Spring 12 :Spring IOC控制反转和依赖注入(解决单接口多实现类调用)
IOC 是 Inversion of Control 的简写,译为“控制反转”,Spring 通过 IOC 容器来管理所有 Java 对象的实例化和初始化,控制对象与对象之间的依赖关系。我们将由 IOC 容器管理的 Java 对象称为 Spring Bean,它与使用关键字 new 创建…...
【C++学习】基础语法(三)
众所周知C语言是面向过程的编程语言,关注的是过程;解决问题前,需要分析求解的步骤,然后编辑函数逐步解决问题。C是基于面向对象的,关注的是对象,将一件事拆分成不同的对象,不同对象间交互解决问…...
k8s自动化安装脚本(kubeadm-1.23.7)
文章目录介绍软件架构版本介绍更新内容2023-02-192023-02-152023-02-142023-02-102022-10-202022-08-06准备部署包操作步骤环境准备结构备注解压部署包修改host文件脚本使用方式初始化环境验证ansible配置安装k8s集群登录master的节点添加node节点master节点状态检查组件安装安…...
面试题记录
Set与Map的区别 map是键值对,set是值的集合。键,值可以是任何类型map可以通过get获取,map不能。都能通过迭代器进行for…of遍历set的值是唯一的,可以做数组去重,map,没有格式限制,可以存储数据…...
链式前向星介绍以及原理
1 链式前向星 1.1 简介 链式前向星可用于存储图,本质上是一个静态链表。 一般来说,存储图常见的两种方式为: 邻接矩阵邻接表 邻接表的实现一般使用数组实现,而链式前向星就是使用链表实现的邻接表。 1.2 出处 出处可参考此…...
jenkins 安装 -适用于在线安装 后续写个离线安装的
jenkins安装1.下载jenkins2.安装启动3.附件卸载jdk的命令4.配置jenkins一、在jenkins配置文件中配置jdk环境变量二、修改jenkins默认的操作用户1.下载jenkins jenkins官网下载 https://www.jenkins.io/ 点击下载 我是centos系统所以选择centos,点击后按着官方提供…...
【C++】再谈vscode界面调试C++程序(linux) - 知识点目录
再谈vscode界面调试C程序(linux) 配套文档:vscode界面调试C程序(linux) 命令解释 g -g ../main.cpp 编译main.cpp文件; -g:生成调试信息。编译器会在可执行文件中嵌入符号表和源代码文件名&…...
蚂蚁感冒---第五届蓝桥杯真题
目录 题目链接 题目描述 分析: 代码: y总综合 666 题目链接 1211. 蚂蚁感冒 - AcWing题库 题目描述 分析: y总真牛逼,掉头等价于穿过,以第一个点为分界点,分别判断 代码: (自…...
别再手动画封装了!用嘉立创EDA免费库5分钟搞定Altium Designer缺失的器件
5分钟极速救援:用嘉立创EDA破解Altium Designer封装缺失难题 深夜11点,李工盯着屏幕上闪烁的光标和半成品的PCB布局图,额头渗出细密的汗珠。项目交付截止前48小时,团队突然发现Altium Designer官方库中缺少关键芯片TPS5430DDAR的封…...
SGMICRO圣邦微 SGM803B-JXN3G/TR SOT-23-3 监控和复位芯片
特性 适用于MAX803/MAX809/MAX810和ADM803/ADM809/ADM810的卓越升级版 高精度固定检测选项:3V、3.3V和5V 低供电电流:300nA(典型值)上电复位脉冲宽度:150毫秒(最小值) 复位输出选项: 开漏nRESET输出(SGM803B)推挽nRESET输出(SGM809B) . . 推挽复位输出(SGM810B)复位有效电压低至…...
Tomato Novel Downloader:智能搜索功能的技术突破
Tomato Novel Downloader:智能搜索功能的技术突破 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 在数字阅读工具领域,用户体验的每一个细节都可能决定…...
GLM-OCR模型Node.js环境配置与API服务搭建全指南
GLM-OCR模型Node.js环境配置与API服务搭建全指南 你是不是也遇到过这样的场景?手头有一堆图片需要提取文字,比如扫描的文档、截图或者手机拍的照片。自己手动录入?效率太低。用现成的在线OCR工具?又担心数据安全和调用限制。特别…...
BabyOS:MCU裸机开发的轻量级框架解析
1. BabyOS:专为MCU裸机开发设计的轻量级框架 在嵌入式开发领域,重复造轮子一直是困扰工程师的痛点。每次新项目启动,我们总需要重新调试那些基础功能模块——从串口通信到Flash操作,从定时器管理到协议栈实现。BabyOS的出现&#…...
4个维度解析Steam Achievement Manager:开源工具如何重塑游戏成就管理体验
4个维度解析Steam Achievement Manager:开源工具如何重塑游戏成就管理体验 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager 一、困境诊断&#…...
期权到期日别慌!手把手教你搞定上交所股票期权的行权与交割(附避坑清单)
期权到期日实战指南:从行权准备到交割避坑全流程解析 手机屏幕上的红色倒计时提醒着期权合约即将到期,作为刚接触期权交易不久的新手,此刻最需要的不再是复杂的概念解释,而是一份能握在手中的应急操作清单。本文将用最直白的语言拆…...
CYBER-VISION零号协议互联网舆情智能监测与分析系统
CYBER-VISION零号协议:构建你的互联网舆情智能监测雷达 最近和几个做市场、公关的朋友聊天,他们都在抱怨同一个问题:每天花大量时间刷新闻、看社交媒体,就为了捕捉行业动态和用户反馈,生怕错过什么重要信息。人工监测…...
isaac lab5.0与ROS2通信
问题:isaac lab 5.0是基于python3.11 ros2是基于python3.10,因此不能在isaac sim的代码中直接写ros2的代码 在isaac sim中加import socketdef send_to_ros2(v, w):try:sock socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.connect((127.0.0.1…...
联想新品入局,AI智能终端市场格局生变
联想新品发布,直击Mac mini“养虾”痛点2026年3月31日,联想集团正式发布YOGA AI Mini与Think AI Tiny两款AI原生智能终端。其中,YOGA AI Mini面向个人消费市场,精准对标当下被众多用户用于运行OpenClaw的Mac mini。Mac mini虽因便…...
