当前位置：首页 > news >正文

【Vue + Print.js】前端打印，自定义字体大小，自定义样式，封装共享样式

news 来源：原创 2025/9/22 14:32:52

在前端开发中，打印功能是一个常见的需求，尤其是在生成报表、打印用户资料或者导出文档时，通常需要通过前端代码进行打印。Print.js 是一个非常流行的 JavaScript 库，它提供了简单而强大的打印功能，允许你灵活控制打印内容、样式以及自定义功能。

本篇文章将介绍如何在 Vue 项目中结合 Print.js 实现前端打印功能，并展示如何自定义字体大小、样式，甚至封装共享样式，达到灵活打印需求。

1. 安装 `Print.js`

首先，我们需要安装 Print.js 库。可以通过 npm 或者直接使用 CDN 链接来引入。

使用 npm 安装：

npm install print-js --save

使用 CDN 引入：

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

2. 在 Vue 中使用 `Print.js`

安装完成后，我们可以在 Vue 项目中使用 Print.js 来实现打印功能。这里我们将使用 Print.js 来打印一个包含自定义样式的页面。

示例：基本打印功能

<template><div><button @click="printDocument">打印文档</button><div id="printArea"><h1>打印示例</h1><p>这是一个使用 Print.js 打印的示例。</p><p>你可以自定义样式和字体大小。</p></div></div>
</template><script>
import printJS from 'print-js';export default {methods: {printDocument() {printJS({printable: 'printArea', // 打印的元素idtype: 'html',           // 打印类型为 HTMLstyle: `#printArea {font-family: Arial, sans-serif;font-size: 18px;}h1 {color: #3498db;font-size: 24px;}p {color: #2c3e50;}` // 自定义样式});}}
};
</script>

解释：

printJS：调用 Print.js 的方法来启动打印。
printable：指定需要打印的元素的 ID（此处为 #printArea）。
type：指定打印类型，这里选择 html，即打印 HTML 元素。
style：通过内联样式来自定义打印页面的样式，包括字体、颜色、大小等。

点击“打印文档”按钮后，打印机将根据提供的样式打印出该文档。

3. 自定义字体大小和样式

为了进一步控制打印内容，我们可以为不同的元素设置自定义的字体大小、颜色等样式。例如，在打印文档时，我们希望标题和段落的字体大小不同，且拥有不同的颜色。

示例：自定义字体大小和样式

<template><div><button @click="printDocument">打印文档</button><div id="printArea"><h1>自定义字体大小和样式</h1><p>这段文字的字体大小为 16px，颜色为灰色。</p><p>标题的字体大小为 24px，颜色为蓝色。</p></div></div>
</template><script>
import printJS from 'print-js';export default {methods: {printDocument() {printJS({printable: 'printArea', type: 'html',style: `#printArea {font-family: 'Helvetica', sans-serif;font-size: 14px;color: #333;}h1 {font-size: 24px;color: #3498db;}p {font-size: 16px;color: #7f8c8d;}`});}}
};
</script>

解释：

h1 标签的字体大小设置为 24px，颜色设置为蓝色。
p 标签的字体大小设置为 16px，颜色设置为灰色。

通过这样的自定义样式，我们可以灵活地调整每个元素的样式，使其在打印时符合需求。

4. 封装共享样式

如果你希望多个页面共享一组样式（例如，所有打印页面都使用相同的字体和样式），可以将样式提取成一个共享的 CSS 文件，或者在 Print.js 配置中使用外部样式表。这样做不仅能提高代码的复用性，还能确保样式的一致性。

示例：封装共享样式

1. 创建一个共享的样式文件 `print-style.css`

/* print-style.css */
.print-header {font-size: 24px;color: #3498db;
}.print-body {font-size: 16px;color: #7f8c8d;
}.print-footer {font-size: 12px;color: #bdc3c7;
}

2. 在 Vue 组件中引入该样式

<template><div><button @click="printDocument">打印文档</button><div id="printArea"><h1 class="print-header">共享样式打印</h1><p class="print-body">这是共享样式的打印示例。</p><footer class="print-footer">打印自定义页脚</footer></div></div>
</template><script>
import printJS from 'print-js';
import './print-style.css'; // 引入共享样式export default {methods: {printDocument() {printJS({printable: 'printArea',type: 'html',style: `@import url('print-style.css');`});}}
};
</script>

解释：

我们将样式提取到一个外部文件 print-style.css 中，并在 Vue 组件中引入。
printJS 配置中通过 @import 引入该共享样式，确保打印时使用统一的样式。

5. 总结

本文介绍了如何在 Vue 项目中使用 Print.js 来实现前端打印功能。通过以下几个方面的实践，你可以灵活地控制打印内容：

基础打印功能：简单的打印元素。
自定义字体大小和样式：为不同元素设置自定义样式，控制字体、颜色和其他样式。
封装共享样式：通过外部 CSS 文件或 Print.js 的样式配置，实现多个打印页面的样式共享。

通过这些技巧，你可以让前端打印功能更加灵活和个性化，满足不同场景下的需求。

【Vue + Print.js】前端打印，自定义字体大小，自定义样式，封装共享样式

在前端开发中，打印功能是一个常见的需求，尤其是在生成报表、打印用户资料或者导出文档时，通常需要通过前端代码进行打印。Print.js 是一个非常流行的 JavaScript 库，它提供了简单而强大的打印功能，允许你灵活控制打印内…...

编程日记 2025/9/22 14:32:52

python模拟练习第一期

问题一如果一个数 p 是个质数，同时又是整数 a的约数，则 p 称为 a的一个质因数。请问 2024 有多少个质因数？ 步骤 1: 分解 2024 首先，2024 是偶数，说明可以被 2 整除。我们从 2 开始进行除法分解： 202…...

编程日记 2025/9/22 14:31:10

Java-25 深入浅出 Spring - 实现简易Ioc-01 Servlet介绍基本代码编写

点一下关注吧！！！非常感谢！！持续更新！！！ 大数据篇正在更新！https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了： MyBatis&#xff…...

编程日记 2025/9/22 14:30:31

华硕奥创软件在线安装和离线安装方法

华硕奥创软件在线安装和离线安装方法 1. 华硕奥创软件介绍2. 华硕奥创软件在线安装2.1 第一种2.2 第二种 3. 华硕奥创软件离线安装3.1 概述3.2 华硕奥创软件离线包下载方式 4. 卸载华硕奥创软件4.1 概述4.2 华硕奥创卸载软件下载与使用方式结束语 1. 华硕奥创软件介绍华硕奥…...

编程日记 2025/9/22 14:30:31

AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

一、AI视频监控技术的崛起随着人工智能技术的不断发展，AI视频监控正成为各行业保障安全、提升效率的关键工具。相比传统监控系统，AI技术赋予监控系统实时分析、智能识别和精准预警的能力，让“被动监视”转变为“主动防控”。二、AI监控应用…...

编程日记 2025/9/20 15:05:06

SQL Server数据库还原差异备份

适用范围：SQL Server 本主题介绍如何使用 SQL Server Management Studio 或 Transact-SQL 在 SQL Server 中还原差异数据库备份。限制和局限不允许在显式或隐式事务中使用 RESTORE。无法在早期版本的 SQL Server 中还原较新版本的 SQL Server创建的备份。在…...

编程日记 2025/9/22 10:22:32

Python 给 Excel 写入数据的四种方法

Python 在数据处理领域应用广泛，其中与 Excel 文件的交互是常见需求之一。本文将介绍四种使用 Python 给 Excel 文件写入数据的方法，并结合生活中的例子进行解释，帮助新手小白快速上手。 1. 使用 openpyxl 库 openpyxl 是一个用于读写 Exc…...

编程日记 2025/9/22 14:31:09

实验14 RNN的记忆能力和梯度爆炸实验

一循环神经网络的记忆能力 1.数据集构建创建了一个DigitSumDataset 类，包括初始化函数init、数据生成函数 generate_data、数据加载函数 load_data、__len__ 方法、__getitem__ 方法。 init函数：接受的参数是data_path（ 存放数据集的目录…...

编程日记 2025/9/19 10:44:17

【电子通识】电流倒灌为什么需要注意？

电流倒灌是一个很常见的问题，以“IO电流倒灌”为关键词在百度上进行搜索，可以找到很多相关案例。电流倒灌问题在5V电平的单片机时代几乎不会发生，主要是因为5V单片的IO耐压值高，单片机内部结构对IO保护设计很好。到了3.3V单片机时代，这类问题有一定的偶发性，但…...

编程日记 2025/9/22 1:53:05

Elasticsearch 集群部署

Elasticsearch 是一个分布式的搜索和分析引擎，广泛应用于日志分析、全文搜索、实时数据分析等场景。它以其高性能、高可用性和易用性而著称。本文档将引导您完成一个基本的 Elasticsearch 集群配置，包括节点间的通信、客户端访问、安全设置等关键步骤。我…...

编程日记 2025/9/22 11:11:07

Windows系统VSCode 搭建ESP-IDF环境

VS Code，安装ESP-IDF插件快捷键CTRLSHIFTP，弹出显示所有命令的窗口，选择ESP-IDF的欢迎使用第一个选项，要选择一个ESP-IDF版本，选最新的就行点击Install,等待下载提示安装成功，如果过程中出现python已存…...

编程日记 2025/9/20 3:17:26

在centos 7.9上面安装mingw交叉编译工具

1.说明为了在centos上面编译windows的程序，需要安装mingw工具，mingw工具是可以编译windows程序的一些工具链，使用方式和linux一致 2.下载脚本使用脚本方式编译，github的脚本位置：https://github.com/Zeranoe/ming…...

编程日记 2025/9/21 20:30:31

【Java笔记】LinkedList 底层结构

一、LinkedList 的全面说明 LinkedList底层实现了双向链表和双端队列特点可以添加任意元素(元素可以重复)，包括null线程不安全，没有实现同步二、LinkedList 的底层操作机制三、LinkedList的增删改查案例 public class LinkedListCRUD { public stati…...

编程日记 2025/9/21 19:19:28

【深入理解java中的设计模式】

深入理解java中的设计模式设计模式是软件工程中的最佳实践，它们提供了解决特定问题的模板或蓝图。在Java中，设计模式通常被分为三大类：创建型模式、结构型模式和行为型模式。创建型模式单例模式 (Singleton Pattern) 描述: 保证一个类…...

编程日记 2025/9/21 9:43:47

详解下c语言下的多维数组和指针数组

在实际c语言编程中，三维及以上数组我们使用的很少，二维数组我们使用得较多。说到数组，又不得关联到指针，因为他们两者的联系太紧密了。今天我们就详细介绍下c语言下的多维数组(主要是介绍二维数组)和指针。一、二维数组 1.1&am…...

编程日记 2025/9/21 21:36:39

如何使用 Python 发送 HTTP 请求？

在Python中发送HTTP请求最常用的库是requests，它提供了简单易用的API来发送各种类型的HTTP请求。除此之外，还有标准库中的http.client（以前叫做httplib）和urllib，但它们相对更底层，代码量较大&#xff0c…...

编程日记 2025/9/18 17:34:56

活动预告 |【Part2】Microsoft Azure 在线技术公开课：基础知识

课程介绍参加“Azure 在线技术公开课：基础知识”活动，培养有助于创造新的技术可能性的技能并探索基础云概念。参加我们举办的本次免费培训活动，扩充自身的云模型和云服务类型知识。你还可以查看以计算、网络和存储为核心的 Azure 服务。课…...

编程日记 2025/9/21 2:10:56

神经网络基础-激活函数

文章目录 1. 什么是激活函数2. sigmoid 激活函数3. tanh 激活函数4. ReLU 激活函数5. SoftMax 激活函数6. 其他常见的激活函数7. 激活函数的选择方法 1. 什么是激活函数激活函数用于对每层的输出数据进行变换, 进而为整个网络注入了非线性因素。此时, 神经网络就可以拟合各种…...

编程日记 2025/9/11 20:32:32

Debedium如何忽略Oracle的purge命令

报错截至目前3.0版本，Debezium的Oracle Connector并不支持purge table这个指令。所以，在使用Debezium解析Oracle变更的时候，如果在源端执行了类似 purge table "$BIN… 的语句，就会导致Debezium罢工，日志里显…...

编程日记 2025/9/22 11:16:01

基于 webRTC Vue 的局域网文件传输工具

文件传输工具，匿名加密，只需访问网页，即可连接到其他设备，基于 webRTC 和 Vue.js coturn TURN 服务器 docker pull coturn/coturn docker run -d --networkhost \-v $(pwd)/my.conf:/etc/coturn/turnserver.conf \coturn/coturn…...

编程日记 2025/9/20 22:05:33

opencv Canny边缘检测

canny阈值越高,检测到的边缘数量越少 # 导入OpenCV库，用于图像处理 import cv2 import numpy as np # 从matplotlib库中导入pyplot模块，用于绘制图像 from matplotlib import pyplot as plt # 创建一个名为window的窗口，窗口大小自…...

编程日记 2025/9/20 20:49:29

数仓高频面试 | 数仓为什么要分层

大家好，我是大D呀。关于数仓分层，在面试过程中几乎是必问的。不过，面试官一般也不会直接考你数仓为什么要分层，而是在你介绍项目时，可能会换一种形式来穿插着问，比如数据链路为什么要这样设计&#xff0c…...

编程日记 2025/9/19 14:13:39

Coconut：探索大语言模型的连续思维链推理能力

目录简介： 什么是Coconut？ 为什么我们需要Coconut？ Coconut如何工作？ 实验结果怎么样？ Coconut的优势： 结论： 简介： 你有没有想过，计算机是如何像人类一样思考问…...

编程日记 2025/9/20 17:05:20

2024年安徽省职业院校技能大赛水利工程BIM建模与应用

2024年安徽省职业院校技能大赛赛项规程赛项名称： 水利工程BIM建模与应用赛项组别： 高职组承办单位： 安徽水利水电职业技术学院目录一、赛项名称… 1 二、竞赛目标… 1 三、竞赛内容… 2 四、竞赛方式… 3 五、竞赛流程… 4 七、技术…...

编程日记 2025/9/21 17:26:34

vue常用命令汇总

nvm 一个nodejs版本管理工具，解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 npm 可以管理 nodejs 的第三方插件。 vue-cli 是Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。 nginx 是一个高性能的HTTP和反向代理we…...

编程日记 2025/9/21 3:11:41

ios上架构建版本没苹果电脑怎么上传

在app store上架的时候，遇到下图的问题： 点击蓝色加号的时候，并没有构建版本可以选择从图中可以看出，它给我们推荐了很多上传工具，比如xcode、transporter或命令行工具之类的，但是这些工具都是只能在苹果…...

编程日记 2025/9/20 5:14:07

某名校考研自命题C++程序设计——近10年真题汇总（上）

本帖更新一些某校的编程真题，总体来说不难，考察的都是基本功，92高校大一期末的难度，不过有些细节颇为繁琐，各位还是需要一定程度上注意的~ 目录一.分数求和二.大小写字母转换三.判断当年天序四.交替合并字符串…...

编程日记 2025/9/22 4:06:16

【ChatGPT】解锁AI思维链：如何让机器像人类一样思考？

在人工智能领域，我们一直在追求让机器像人类一样思考。然而，即使是最先进的AI，也常常被诟病缺乏“常识”，难以理解复杂问题，更不用说像人类一样进行逻辑推理和解决问题了。最经常的表现就是遇到不会的地方，…...

编程日记 2025/9/22 2:01:04

️️️ 避坑指南：如何修复国密gmssl 库填充问题并提炼优秀加密实践20241212

🛡️ 避坑指南：如何修复国密gmssl 库填充问题并提炼优秀加密实践 ✨ 引言在当下的数据安全环境中，SM4作为中国国家密码算法的代表性选择，被广泛应用于金融、通信和政府领域。然而，在实际开发中，即便是开…...

编程日记 2025/9/20 9:29:05

鸿蒙ArkTS如何实现数据可视化：饼状图/柱状图/折线图

鸿蒙数据可视化系列在我们鸿蒙APP开发中，经常需要使用到一些图表的开发，本文主要介绍使用 McCharts 框架绘制柱状图的方法配套指导视频地址：鸿蒙数据可视化系列-McCharts使用介绍_哔哩哔哩_bilibili 1. 第三方库介绍 1.1. McCharts Mc…...

编程日记 2025/9/21 16:52:41

Win10环境vscode+latex+中文快速配置

安装vscodelatex workshop 配置： {"liveServer.settings.donotVerifyTags": true,"liveServer.settings.donotShowInfoMsg": true,"explorer.confirmDelete": false,"files.autoSave": "afterDelay","exp…...

编程日记 2025/9/19 23:25:15

修改frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java diff --git a/base/services/core/java/com/android/server/policy/PhoneWindowManager.java b/base/services/core/java/com/android/server/policy/PhoneWindowManager.java in…...

编程日记 2025/9/17 12:23:07

1. 安装 Print.js