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

Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

news 来源：原创 2025/6/27 23:21:46

🚀 Vue3 高级表格打印工具封装（支持预览、分页、样式美化）

关键词：Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

在企业级应用中，我们经常遇到打印报表、导出数据的需求，今天分享一个基于 Vue3 封装的表格打印工具类，支持：

🖨️ 表格打印 & 预览
🎨 样式高度可定制
📄 分页支持
🧩 formatter 格式化器
✅ 可组合式 API（useTablePrint）

🧠 核心封装代码

// utils/tablePrint.js
// 高级表格打印工具类
export class TablePrintUtil {constructor(options = {}) {this.options = {title: '数据表格',showHeader: true,showFooter: true,pageSize: 'A4',orientation: 'portrait',margins: '1cm',fontSize: '12px',headerStyle: {backgroundColor: '#f5f7fa',color: '#333',fontWeight: 'bold'},...options}}async printTable(data, columns, customOptions = {}) {const finalOptions = { ...this.options, ...customOptions }try {const printContent = this.generateAdvancedHTML(data, columns, finalOptions)await this.executePrint(printContent, finalOptions)} catch (error) {console.error('打印失败:', error)throw error}}generateAdvancedHTML(data, columns, options) {const currentTime = new Date().toLocaleString('zh-CN')const totalPages = Math.ceil(data.length / 20)return \`<!DOCTYPE html><html><head><meta charset="utf-8"><title>\${options.title}</title><style>\${this.generatePrintStyles(options)}</style></head><body>\${options.showHeader ? this.generateHeader(options, currentTime) : ''}\${this.generateTableContent(data, columns, options)}\${options.showFooter ? this.generateFooter(data.length, totalPages) : ''}<script>\${this.generatePrintScript(options)}</script></body></html>\`}generatePrintStyles(options) {return \`@media print {body { margin: 0; }.no-print { display: none !important; }@page {margin: \${options.margins};size: \${options.pageSize} \${options.orientation};}}body {font-family: 'Microsoft YaHei', Arial, sans-serif;margin: 20px;color: #333;font-size: \${options.fontSize};}.print-header {text-align: center;margin-bottom: 30px;border-bottom: 2px solid #409EFF;padding-bottom: 15px;}.print-title {font-size: 28px;font-weight: bold;color: #409EFF;}.print-subtitle {color: #666;font-size: 14px;}.print-table {width: 100%;border-collapse: collapse;margin: 20px 0;}.print-table th, .print-table td {border: 1px solid #ddd;padding: 10px 8px;word-break: break-word;}.print-table th {background-color: \${options.headerStyle.backgroundColor};color: \${options.headerStyle.color};font-weight: \${options.headerStyle.fontWeight};}.print-table tbody tr:nth-child(even) {background-color: #fafafa;}.print-footer {margin-top: 30px;display: flex;justify-content: space-between;font-size: 12px;color: #666;border-top: 1px solid #eee;padding-top: 15px;}.text-center { text-align: center; }.text-right { text-align: right; }\`}generateHeader(options, time) {return \`<div class="print-header"><h1 class="print-title">\${options.title}</h1><p class="print-subtitle">打印时间: \${time}</p></div>\`}generateTableContent(data, columns, options) {const header = columns.map(col => \`<th>\${col.label}</th>\`).join('')const rows = data.map((row, idx) => {const cells = columns.map(col => {let value = this.getNestedValue(row, col.prop)if (col.formatter) value = col.formatter(row, col, value, idx)return \`<td class="\${col.align ? 'text-' + col.align : ''}">\${value ?? ''}</td>\`}).join('')return \`<tr>\${cells}</tr>\`}).join('')return \`<table class="print-table"><thead><tr>\${header}</tr></thead><tbody>\${rows}</tbody></table>\`}generateFooter(total, pages) {return \`<div class="print-footer"><div>共 \${total} 条记录</div><div>第 1 页，共 \${pages} 页</div></div>\`}generatePrintScript() {return \`window.onload = () => setTimeout(() => window.print(), 800);window.onafterprint = () => setTimeout(() => window.close(), 1000);\`}async executePrint(content) {return new Promise((resolve, reject) => {try {const win = window.open('', '_blank', 'width=800,height=600')if (!win) return reject(new Error('无法打开打印窗口'))win.document.write(content)win.document.close()win.onload = () => setTimeout(() => { win.print(); resolve() }, 500)} catch (e) {reject(e)}})}getNestedValue(obj, path) {return path?.split('.').reduce((curr, key) => curr?.[key], obj)}previewTable(data, columns, options = {}) {const content = this.generateAdvancedHTML(data, columns, {...this.options,...options}).replace(this.generatePrintScript(options), '// 预览模式不自动打印')const win = window.open('', '_blank', 'width=1000,height=700')win.document.write(content)win.document.close()}
}// Vue组合式封装
export function useTablePrint(options = {}) {const printUtil = new TablePrintUtil(options)const printTable = async (data, columns, customOptions = {}) => {try {await printUtil.printTable(data, columns, customOptions)} catch (err) {console.error('打印失败:', err)}}const previewTable = (data, columns, customOptions = {}) => {printUtil.previewTable(data, columns, customOptions)}return {printTable,previewTable,printUtil}
}

📦 使用示例（适用于 Vue3 + Element Plus）

import { useTablePrint } from '@/utils/tablePrint'const { printTable, previewTable } = useTablePrint({title: '员工信息表',fontSize: '14px'
})const columns = [{ prop: 'id', label: 'ID', align: 'center' },{ prop: 'name', label: '姓名' },{ prop: 'age', label: '年龄', align: 'center' },{ prop: 'department', label: '部门' },{prop: 'salary',label: '薪资',align: 'right',formatter: (row) => `￥${row.salary}`}
]const handlePrint = () => {printTable(tableData, columns)
}const handlePreview = () => {previewTable(tableData, columns)
}

📌 总结

这套打印封装解决了多数前端项目中的打印难题，支持高度自定义和开箱即用。你可以根据项目需求扩展页码逻辑、横向打印、多页数据分割等。

如果觉得实用，欢迎 👍 点赞、🌟 收藏、📢 分享！

Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

🚀 Vue3 高级表格打印工具封装（支持预览、分页、样式美化） 关键词：Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览在企业级应用中，我们经常遇到打印报表、导出…...

编程日记 2025/6/27 23:21:46

实现一个前端动态模块组件(Vite+原生JS)

1. 引言在前面的文章《使用Vite创建一个动态网页的前端项目》中我们实现了一个动态网页。不过这个动态网页的实用价值并不高，在真正实际的项目中我们希望的是能实现一个动态的模块组件。具体来说，就是有一个页面控件同时在多个页面中使用，那…...

编程日记 2025/6/27 22:03:25

面向对象编程在 JavaScript 中的实践

引言前端开发正随着应用复杂度增加而向更严谨的架构模式演进。JavaScript 作为一种多范式语言，其面向对象特性为构建可维护、可扩展的大型应用提供了强大基础。一、JavaScript 中的对象模型演化对象字面量：最基础的封装对象字面量是 JavaScript …...

编程日记 2025/6/27 21:29:49

Android 内存溢出（OOM）的 Kotlin 排查与优化指南

内存溢出（Out Of Memory, OOM）是 Android 开发中常见且棘手的问题，尤其在处理大图、复杂数据或内存泄漏时。本文将通过 Kotlin 代码示例和工具使用，提供一套比较完整的排查与优化方案。一、检测工具：定位内存问题根源…...

编程日记 2025/6/27 21:48:06

Docker常用命令介绍

Docker常用命令 1、本地镜像管理 save 命令将一个或多个 Docker 镜像保存到一个 tar 归档文件中，以便在其他环境中分发或备份。 # 语法：docker save [OPTIONS] IMAGE [IMAGE...]# 保存单个镜像到文件 docker save -o myimage.tar myimage:latest# 保…...

编程日记 2025/6/27 22:08:16

（高级）高级前端开发者指南：框架运用与综合实战

当您已经掌握了HTML5、CSS3和JavaScript的基础知识后，接下来就是学习现代前端框架和性能优化的高级阶段。本文将重点介绍Vue.js/React的组件化开发、状态管理和路由配置，以及前端性能优化的核心技巧。通过丰富的代码示例和详细讲解，帮助您在实…...

编程日记 2025/6/27 22:48:23

边缘计算正在重新定义物联网的未来——你的设备还在“等云“吗？⚡

“数据不动算法动，算法不动代码动”——这句话正在成为物联网时代的新铁律。当我们谈论物联网设备性能优化时，大多数开发者第一反应还是"上云"。但现实往往残酷：网络延迟让实时控制变成了"实时等待"，带宽成本让企业CFO眉头紧锁，数据安全让合规部门夜…...

编程日记 2025/6/27 13:26:40

std::initialzer_list 与花括号{}数据列表

author: hjjdebug date: 2025年 05月 22日星期四 15:50:23 CST descrip: std::initialzer_list 与花括号{}数据列表文章目录 1.{数值列表}是什么?1.1 数组初始化时 ， 称为数组初始化列表1.2. 当用于容器时, 称为容器初始化列表1.3. 对于结构体或类，{…...

编程日记 2025/6/27 21:04:44

C++初阶-list的使用2

目录 1.std::list::splice的使用 2.std::list::remove和std::list::remove_if的使用 2.1remove_if函数的简单介绍基本用法函数原型使用函数对象作为谓词使用普通函数作为谓词注意事项复杂对象示例 2.2remove与remove_if的简单使用 3.std::list::unique的使用 …...

编程日记 2025/6/27 23:14:01

从单链表 list 中删除第 i 个元素--Python

从单链表 list 中删除第 i 个元素一、问题引入二、解题步骤1.思维导图2.解题步骤三、代码实现四、个人总结一、问题引入请编写程序，将 n 个整数顺次插入一个初始为空的单链表的表头。随后对任意给定的位序 i，删除链表中第 i 个结点。注意&#xff1…...

编程日记 2025/6/27 23:30:52

GraphPad Prism工作表的基本操作

《2025新书现货 GraphPad Prism图表可视化与统计数据分析（视频教学版）雍杨康巧昆清华大学出版社教材书籍 9787302686460 GraphPadPrism图表可视化无规格》【摘要书评试读】- 京东图书 GraphPad Prism中包含5种工作表，每种工作表的基本操…...

编程日记 2025/6/27 23:34:05

C++初阶-list的使用1

目录 1.std::list简介 2.成员函数 2.1构造函数的使用 2.2list::operator的使用 3.迭代器 4.容量 4.1list::empty函数的使用 4.2list::size函数的使用 4.3list::max_size函数的使用 5.元素访问 6.修饰符 6.1list::assign函数的使用 6.2push_back和pop_back和push_fr…...

编程日记 2025/6/27 23:03:33

文献解读-病理影像多模态模型预测乳腺癌新辅助化疗的病理完全反应

期刊：Science Advances 影响因子：11.7，中科院1区Top 发表时间：2025年4月30日概要：首都医科大学宣武医院放射科卢洁教授团队近日（2025年5月）在中科院1区top期刊《Sci Adv》（IF11.7&a…...

编程日记 2025/6/27 22:50:20

查看容器的详细信息 docker inspect mysql-8.4.5 Docker 启动 local-mysql 的完整命令 docker run -d \--name local-mysql \-e MYSQL_ROOT_PASSWORDyour_root_password \-v /AllenDocker/mysql/data:/var/lib/mysql \-p 3306:3306 \--restart unless-stopped \mysql:8.4.5 验…...

编程日记 2025/6/27 22:12:09

鸿蒙进阶——CMakelist、GN语法简介及三方库通用移植指南

文章大纲引言一、GN常用的内置变量二、GN常用的内置函数三、CMake 重要语法1、生成动态库2、生成静态库3、生成OBJECT 库4、重要的函数和模块4.1、add_definitions4.2、execute_process4.3、add_dependencies4.4、install4.5、FetchContent 四、GN 重要语法1、编译Target2、预…...

编程日记 2025/6/27 22:57:59

场景化应用实战系列六：检索问答系统

目录景化应用实战系列六：检索问答系统一、目标设定二、关键知识点梳理三、案例讲解与实战操作 1. 数据准备与预处理 2. 倒排表构建 3. 文本相似度计算 4. 检索问答系统实现 5. 系统优化与改进一、目标设定构建一个高效的检索问答系统，能…...

编程日记 2025/6/27 7:12:22

3452. 好数字之和

题目来源： LeetCode题目：3452. 好数字之和 - 力扣（LeetCode） 解题思路： 按要求判断求和即可。解题代码： #python3 class Solution:def sumOfGoodNumbers(self, nums: List[int], k: int) -> int:r…...

编程日记 2025/6/27 23:12:53

GEE数据下载问题记录

GEE下载数据时的一些记录 1. GPT说 2. 验证在未指定投影坐标系的情况下，下载原始数据导出的是MODIS Sinusoidal投影，如果单纯的对波段值进行操作，不会进行投影转换，如果涉及到波段平均，则会转投影到WGS84坐标系。如…...

编程日记 2025/6/27 23:01:29

P1833 樱花

P1833 樱花 - 洛谷题目背景《爱与愁的故事第四弹plant》第一章。题目的描述爱与愁大神后院里种了n棵樱花树，每棵都有美学值Ci(0≤Ci≤200)。爱与愁大神在每天上学前都会来赏花。爱与愁大神可是生物学霸，他懂得如何欣赏樱花：一种樱…...

编程日记 2025/6/27 23:02:50

文件操作和IO-3 文件内容的读写

文件内容的读写——数据流流是操作系统提供的概念，Java对操作系统的流进行了封装。数据流就像水流，生生不息，绵延不断。水流的特点：比如要100mL的水，可以一次接10mL，分10次接完，也可以一次接…...

编程日记 2025/6/27 21:02:00

Day 0015：Metasploit 基础解析

目录一、理论学习（Metasploit 架构与核心组件） 一、架构设计：分层与模块化基础层（Ruby 框架）： 核心层（模块引擎）： 接口层（交互界面）&#…...

编程日记 2025/6/27 22:47:51

相机标定与图像处理涉及的核心坐标系

坐标系相互关系 #mermaid-svg-QxaMjIcgWVap0awV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QxaMjIcgWVap0awV .error-icon{fill:#552222;}#mermaid-svg-QxaMjIcgWVap0awV .error-text{fill:#552222;stroke:#552…...

编程日记 2025/6/27 22:47:47

单例模式的运用

单例模式实现分析在我们的向量数据库配置类 MilvusVectorDatabaseConfig 中，采用了单例模式的实现方式，这是一种非常经典且实用的设计模式。饿汉式单例实现这种实现方式属于饿汉式单例模式，它的优点在于： // 在类加载时就创…...

编程日记 2025/6/28 0:01:28

PageHelper分页原理解析：从源码到MySQL方言实现

一、引言分页查询是Web开发的必备功能，MyBatis生态中的PageHelper以其简单易用的特性广受欢迎。本文将从源码层面（v5.3.2）解析PageHelper的分页实现机制，结合MySQL方言展示完整的执行链路。二、核心实现原理 1. 插件初始化 …...

编程日记 2025/6/27 20:56:13

MySQL中索引最左前缀法则、索引失效情况、前缀索引、索引设计原则

最左前缀法则联合索引中，最左前缀法则指的是查询从索引的最左列开始，并且不跳过索引中的列，如果跳跃某一列，索引将会部分失效（后面的字段索引失效）举例假设有一个联合索引包含三个字段按顺序：…...

编程日记 2025/6/27 21:21:16

pdf图片导出（Visio和Origin）

一、Visio 导入pdf格式图片 1. 设计->大小，适应绘图。 2. 文件->导出，导出为pdf格式。上面两部即可得到只包含图的部分的pdf格式。如果出现的有默认白边，可以通过以下方式设置： 1. 文件->选项->自定义功能区->…...

编程日记 2025/6/27 13:32:55

NR 通讯的整体架构

前言： 并假设发射器发送了一个信号，如左下角所示（蓝色），接收器检测到的信号显示在右侧（红色）。您在图中注意到的第一件事是什么？那就是发送的信号和接收的信号并不完全相同。有什么…...

编程日记 2025/6/27 21:23:15

【大模型面试每日一题】Day 26：从伦理角度，大模型可能存在哪些潜在风险？技术上如何实现内容安全控制（如RLHF、红队测试）？

【大模型面试每日一题】Day 26：从伦理角度，大模型可能存在哪些潜在风险？技术上如何实现内容安全控制（如RLHF、红队测试）？ 📌 题目重现 🌟🌟 面试官:从伦理角度&#xf…...

编程日记 2025/6/27 22:47:55

第六届电子通讯与人工智能国际学术会议（ICECAI 2025）

在数字化浪潮中，电子通讯与人工智能的融合正悄然重塑世界的运行逻辑。技术基础的共生关系是这场变革的核心——电子通讯如同“信息高速公路”，通过5G等高速传输技术，将海量数据实时输送至AI系统，使其能够像人类神经系统般快速响应…...

编程日记 2025/6/27 22:58:37

深入剖析 5G 核心网中的 PLMN

一、引言在 5G 技术迅猛发展的当下，5G 核心网作为整个通信系统的关键枢纽，支撑着海量数据传输、低延迟通信以及多样化业务应用。其中，公共陆地移动网络（Public Land Mobile Network，PLMN）扮演着极为重要的角色，它是 5G 核心网实现用户接入、网络管理以及业务提供的基础…...

编程日记 2025/6/27 2:06:35

佰力博科技与您探讨半导体电阻测试常用的一些方法

一、两探针法两探针法是一种较为基础的测试方法。该方法将两根探针与半导体样品表面紧密接触，通过电源在两根探针之间施加电压，同时使用电流表测量通过样品的电流，再根据欧姆定律计算电阻。这种方法的优点在于操作简单、设备要求较低&a…...

编程日记 2025/6/27 21:20:43

5G 核心网中的 NPN 功能详解

引言在 5G 技术飞速发展的今天，5G 核心网不断演进，为各类应用场景提供强大支撑。其中，NPN（Non-Public Network，非公共网络）功能作为 5G 核心网的重要特性，正逐渐崭露头角，在众多行业中发挥着关键作用。它为特定用户或组织打造专属网络环境，满足其对网络性能、安全性…...

编程日记 2025/6/27 22:47:56

谷歌medgemma-27b-text-it医疗大模型论文速读：多语言大型语言模型医学问答基准测试MedExpQA

《MedExpQA: 多语言大型语言模型医学问答基准测试》论文解析一、引言论文开篇指出大型语言模型（LLMs）在医学领域的巨大潜力，尤其是在医学问答（QA）方面。尽管LLMs在医学执照考试等场景中取得了令人瞩目的成绩&#…...

编程日记 2025/6/27 22:47:59

# 深入解析BERT自然语言处理框架：原理、结构与应用

深入解析BERT自然语言处理框架：原理、结构与应用在自然语言处理（NLP）领域，BERT（Bidirectional Encoder Representations from Transformers）框架的出现无疑是一个重要的里程碑。它凭借其强大的语言表示能…...

编程日记 2025/6/27 22:01:32

js中encodeURIComponent函数使用场景

encodeURIComponent 是 JavaScript 中的一个内置函数，它的作用是： 将字符串编码为可以安全放入 URL 的形式。 ✅ 为什么需要它？ URL 中有一些字符是有特殊意义的，比如： ? 用来开始查询参数 & 分隔多个参数连接…...

编程日记 2025/6/27 22:48:24

【NLP 77、Python环境管理工具之conda】

如果你第一万次否定自己，那我希望我可以一万零一次大声称赞你 —— 25.5.22 一、什么是conda conda是一个开源的包管理系统和环境管理系统，主要用于Python语言，但也可以用于其它语言的项目二、为什么要使用conda ① 多环境共存，多…...

编程日记 2025/6/27 23:17:24

替代云数据库的本地方案：MySQL+phpMyAdmin的远程管理与跨网络访问技术

文章目录前言1. 安装MySQL2. 安装phpMyAdmin3. 修改User表4. 本地测试连接MySQL5. 安装cpolar内网穿透6. 配置MySQL公网访问地址7. 配置MySQL固定公网地址8. 配置phpMyAdmin公网地址9. 配置phpmyadmin固定公网地址前言对于运维来说，平时还好，一旦出门…...

编程日记 2025/6/27 22:48:07

Dify大语言模型应用开发环境搭建：打造个性化本地LLM应用开发工作台

文章目录前言1. Docker部署Dify2. 本地访问Dify3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问前言各位小伙伴们，大家好！今天我们要来一场技术大冒险，手把手教你如何在Linux Ubuntu系统上使用Docke…...

编程日记 2025/6/28 9:02:05

MySQL索引事务

索引通过索引可以对查询操作进行优化，通过减少全表扫描，快速定位数据，原本的查询操作是对表进行遍历，如果是大表效率较低 1）注意事项占用了更多的空间，由于生成索引需要依赖于数据结构和额外数据&…...

编程日记 2025/6/27 20:14:54

Seay代码审计工具

Seay代码审计工具介绍 Seay代码审计工具是一款由国内安全研究人员"Seay"开发的源代码安全审计工具，主要用于帮助安全人员快速发现PHP代码中的安全漏洞，快速定位代码中的安全风险点。主要功能特点自动化审计功能支持自动扫描PHP代码中的…...

编程日记 2025/6/27 2:39:25

【人工智障生成日记1】从零开始训练本地小语言模型

🎯 从零开始训练本地小语言模型：MiniGPT TinyStories（4090Ti） 🧭 项目背景本项目旨在以学习为目的，从头构建一个完整的本地语言模型训练管线。目标是： ✅ 不依赖外部云计算✅ 完全本地运行…...

编程日记 2025/6/28 12:07:18

技术分享：大数据挖掘平台架构设计与行业应用实践

在数字化转型浪潮下，企业数据规模呈指数级增长。如何构建高效的数据挖掘体系，实现数据价值变现，成为技术团队面临的重要课题。本文将深入探讨大数据挖掘平台的核心架构、关键技术及行业应用实践。一、平台架构设计 1. 数据采集层支持多源异…...

编程日记 2025/6/28 15:57:34

线性Wi-Fi FEM被卷死，非线性FEM是未来？

在跑了一圈路由器客户之后，我的内心反而平静下来，被卷死的不只是Wi-Fi FEM赛道，还有家用路由器市场。尽管路由器市场比较惨淡，不过客户还是很愿意接见我，并做更广泛的交流和探讨。一方面之前推Wi-Fi FEM的众多厂商在渐…...

编程日记 2025/6/27 10:34:52

OpenCV CUDA模块图像过滤------用于创建一个最小值盒式滤波器（Minimum Box Filter）函数createBoxMinFilter()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述该函数创建的是一个最小值滤波器（Minimum Filter），它对图像中每个像素邻域内的像素值取最小值。常用于&…...

编程日记 2025/6/27 23:19:14

【MySQL】06.MySQL表的增删查改

1. insert 我们先创建一个表结构，这部分操作我们使用这张表完成我们的操作： mysql> create table student(-> id int primary key auto_increment,-> name varchar(20) not null,-> qq varchar(20) unique-> ); Query OK, 0 rows affec…...

编程日记 2025/6/27 23:22:09