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

1年前作者：windcore分类：Toy博客阅读(50)违法举报

这篇具有很好参考价值的文章主要介绍了element ui 组件打印时丢失样式的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

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

实际选中情况

网页打印样式丢失,前端技术,ui,vue.js,javascript

文章来源地址https://www.toymoban.com/news/detail-586006.html

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

网页打印样式丢失,前端技术,ui,vue.js,javascript

解决办法

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

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

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

最终效果

网页打印样式丢失,前端技术,ui,vue.js,javascript

到了这里，关于element ui 组件打印时丢失样式的解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

element ui多选下拉组件(el-select)tag数量过多处理解决办法(二次封装)
如下图所示，当标签选择过多时，会占用过多空间期待效果：超过n行就自动省略，并可以进行展开收起,下图是实现后的效果图实现分析：通过extends继承el-select组件将select源码的template部分粘贴到封装的组件中，以此来操作展开、收起等需要操作dom的部分监听selected(已选择
2024年02月13日
浏览(17)
怎么修改element ui动态组件的样式
要修改elementUI组件的样式，可以采用以下两种方式通过选择权重覆盖elementUI组件的样式，如修改复选框为圆角：但这种方式为全局样式，会影响页面中所有复选框，如果不希望影响其它页面的样式，可以采用第二中方式但如果仅仅是设置了scoped属性，样式无法生效，原因是
2024年02月15日
浏览(11)
element ui 日期组件样式修改不生效
在当前页面增加一个style标签，标签上去掉 scoped 即可下面为日期时间选择器的样式，仅供参考，自行更改使用的是scss
2024年02月12日
浏览(13)
Element Ui 树形组件自定义样式与功能
一、功能描述：可实现树节点内容修改、增加节点、删除节点等，根据层级不同显示不同的图标等，已封装成组件。二、调用组件示例：三、效果图如下：
2024年02月15日
浏览(11)
Element UI组件中el-checkbox组件样式的修改
Element UI组件仅提供了按钮形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性（fill)，非按钮形式的如何修改这些样式呢? 提示：直接修改CSS属性，相关代码如下：我在写style样式的时候并没有加scoped属性，有时候加了该属性修改样
2024年02月12日
浏览(13)
Element-UI的dialog对话组件内的tinymce6弹窗被遮挡的解决办法及其它相关注意事项
修改层级注意要写在 style/style 中，我当时没注意，写在了 style scoped/style 中，死活没反应。利用属性 :destroy-on-close=\\\"true\\\" 要求对话组件关闭后销毁其中的元素下载中文包，初始化时配置中文即可。中文包位置：https://www.tiny.cloud/get-tiny/language-packages/ 配置参考： Dialog 对话框
2023年04月15日
浏览(23)
element ui组件的自定义类名样式不生效
element ui中，类似描述列表这种组件会提供自定义类名属性需要注意，样式不能写在style scoped标签中，会被vue自动加上data-v属性，导致样式失效。必须写在style标签里
2024年02月13日
浏览(11)
Vue2 - 引入Element-UI组件样式
官方文档 https://element.eleme.cn/#/zh-CN/component/installation 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。在终端cd到项目文件夹下安装也可以通过CDN（不推荐）目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
2024年02月06日
浏览(17)
我有妙招-使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据当我们使用el-tree时经常会涉及到回显，有的时候回显失败怎么解决，下面是我常用的两种回显方式第一种：第二种：注意：一定要确保树形选择器里的数据先与上方代码获取到关于el-tree的
2024年02月16日
浏览(13)
改变element-ui中el-tabs组件的样式
2024年01月24日
浏览(16)