浏览器打印背景色丢失解决方法

最新推荐文章于 2024-04-18 10:17:46 发布
最新推荐文章于 2024-04-18 10:17:46 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： web服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtnu200/article/details/102371797
版权

浏览器里打印html内容，在浏览里背景色就丢失了，打印出来也有问题，我测试时使用chrome浏览器，这问题可以用chrome的打印设置解决，打印浏览-》更多设置-》勾选 背景图片 可以解决，其它浏览器应该有同样设置的地方，虽然可以解决但比较麻烦，而且当时用C/S做客户端套CefSharp ChromiumWebBrowser浏览器，没有这样的设置界面，所以还是要想其它办法，实际上一条css样式就能解决

-webkit-print-color-adjust: exact;

顺带吐槽一下CefSharp没得设置打印边框等这些设置

 

wtnu200
关注
专栏目录
html 打印预览页面背景,HTML – 无法打印背景颜色(CSS解决方案)？
weixin_39626369的博客
06-03 1022
好吧,我认为你没有得到我在评论中的意思,反正,所以它很简单,比如我有一个元素,比如说背景设置为番茄,所以为了使这项工作,首先你必须确保你有媒体打印设置,如@media print {/* Declarations go here */}要么现在,你需要宣布的是-webkit-print-color-adjust：exact;在物业区,像@media print, screen { /* Using...
vue打印（可分页，可显示背景色，可打印echarts）
一名女程序猿的博客
04-26 1244
在项目中创建print.js文件，将下面代码复制粘贴 //print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); .
[已解决] 浏览器打印时背景色丢失
weixin_54858833的博客
06-11 881
最近的项目在调用浏览器的打印功能时发现表格设置的背景色丢失。 添加以下 CSS 代码解决: //google chrome explore -webkit-print-color-adjust: exact; //firefox explore -moz-print-color-adjust: exact; color-adjust: exact;
window.print打印背景色丢失，谷歌、火狐解决方案。同求IE解决方案
wunengneng的博客
11-20 2691
近期在看打印,由于window.print调用的是浏览器的打印功能，所以发现在打印时出现背景色丢失的现象。经过查询一些资料，解决了在谷歌和火狐上背景色丢失的问题。 谷歌打印背景色丢失解决方案 在div的style中添加 -webkit-print-color-adjust: exact; <style type="text/css" media="print,screen"> div{ //webkit 为Google Chrome、Safari等浏览器内核 -webkit-pr
关于html文件中表格打印不出底色的解决方法
hank209的VC/MFC学习之旅
06-17 2083
OA系统里少不了一些表格的打印，现实的情况是在浏览器端显示的很漂亮的表单，打印出来却图片、背景色全没有了，一片狼藉阿，吐血，网上疯狂查找原因，什么CSS+html控制打印方法阿一大堆，测试未果； 后再查，原来是非代码原因控制所致，在IE设置里  工具--Internet选项－高级－打印背景颜色打勾    问题OK解决，真是晕阿，原来代码还是不管用啊，需要手工设置，汗....
解决调用window.print时，因页面较长自动分成两页后只有第一页有背景图，第二页没有背景图，以及-webkit-print-color-adjust: exact失效的问题
姜雪辞的博客
07-02 4154
问题重现 为了清晰的看到问题，我新写了一个空白的html，然后对body样式进行了如下设置： ①高度2000px ②背景图 在y轴循环填满整个高度 body { height:2000px; background: url("images/noBallFriends.png") repeat-y; } 然后调用window.print()打印当前页面，可以看到他是这样子的： 由于2000px的高度比较高，这时它会自动分两页去打印，第一页看上去没什么问题，但第二页： 没错，背景图没了。 怎么回事？我
html 打印 div 背景颜色 无效
HPFBoy的博客
06-08 584
打印背景颜色设置background-color设置无效
乔布简历体验以及解决将html格式的简历导出PDF缺颜色问题
产品经理养成手册
02-19 1331
今天用了一下乔布简历，付费下载他的简历之后，下载包里有四个文件，分别是txt、pdf、doc、html四种格式的简历。 txt格式不用说了，谁都不会把他发给面试官。 doc格式和我在网页上编辑的简历对比，出现了很多行间距过大、空格冗余的问题，如下图： 网页上编辑的： doc格式的： 这种问题还有很多，处女座不能忍啊 pdf格式的话问题也是类似，导出来的和我在网页上编辑的这完全不...
通过window.print() 打印页面 及 遇到的坑
koumeiyuu
06-30 7488
在IE11下 通过打印页面时候发现 bootstrap.Css文件会影响到window.print()的css样式,发生冲突 ， 解决方法：[这是在下的现在的看法，可能对于前段理解还不够，还未找到更好的方法] 1.style里覆盖bootstrap.css 里关于 print的代码 2.不用bootstrap 我是通过iframe来创建，自定义了样式 通过css，直接通过<style>或者 标签上 都可以 要背景色等样式需要设置一下页面的浏览器。 <di...
css 打印不显示
05-25
3. **背景色和图像**：默认情况下，浏览器可能不会打印背景色和图像。可以使用以下代码强制打印： ```css * { background-color: inherit !important; } img { max-width: 100% !important; height: auto !...
vue、js 打印 window.print（）方法
gu_eu的博客
03-05 3994
print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.querySelector('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。 最简单的使用，直接window.print()就可以，当然，document.execCommand('print') 也可以达到同样的效果。 代码示例 ： // 这里我们是对局部打印做
css踩坑记录（1）——css控制强制打印背景
qq_54714968的博客
11-03 832
调用的浏览器的打印，是无法控制的。使用Chrome和Safari，可以添加CSS样式。
js 打印网页时没有背景色，window.print打印背景色丢失
最新发布
橙-极纪元-cplvfx-JJY.Cheng
04-18 720
js 打印网页时没有背景色，window.print打印背景色丢失
解决 Webkit 浏览器下打印网页需要手工设置 “打印背景色“ 的问题
CAO11021的博客
08-02 612
如题, 比如说一个元素有个背景颜色, 在打印的时候默认浏览器是不打印背景图和背景色的. 若要打印, 需要在元素的样式上添加以下代码: -webkit-print-color-adjust: exact; 这样 WebKit 浏览器中 无论是否勾选 "打印背景图和背景色", 背景图和背景色都会被打印出来. IE下无效 ...
打印样式CSS的技巧和要点介绍
ysds20211402的博客
05-14 353
转自：微点阅读https://www.weidianyuedu.com 不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果： 使用响应式布局设置打印的效果 在合适的时候打印背景图片和颜色 添加显示的网址或页面链接，以供参考 使用css filter 提高打印的图形效果 针对打印的样式，而不是屏幕显示样式 首先，我们需要使用媒体查询（media query）针对打印样式设置。 1 2 3 @media p..
vue打印遇到的相关问题
weixin_43807909的博客
10-27 275
2.打印时，内容由好几个部分组成，每个部分的集合数量都是不确定的，这个时候分页就容易被强制分页。这个时候可以用 page-break-inside:avoid 或者 break-after:always;举例 page-break-inside:avoid 使用在div中，如果打印页面空间不足，div整体会进行分页，不会导致内容被强制拆开。使用在TABLE中代表结尾强制分页，不管空间够不够，都直接分页。1.加背景颜色打印后不显示，必需勾选打印设置中的背景图像。/* 强制打印背景颜色/图像 */
Google打印没有彩色，浏览器打印预览没有背景颜色和没有颜色
vicky_yongqi的博客
06-13 2397
Google打印没有彩色，浏览器打印预览没有背景颜色和没有颜色
Angular 与PDF之二：打印预览的实现
KenkoTech的博客
05-03 1861
Angular 打印预览
关于打印样式CSS的技巧和要点介绍
xiaoweids的博客
06-24 336
转自：微点阅读 https://www.weidianyuedu.com不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：使用响应式布局设置打印的效果在合适的时候打印背景图片和颜色添加显示的网址或页面链接，以供参考使用css filter 提高打印的图形效果针对打印的样式，而不是屏幕显示样式首先，我们需要使用媒体查询（media query）针对打印样式设置。123@media print {}重新针对打印写CSS样式是没有必要的，
浏览器打印小票 不要预览 调用方法就打印
05-18
在浏览器中直接打印小票需要使用 JavaScript，可以通过以下步骤实现： 1. 创建一个包含小票内容的 HTML 页面。 2. 添加一个 JavaScript 函数来触发打印操作： ``` function printTicket() { window.print(); } ``` 3. 在 HTML 页面中添加一个按钮，并将其绑定到 `printTicket` 函数： ``` <button onclick="printTicket()">打印小票</button> ``` 4. 当用户点击按钮时，将出现打印对话框。用户可以选择打印机和其他打印选项，然后点击“打印”按钮以打印小票。 请注意，由于浏览器的安全机制限制，JavaScript 不允许自动触发打印操作，用户必须手动执行打印操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值