js 调用浏览器打印时无法通过 css 设置背景

最新推荐文章于 2023-11-27 11:14:30 发布
最新推荐文章于 2023-11-27 11:14:30 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 js css 文章标签： 打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Miss_Liang/article/details/94457402
版权
前端 同时被 3 个专栏收录
25 篇文章 1 订阅
订阅专栏
js
18 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

js 调用浏览器打印时无法通过 css 设置背景

项目中使用 after 和 before 以及 border-bottom 模拟了一个有三行下划线的输入文本框，当调用 window.print 之后，after 和 before 的背景无法渲染，导致只有最下面一行下划线

解决方式：

在 after 和 before 的父元素的样式中添加 -webkit-print-color-adjust: exact;

 

注意：项目中使用的是 Chrome 浏览器

Miss_Liang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
判断用户浏览器及分辨率调用不同的CSS样式文件
09-27
判断用户分辨率调用不同的CSS样式文件，下面的代码确实有问题，不过我们提供了一个js版本的，需要的朋友可以参考下原理
html 打印预览页面背景,HTML – 无法打印背景颜色(CSS解决方案)？
weixin_39626369的博客
06-03 941
好吧,我认为你没有得到我在评论中的意思,反正,所以它很简单,比如我有一个元素,比如说背景设置为番茄,所以为了使这项工作,首先你必须确保你有媒体打印设置,如@media print {/* Declarations go here */}要么现在,你需要宣布的是-webkit-print-color-adjust：exact;在物业区,像@media print, screen { /* Using...
window.print()打印样式不生效的问题
weixin_52509007的博客
05-27 4634
// 打印表格 printFn() { this.isPrint = true this.$nextTick(() => { let printHtml = document.getElementById('table').innerHTML // document.querySelector('body').style.width = width.clientWidth + 'px' // document.que..
jqprint插件打印页面css失效的解决办法
滴水石穿
09-04 5473
jqprint插件作为前端一个打印页面插件简单易用，相关配置如下： 请注意!很多朋友遇到Cannot read property 'opera' of undefined错误问题是juqery版本兼容问题 解决方法：加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题 1 <scriptsrc="http://www.jq22....
浏览器打印不出背景 background-color
JasonAlonk的博客
12-17 2128
给要打印的背景的元素添加样式 -webkit-print-color-adjust: exact;
用css和js的的方法 打印背景图片
qq_29944927的博客
04-10 1111
在项目中，当要实现将前端背景进行打印的时候，当我们点击打印时，可能会出现如下情景(如图所示): 即要勾选背景图片的时候才能够将背景进行打印，对于客户端来说显然是不友好的 (不排除部分用户并不知道在哪进行勾选)，从而导致项目的评价受影响。在这里我介绍了两种解决上述问题的方法，分别是就css和js两块进行介绍。 ** 一;CSS解决方法 ** 二:JS解决方法 大家可以根据自己的实际需要进行选择...
浏览器打印背景色丢失解决方法
wtnu200的专栏
10-08 2468
浏览器里打印html内容，在浏览里背景色就丢失了，打印出来也有问题，我测试时使用chrome浏览器，这问题可以用chrome的打印设置解决，打印浏览-》更多设置-》勾选 背景图片 可以解决，其它浏览器应该有同样设置的地方，虽然可以解决但比较麻烦，而且当时用C/S做客户端套CefSharp ChromiumWebBrowser浏览器，没有这样的设置界面，所以还是要想其它办法，实际上一条css样式就能...
js判断是pc判断浏览器调用不同css样式
07-18
function getBrowser() { var i = window.navigator.userAgent; var isChrome = i.indexOf("Chrome") && window.chrome; var issafari=i.indexOf("safari") && window....js判断不同浏览器内核调用不同css样式
JS判断浏览器分辨率自动调用不同CSS
05-30
JS判断浏览器分辨率自动调用不同CSS!
JS判断浏览器分辨率调用不同css样式
11-09
JS判断浏览器分辨率调用不同css样式,网上搜集的，难免有误，呵呵，敬请谅解。
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能;直接下载可用
JS实现预览和保存网页背景功能
06-12
JS实现预览和保存网页背景功能，此代码的保存功能仅适用于IE浏览器。
sass-to-js:通过CSS将Sass变量传递给JavaScript的库
04-27
sass-to-js是一个库，可以轻松地通过CSS将Sass变量传递给JavaScript。 它提供了Sass方法，可将Sass值以JSON格式保存到CSS和JavaScript助手中，以将它们从CSS读取到JavaScript对象。 它不需要依赖，并且具有！ ...
【浏览器打印无法显示单选按钮的选中效果】
gaojiahao_的博客
03-10 1923
vue项目，使用的antDesign，当使用浏览器打印(print-js)时无法显示单选按钮的选中效果 方法1：勾选设置中的选项的背景图形 方法2：加上强制打印背景颜色/图像,代码如下: /* 强制打印背景颜色/图像 */ * { -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; ...
js的window.print()功能 有些背景色设置和背景图片无法显示的问题
Mr_pets的博客
04-06 2420
js的window.print()功能 有些背景色设置和背景图片无法显示的问题 写在前面：需求需要调用浏览器原生的print功能；下载保存为pdf，出现了 部分样式消失的情况 方法一：(此方法实测，针对我出现的情况，可用) //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-a
解决chrome浏览器打印表格时表头背景色丢失
前端开发
11-26 1166
-webkit-print-color-adjust属性是非标准CSS扩展，可用于在基于WebKit引擎的浏览器中强制打印背景色和图像。
JS打印和报表输出
坚持,才是力量.老实做人,踏实做事.
12-16 1433
一打印：（1） 在实际应用中！特别是一些公司需要报表输出和打印！这个时候我们就会用到JS的打印和报表输出功能！当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果！这个时候打印你会发现打印出来的是整个页面，包裹着网站的logo和一些其他不需要的按钮！这个时候我们可以使用div控制一下。把不需要打印的东西用不 打印的内容
页面打印window.print()背景颜色消失的问题
最新发布
qq_27806371的博客
11-27 221
页面打印window.print()背景颜色消失的问题。
JS高级
海涛高软
11-18 103
var aa = null; aa = { name: "xuhaitao" } aa = null; var aa; console.log(aa); //打印结果:undefined var aa = { name: "xuhaitao" } var bb = aa; function test(obj) { obj = { name: "xuhaihuan" }; } test(aa); console.log(aa.name); //打印结果:xuhaitao c...
Js点击按钮调用浏览器打印功能隐藏页面打印按钮
05-10
你可以使用`window.print()`方法来调用浏览器的打印功能。要隐藏页面上的打印按钮，你可以使用CSS的`display:none`属性来隐藏该按钮。以下是一个示例代码： HTML: ```html 打印 这是要打印的内容 ``` CSS: ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值