element ui 组件打印时丢失样式的解决办法

最新推荐文章于 2024-08-20 16:43:06 发布

windcore

最新推荐文章于 2024-08-20 16:43:06 发布

阅读量2.2k

点赞数 3

分类专栏：前端技术文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/yueping0718/article/details/126039000

版权

前端技术专栏收录该内容

3 篇文章 1 订阅

订阅专栏

问题

当vue前端使用打印插件时（比如vue-print-nb）,偶尔会碰到无法打印出组件样式的情况，比如复选框el-checkbox。

实际选中情况

点击打印时的情况，没了√。

解决办法

找到对应的组件样式，比如复选框el-checkbox,找到.el_checkbox__input类，添加

.el-checkbox__input {
//添加以下三行即可在打印的时候出现相应的样式
  -webkit-print-color-adjust: exact;

  -moz-print-color-adjust: exact;
  color-adjust: exact;
}

最终效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

windcore

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响，引入后发现项目组件库的组件样式不对了（Element/Ant Design Vue/Naive UI/TDesign）

王佳斌

09-07

6310

vue3 vite tailwind导致ui组件库element ant design vue naive ui 部分组件样式兼容冲突变形问题，vue3使用tailwind 后其他样式受到了影响，vue3 tailwindcss和element样式冲突处理，引入tailwind后element按钮组件没有背景色了，element message消息提示样式错位，vue3如何解决tailwind与elementUI样式不兼容问题，vue3如何解决使用tailwind导致组件样式不对的问题，解决tailwind

qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用

最新发布

高级前端工程师

10-29

5231

乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的

参与评论您还未登录，请先登录后发表或查看评论

非常 nb 的 Vue 组件 (含Vue3版本)（打印）

qq_66953312的博客

07-25

2215

关于 vue-print-nb 组件的详细介绍！

vue项目-打印页面中指定区域的内容时样式丢失_【前端技术分享】如何在vue-cli的环境下实现web的打印指定区域的内容？...

weixin_39932947的博客

02-04

1333

今天小编在代课的时候，发现很多刚刚接触前端领域的同学还不太清楚如何实现用户区域打印，网上的很多博客也只是只贴出了解决代码，但或许并不帮助大家了解其到底是什么意思。小编今天就具体的来给讲一讲如何在vue-cli的环境下实现web的打印指定区域的内容(文字或者表格图表)，让大家在学习的过程中少走一些弯路。走起，先看完成效果图：如何实现上诉需求呢，接下来咱们就一一讲解，首先咱们先把代码切分为四个部分：1...

使用element-plus按需引入后ElMessageBox样式丢失的问题

hongkid的专栏

08-20

411

注意：import 'element-plus/theme-chalk/el-overlay.css'，网上很多其他的文章少了这个，影响的是灰色的蒙版样式。按官方配置的按需引入，使用ElMessageBox的时候，样式无法自动引入。

【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！

蓝胖子的博客

02-24

1万+

【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！

vue-cli项目 ElementUI样式丢失

AbyssQ3Q的博客

09-30

2251

vue-cli 3/4 引入ElementUI后样式丢失使用vue-cli快速创建项目后，引入element，element元素是有了，但是样式莫名其妙丢失了网上有说是因为node和npm的版本不匹配导致的，于是卸载了node然后清空了npm的所有文件，重新安装还是没用然后看见了vue.config.js这个配置文件里有css相关的配置，觉得会不会是这个导致的 // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin ext

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题（亲测解决）

weixin_44056717的博客

04-12

4816

vue-print-nb element 打印element表格不全（亲测解决）

关于使用jqprint 打印以及打印没有样式问题

热门推荐

liux6687的博客

11-23

1万+

不多说先要引入插件 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.jqprint-0.3.js"></script> 插件的使用 #

element-ui@2.15.9 cdn资源

08-09

Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可扩展的用户界面。版本号 `2.15.9` 表示这是该库的一个稳定版本，可能包含了修复的错误、优化的性能以及新增的功能。 ...

解决vue+elementui项目打包后样式变化问题

10-15

解决方法是在`main.js`中调整引入顺序，将第三方库如ElementUI的CSS文件放在前面，而自定义路由（router）的引入放在后面，确保自定义样式在第三方样式之后加载，避免被覆盖。例如： ```javascript import Vue ...

三种方式修改vue项目中的element组件样式

Kätzchen-408的博客

04-12

7883

Printjs 打印样式丢失,字体无法更改的处理方法

狼丶宇先森的网络科技空间

10-24

8988

Print.js 主要是为了帮助我们直接在浏览器中开发打印功能，这篇文章主要是介绍了Vue中使用Printjs插件实现打印功能,并出现的部分bug及样式丢失的问题,需要的朋友可以参考下。

Element-Ui 双重el-tabs组件选中第二层时，刷新导致第一层选中样式丢失问题以及解决方法

JH729446996的博客

09-30

1500

原因：刷新时 el-tabs 的v-model绑定的activeName 赋值时，第二层的覆盖掉了第一层的解决方法（个人想到的一个笨方法）：一：先做一个一样的组件二：将两层tabs绑定的值区别开来第一层我加了个判断将 tabActive赋给activeName 第二层将tabActive赋给activeName（这里我名字起的是activeTwo，随便起无所谓）这样一来两层绑定的值不一样，刷新时，第一层的选中样式由第一个组件赋予，第二层由第二个组件...

vue-print打印条形码出现空白、样式丢失

qq_42557045的博客

06-18

2157

vue-print打印欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式

升级wepack4后解决element-ui样式丢失问题

clks_的博客

02-26

1234

webpack3 解决样式丢失 wepack4 解决样式丢失

vue.js打包后elementui图标样式丢失问题解决方案

hxq133233的博客

04-21

4533

npm run dev的时候elementui的图标能够看见，但是将项目打包后扔到tomcat里面跟后端服务一起部署的时候，图标丢失，打开浏览器控制台，发现报404错误。可以看到找elementui的图标的样式的时候是到 http://localhost:8080/static/css/static/fonts/element-icons.535877f.woff这个路径下找字体图标文件，可以...

解决element-plus提示组件样式丢失问题

土豆你是马铃薯吗的博客

02-02

1513

解决element-plus提示组件样式丢失问题

关于element-ui样式无法显示的问题+解决办法

喜狼狼与灰太杨的博客

08-18

5866

问题描述：新建的一个Vue.js项目（编辑工具WebStrom），我的环境： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm install -g vue-cli cnpm npm的淘宝镜像项目中导入Element-UI框架安装： npm install element-ui -S 项目中导入，修改main.js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/i

element ui table selected失效

09-13

Element UI中的Table组件有一个内置的功能叫做`selection`，用于处理表格行选择。当你遇到`selected`属性失效的情况，可能是由于以下几个原因： 1. 初始化设置错误：确认你在初始化Table组件时是否正确设置了`select-on-click`、`select-multiple`等与选中相关的选项。 ```html <el-table :data="tableData" :selection="{ multiple: true, selectOnIndeterminate: false }"> ... </el-table> ``` 2. 数据更新未同步：当表格的数据发生变化而没有同步更新`selection`状态时，选中的状态可能会丢失。记得在数据变动后手动触发`@selection-change`事件或者使用Vue的`$nextTick`等待DOM渲染完成。 ```js this.$nextTick(() => { this.tableData.map(item => (item.selected = false)) // 可能需要根据实际需求修改这里 }) ``` 3. 禁用了默认的鼠标点击选中功能：如果你自定义了某些行为，比如使用`row-class-name`或`row-style`改变了表头或单元格样式，可能会干扰到默认的选中效果。 4. 元素节点问题：确保在表格元素上没有其他CSS样式或JavaScript阻止了点击事件传递给`el-table`。如果以上情况都不是问题所在，可以尝试提供更详细的报错信息或者复现代码，以便于定位问题。同时，你也可以说出具体的场景和期望结果，我会更好地帮助你解决问题。