vue + element 前台打印

最新推荐文章于 2025-10-06 06:35:25 发布
原创 最新推荐文章于 2025-10-06 06:35:25 发布 · 950 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了在Vue项目中使用vue-print-nb-element解决Element表格打印问题，包括如何跳转新页面传递数据，定义表头，以及处理打印样式和内容显示不全的技巧。此外，还提及了该方法同样适用于导出自定义表格数据到Excel。
 一、安装vue-print-nb

 vue2安装 

npm install vue-print-nb --save

  vue3安装 

npm install vue3-print-nb --save

在表格打印时element表格出现打印不全问题 安装这个版本

链接 https://www.npmjs.com/package/vue-print-nb-element

npm install vue-print-nb-element --save
按照网上的使用方法，发现打印表格不能自定义表头，也就是不能忽略不想打印的内容（添加类名"no-print"我试了无效，也许是我没用对，欢迎指出），并且不想打印element表格的样式

 想要实现想要的效果，我们可以跳转一个新的页面，然后把数据传递到新页面，再由新页面进行渲染，表头部分需要定义一个表头js文件（或者在跳转时就把表头信息传递到打印页面，我这里打印需求比较多，单独定义文件比较好维护，），需要打印什么字段，就添加相应的字段

 部分tabHeader.js

最低0.47元/天 解锁文章
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
蓝胖子的博客
02-24 1万+
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
SpringBoot + Vue +Element UI 实现注册登录的功能
weixin_54851039的博客
09-15 1728
这里是接着上次 【SpringBoot+Vue 项目创建详细步骤】 继续写的注册登录的功能，在写的过程中，对数据库的字段进行过更改，第一次改库的时候把上次发的文章里面的内容也改过，后来调整次数过多，怕改炸了，导致【SpringBoot+Vue 项目创建详细步骤】里面的代码不能正常运行了，所以干脆不改了，直接在这里面把最新的代码重新把代码发一遍（有个别类可能暂时没用到，可以删了，但是可能有些同学可能喜欢对项目结构，所以就全发了），如果有问题可以联系我进行修改。（周末的时候有空了才会写一写，所以比较慢）
vue项目中打印数据或表格（使用第三方依赖print-js）
zhengjingID的博客
03-03 3878
一、 第三方依赖print-js 资源包文档网址：https://printjs.crabbly.com/ 参数列表： 参数 默认值 说明 printable null 文档源：pdf 或图像 url、html 元素 id 或 json 数据对象。 type 'pdf' 可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。 header null 用于 HTML、图像或 ...
Element UI表格数据打印：Table打印输出方案
最新发布
gitblog_00438的博客
10-06 811
在后台管理系统开发中，经常需要将Element UI的Table组件数据导出为纸质文档或PDF。本文将介绍三种实用的Table打印方案，从基础实现到高级自定义，帮助开发者快速解决数据打印需求。 ## 方案对比与选择建议 | 方案 | 实现难度 | 兼容性 | 自定义程度 | 适用场景 | |------|----------|--------|------------|----------| ...
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue html页面打印功能vue-print-nb
11-19 1842
vue html页面打印功能vue-print-nb vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使...
vue+element-plus打印
weixin_63954739的博客
09-03 1085
之后在子组件获取数据，并在页面上渲染数据，子组件的页面是这样的。项目要求，点击一个数据的复选框，获取数据，打印，这就可以了，整个页面以及打印就完成了。html父组件里面的子标签。所以首先是子组件html。还有一些页面上的css。之后是获取和过滤数据。
vue+element打印页面功能
weixin_30628801的博客
05-20 1511
项目中遇到了要打印页面的功能,我感之前使用的是一个第三方的插件,但是不兼容IE,后来发现直接调用window的API就可以了,MMP 　 1 // 打印表单 2 printBtn() { 3 window.print(); 4 return; 5 }, 然后有不想在打印页面里面显示的元素,直接通过CSS样式控制就行了...
vue3+element-plus角色权限管理分配
weixin_68658847的博客
05-01 2103
vue+element-plus角色权限管理分配
vue+elementUI首页导航+左侧菜单
weixin_64987028的博客
05-08 2121
一. Mock.js简单介绍 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。特点： 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等 拦截Ajax请求
前后端分离 权限系统[SpringBoot2+SpringSecurity+Vue+ElementPlus]
2302_80480374的博客
01-14 1452
SpringSecurity有很多很多的拦截器在执行流程里面主要有两个核心的拦截器1.登录验证拦截器AuthenticationProcessingFilter2.资源管理拦截器AbstractSecurityInterceptor但拦截器里面的实现需要一些组件来实现所以就有了AuthenticationManager认证管理器、accessDecisionManager决策管理器等组件来支撑。
vue+element-ui+js页面打印（打印elementui的table）
monody666的博客
02-25 3516
https://blog.csdn.net/Simplify_Webpage/article/details/111663634?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=7939fbd7-f660-4aa2-b162-b8f1cb504cde&depth_1-utm_source=distribute.pc_releva
解决浏览器打印时，背景色不显示
前端菜鸡的博客
11-27 5134
只需要一行代码就可以解决 -webkit-print-color-adjust: exact;
vue-print-nb ,element-ui =＞ table打印不全不说原理直接上代码
weixin_48802343的博客
12-12 1672
* 表格内容边框 *//* 表格边框 */
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
热门推荐
qq_42571665的博客
10-12 2万+
实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。
element ui+vue实现打印
baozaoderenlei的博客
04-09 4112
1.安装组件 //安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js@版本号 --save // 全局安装 npm install print-js --save -g 2.在页面引入组件 import print from 'print-js' 3.自己实现子组件打印页面 4.在需要打印的页面引入子组件 //注册 compon
vue项目实现前端打印功能
千里之行，始于足下！
12-31 8921
一、直接使用window自带的打印功能： window.print() <template> <div> <p>点击下面的按钮，可将div里的内容区域进行打印</p> <div id="printDiv"> <p>打印内容 </p> <p>打印内容 </p> <p>打印内容 </p> <p>打印内
SpringBoot+Vue打造的高效酒店管理系统教程
前端：使用Vue.js框架搭配Element UI组件库进行界面开发，使用JavaScript和CSS进行样式和交互设计，传统的JSP页面用于展示动态内容。 后端：主要使用Spring Boot框架，简化了企业级Java应用开发和部署的流程。同时，...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值