css实现window.print() 带背景图打印

最新推荐文章于 2022-08-31 21:23:05 发布
原创 最新推荐文章于 2022-08-31 21:23:05 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

本文探讨了如何使用精确的打印颜色调整技术(-webkit-print-color-adjust到print-color-adjust)确保在不同浏览器中一致的打印效果，这对于前端开发者来说是关键知识点。

@media print {
         body{
            -webkit-print-color-adjust:exact;
            -moz-print-color-adjust:exact;
            -ms-print-color-adjust:exact;
            print-color-adjust:exact;
        } 
    }     

记录调用window.print时因处理页眉页脚问题导致自动分页后打印不全的解决方法
姜雪辞的博客
07-14 4065
写在前面 这几天朋友项目中还在使用window.print，结果问题它又来了。我写了个demo模拟遇到问题的场景，先看效果： 看过我前一篇关于print的文章的小伙伴都很熟悉这个界面吧，上次截的时候就有这个页眉页脚了，但上次他没有提这个地方。这次发现问题了，就来解决一下。 言归正传，那想去掉这个其实很简单，只要在浏览器设置中把页眉页脚勾掉就可以了： 但还是那句话，你可能给每一个用这个项目的客户说，你要在打印之前去浏览器设置里把页眉页脚勾掉吗？ 显然是不可能的。所以像上次的背景水印一样，我们还
AngularJs v1.6.6，使用window.print()打印报表实现
DOBEONE玉苑的博客
11-24 3394
原先使用Grid++Report6打印报表，由于这个插件对于浏览器支持不到位，所以放弃使用了。所以考虑的做一个可以可以直接使用浏览器默认的打印方式实现（window.print()）；参考了京东的订单打印，有如下思路： 在html页面完成对应打印单据的排版 调用打印页面调用的时候携带数据跳转到打印页面 获取url携带的信息，使用ajax获取打印的数据 使用angularJs来渲染需要打印的数据 h
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能;直接下载可用
js的window.print()打印背景图片，打印背景图片无法显示
张宇的博客
11-01 1万+
js的window，print()打印背景图片 题目描述 js的window，print()打印背景图片给body加了图片地址之后，非要设置浏览器打印选项里面设置背景图形打印才行，怎么通过js去设置默认的就是打印带背景图像的 方法一 ：css //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; ...
window.print()打印时设置背景色
前端打工人的博客
10-21 2332
在@media print {}里，只需在需要加背景色的dom元素添加样式 @media print { #pdfDom { -webkit-print-color-adjust: exact; } } 若还是不显示，给背景色加上!important；
js的window.print()功能 有些背景色设置和背景图片无法显示的问题
Mr_pets的博客
04-06 3228
js的window.print()功能 有些背景色设置和背景图片无法显示的问题 写在前面：需求需要调用浏览器原生的print功能；下载保存为pdf，出现了 部分样式消失的情况 方法一：(此方法实测，针对我出现的情况，可用) //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-a
利用window.print()实现带背景图片和二维码的HTML打印功能
要实现通过HTML和JavaScript调用浏览器打印带有背景图片和生成二维码的功能，需要编写相应的JavaScript代码调用window.print()方法，并确保所有内容，包括背景图片和二维码，都被正确地渲染和打印。可能需要使用CSS...
window.print打印保留背景色样式
最新发布
01-21
为了确保在调用 `window.print()` 方法打印网页时能够保留背景颜色，可以通过 CSS 的媒体查询来实现这一功能。具体来说，在全局 CSS 中定义特定于打印样式的规则可以解决这个问题。 #### 使用 `-print-color-adjust...
js window.print() 打印TD背景色
liangbao568的博客
08-31 1317
JS window.print()打印页面打印元素设置的背景色
js打印window.print()图片打印
热门推荐
D.spring
12-15 2万+
1. 这里用的是A4纸，设置打印表格属性（width:100%,height:980px） 2.由于打印可能存在多页，所以heightt属性必须严格控制。 3.由于自己是先隐藏不需要打印的DIV，然后显示需要打印的DIV。当需要打印的DIV存在图片等资源导致加载较慢时。window.print又是异步的，所以存在图片没加载完就打印的情况。 解决方案：判断图片是否加载完成，加载完成在调用打印。
通过定义css让页面可以打印指定的底色
rocklee的专栏
09-17 3705
tr.header { background-color: #ccc !important; } @media print { tr.header { background-color: #ccc !important; -webkit-print-color-adjust: exact; }} 不知道为什么已经勾选了IE的打印底色不行,chrome也不行
print-is网页打印
qq_34631220的博客
07-18 231
print-is网页打印
解决调用window.print时，因页面较长自动分成两页后只有第一页有背景图，第二页没有背景图，以及-webkit-print-color-adjust: exact失效的问题
姜雪辞的博客
07-02 4442
问题重现 为了清晰的看到问题，我新写了一个空白的html，然后对body样式进行了如下设置： ①高度2000px ②背景图 在y轴循环填满整个高度 body { height:2000px; background: url("images/noBallFriends.png") repeat-y; } 然后调用window.print()打印当前页面，可以看到他是这样子的： 由于2000px的高度比较高，这时它会自动分两页去打印，第一页看上去没什么问题，但第二页： 没错，背景图没了。 怎么回事？我
JS中window.print()不支持背景色
aeoliancrazy的博客
04-25 8078
JS中window.print()不支持背景色 除去，在网上其他帖子的说法是：css背景+图片实现 原地址传送门：https://www.cnblogs.com/ranran/p/js_print.html 我遇到的问题是，checkbox要用背景色进行填充选中项， 最开始用background-color，怎么都调不出来 最后直接用 border实现，把border的厚度（宽度）设置的...
关于浏览器打印无法打印背景，需要手动勾选打印背景解决方案
山海一哥的博客
04-03 4332
有同事问我怎么解决这种问题，总不可以让用户每次都手动勾选吧。目前思考到两种解决方式： 打印无法打印背景，那么我们的出发点就是可不可以不用背景而使用其他的东西，比如图片本身（同事这里无法使用，原因在于客户可以自定义背景颜色，提供图片并不是最好的选择，毕竟颜色选择器你懂的） 方法一： 使用h5新特性画布canvas,通过画布画出来的一块区域色块是可以在打印中展示的 方法二； 既然背景不能打印，选择的又...
[前端]打印预览图片问题
SouthNAN的博客
01-28 1724
问题：浏览器非打印预览页面能够显示图片，但调用print()方法进入打印预览界面时，只有谷歌显示图片，其他主流浏览器均不显示，如图： 非打印页： 进入打印页后：图片消失 主要代码如下(修改前)： <!-- 图片 --> <div style="display: inline-block;margin-right: 50px;"> <img style="width: 200px" src="@/assets/images/fuwuhao.png" alt=""&gt
js 去掉浏览器打印默认的页头页尾和打印背景图片
yuzenan的博客
05-16 2467
<!DOCTYPE html> <html> <head> <title>print</title> <meta charset="utf-8"> <style media="print"> @page { size: auto; ...
JS打印和报表输出
坚持,才是力量.老实做人,踏实做事.
12-16 1499
一打印：（1） 在实际应用中！特别是一些公司需要报表输出和打印！这个时候我们就会用到JS的打印和报表输出功能！当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果！这个时候打印你会发现打印出来的是整个页面，包裹着网站的logo和一些其他不需要的按钮！这个时候我们可以使用div控制一下。把不需要打印的东西用不 打印的内容
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慧香一格

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值