bootstrap或者layui框架使用row-col布局jquery.PrintArea打印样式丢失问题

最新推荐文章于 2026-06-16 09:54:19 发布
原创 最新推荐文章于 2026-06-16 09:54:19 发布 · 733 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#layui
本文介绍在使用layui框架的row-col栅格布局时，遇到打印div导致bootstrap排列样式丢失的问题及解决方法。通过同时引入col-md和col-xs属性确保不同屏幕尺寸下打印页面的正常排版。

笔者在使用layui框架用row-col栅格布局的时候，使用row 和col-md-*进行页面布局，调用jquery.PrintArea进行打印div，发现bootstrap排列样式全部丢失，初步怀疑是没有引用css的问题，但是检查代码后发现css是正常引用的
l
最终检查发现其实是打印的屏幕尺寸是小于col-md的，所以需要在引col-md属性的同时一并引用col-xs属性，这样打印页面排版就是正常的了
在这里插入图片描述
注：bootstrap框架的解决方案同上

jquery.printArea.js
08-28
调用示例： $(function(){ //给按钮绑定打印事件 $("#btnPrint").bind("click",function(event){ $("#divI").printArea(); ）}； ）}；
js 打印插件（jQuery打印插件jqprint），样式不丢失，想打哪里就打哪里。
m0_37973043的博客
07-01 2151
插件下载及使用方法介绍地址 http://www.jq22.com/jquery-info347 解决样式丢失 按照上面方法配置好后发现样式会丢失，解决办法利用外链式CSS，将页面中的CSS复制一份到某个目录下 <link media="print" rel="stylesheet" type="text/css" href="XXX.css"> //注意一定要加media="print"这个就是打印预览页面的CSS，预览效果不理想通过这个样式文件调整。 自己页面里的CSS是展示在浏览器上的样式
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
热门推荐
蓝胖子的博客
02-24 1万+
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
vue-print打印条形码出现空白、样式丢失
qq_42557045的博客
06-18 2397
vue-print打印 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式
关于使用jqprint 打印以及打印没有样式问题
liux6687的博客
11-23 1万+
不多说 先要引入插件 &lt;script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./js/jquery.jqprint-0.3.js"&gt;&lt;/script&gt; 插件的使用 #
解决同时引入bootstrap样式与layui样式导致layui部分样式被覆盖的问题
知北行的博客
09-06 5793
问题1： 网页整体布局用的是bootstrap3的样式，但同时使用了layui的数据表格来进行表格数据的展示，导致layui的表格中的按钮字体颜色被bootstrap的样式覆盖。 错误样式如下图（操作栏的按钮图标）： 解决方法： 方法1：layui.table回调覆盖 在 layui 表格数据加载的回调方法中(table.render中的done()方法)，通过 jquery类选择器，重新设置其字体颜色： $(".layui-table-col-special a").addClass("barColor
js print 预览样式无效_解决jQuery打印插件printArea不显示样式或图片的问题 - YangJunwei...
weixin_39955732的博客
12-20 1958
jQuery有个局部打印的插件 PrintArea，采用的是JSON配置，可以通过popup或者iframe的方式来呈现，使用起来非常简单。相关网址使用方法也非常简单，但有几点需要注意的，我们一起来看看！使用方法1、引入 jquery.js 和 jquery.printarea.js 文件2、在需要打印的区域，添加一个最外层div比如这里是要打印的区域3、在打印区域代码后，加上如下JS代码$('#...
jqeury打印插件printareajs打印没有样式
开享
08-29 4510
解决办法：样式要放在要打印的内容中
js print 预览样式无效_使用jquery.PrintArea.js打印网页的样式问题
weixin_39880899的博客
12-20 540
在使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来，在网上找了好多资料，整理一下分享给大家一、先看看css的引用文件方式1、直接在内部的元素中使用”style”属性来定义样式，比如：2、在元素中使用”style”元素来指定3、使用元素链接到外部的样式文件，比如：这三种是比较常见的方式二、第一种方式：直接在内部的元素中使用”style”属性来定义样式，然后调用pr...
使用插件jquery.PrintArea.js，打印样式信息的解决办法
午夜灬玫瑰焰钻的博客
08-05 7722
使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来解决办法如下 一、看css的引用文件方式 　　1、直接在内部的元素中使用”style”属性来定义样式，比如：<div style=”width:800px;”></div> 　　2、在<head>元素中使用”style”元素来指定 　　3、使用<link>...
JS打印表格时边框缺失问题
ymzhao
12-30 5935
问题描述： JS打印表格时边框缺失问题 项目场景：window.print()打印网页，预览中，表格的边框缺失部分或全部 原因分析： 首先，怀疑是设置了border-collapse:collapse合并边框导致的问题 不使用合并边框，手动设置td边框后发现问题还是存在 然后，发现貌似是PDF预览的问题。下载PDF，打开，发现缩放都会让边框样式改变。转WORD或者直接打印机打印，证实边框样式并没有问题。。。 解决方案： 如果真的只是PDF预览问题，那无法解决。如果不是的话，可以参考这位老哥的方案： J
使用jqprint插件打印Bootstrap table表格出现双表头问题处理
贵在坚持
05-07 1094
问题描述： 打印表格出现以下问题 解决方法： 注释掉高度，问题就解决了，具体原因不清楚，有大佬知道的，可以留言指教下 $table.bootstrapTable({ // height: getHeight(), striped: true, uniqueId: 'year', searchOnEnterKey: true, sh...
使用print.js打印table,边框出现丢失
qq_39691676的博客
10-26 922
table标签设置 cellspacing=“0”原因: 可能是设置了单元格合并导致的。
解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题 按钮颜色字体为灰色而不是黑色 模糊看不清楚 important使提升优先级 提升权重
tanzongbiao的专栏
11-25 687
解决方法： 新增只的css文件 custom-qyj.css 引入 <link rel="stylesheet" href="/jslib/ga/custom-qyj.css"/> /*! like12 add,20211125 解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题(reboot.scss的“color: inherit”导致layer强行继承了bootstrap的color) 加!important使提升至最高优先级 */ .layui
Jquery网页打印
最简单的东西，往往包含了最复杂的实现。
08-23 1万+
Jquery网页打印注意问题
Printjs 打印样式丢失,字体无法更改的处理方法
狼丶宇先森的网络科技空间
10-24 1万+
Print.js 主要是为了帮助我们直接在浏览器中开发打印功能，这篇文章主要是介绍了Vue中使用Printjs插件实现打印功能,并出现的部分bug及样式丢失的问题,需要的朋友可以参考下。
class jqprint 失效_jquery 打印没有CSS怎么解决？
weixin_39956182的博客
12-31 759
展开全部解决方法：要把css代码放入my_show里面，跟打印的内容放在一起32313133353236313431303231363533e58685e5aeb931333365633864，让jquery一起加载，才能生效。具体操作：一、添加打印样式1. 为屏幕显示和打印分别准备一个css文件，如下所示：用于屏幕显示的css： 用于打印的css：2. import方式：@import url(...
拿来即改的云HIS源码：前端BootStrap+LayUI，后端SpringBoot，数据库MySQL+MyCat
最新发布
zmm201453的博客
06-16 181
技术选型包括前后端分离模式，前端选用原生HTML、JS、CSS、Jquery、BootStrap、layui等技术，后端采用SpringBoot框架、Mybatis-Plus、WebSocket、Stomp、Vintage-Engine、Thymeleaf等技术，数据库使用MySQL。支撑医院核心业务流程，包括预约挂号、划价收费、医生工作站、电子病历、药库管理等模块。：实现药品的采购、入库、出库、盘点等库存管理功能，以及处方审核、药品发放等业务流程。：包括出院医嘱开具、费用审核、结算和出院证明打印等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值