css js 打印背景图

最新推荐文章于 2023-08-10 22:31:07 发布
最新推荐文章于 2023-08-10 22:31:07 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： Javascript HTML/CSS 文章标签： js打印背景图 css打印背景图 打印背景图 背景图打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lidysun/article/details/88995208
版权

如果不对浏览器设置，直接打印时是无法打印背景图的。
js打印背景图

  • 方法一 ：css
@media print {
     body{
        -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    } 
}
  • 方法二 ：js
function printPage(){
    var office = document.getElementsByClassName('office')[0];
    var imgs = office.getElementsByTagName('img');
    var img,src;
    if(!imgs.length){
        src = window.getComputedStyle(office,null).getPropertyValue('background-image').replace(/(^url)|\(|\)|\"/g,'');
        img = document.createElement('img');
        img.src=src;
        img.height = 150;
        img.width = 150;
        office.style.backgroundImage = 'none';
        office.appendChild(img);
    }
    window.print();
    //取消打印还原
    setTimeout(function(){
        office.removeChild(img);
        office.style.backgroundImage = 'url("'+ src +'")';
    },100)
}

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js打印背景图</title>
    <style>
        *{margin:0;padding:0;}
        .wrap{position:relative;text-align: right;padding:50px;}
        .office{
            position: absolute;
            right: 50px;
            bottom: 10px;
            width: 150px;
            height: 150px;
            background-image: url(./official_urlseal.png);
            background-position:center;
            background-repeat:no-repeat;
            background-size: cover;
        }
@media print {
     body{
        -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    } 
    button{display:none;}
}
    </style>
</head>
<body>
    <div class="wrap">
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <p>dsfsdfsdf</p>
        <div class="office"></div>
    </div>
    <p style="text-align:right;margin:100px 50px 0 0;"><button onclick="printPage()" >打印</button></p>
    <script type="text/javascript">
function printPage(){
    var office = document.getElementsByClassName('office')[0];
    var imgs = office.getElementsByTagName('img');
    var img,src;
    if(!imgs.length){
        src = window.getComputedStyle(office,null).getPropertyValue('background-image').replace(/(^url)|\(|\)|\"/g,'');
        img = document.createElement('img');
        img.src=src;
        img.height = 150;
        img.width = 150;
        office.style.backgroundImage = 'none';
        office.appendChild(img);
    }
    window.print();
    //取消打印还原
    setTimeout(function(){
        office.removeChild(img);
        office.style.backgroundImage = 'url("'+ src +'")';
    },100)
}
    </script>
</body>
</html>

备份以备用！

wx_lidysun
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background-image-extension:Chrome扩展程序，可轻松让您下载在CSS中设置为背景图像的图像
04-28
图片下载器 ，只需单击一下即可下载徽标，“受保护的”图片（例如instagram.com上的图片）和背景图片。 下载CSS背景图片 定期下载图片 下载具有点击阻止程序（如Instagram）的图像 来自thenounproject.com的徽标信用
JavaScript 打印，去掉上下URL，打印背景图
PurineKing之博客
11-24 436
<style type="text/css"> @page{ margin-top: 1mm; margin-bottom: 1mm; } @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; } } </style> <s
在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-10 2015
当用户点击"打印"按钮时，浏览器将会打印出指定的DIV内的内容。要调用浏览器中的打印功能，并指定需要打印的内容为特定的DIV内的内容，你可以使用JavaScript来实现。水平居中是相对父元素进行的，所以父元素应该具有明确的宽度。如果父元素的宽度是根据内容自适应的，请确保父元素可以容纳居中的子元素。通过将元素的左边距设置为父元素宽度的一半，将其移到了水平中间位置。变换，将元素在水平方向上向左平移了自身宽度的一半，实现了水平居中。的类，并设置了相对定位以及水平居中的样式。在上面的示例中，我们给目标。
js 调用window.print()方法打印
热门推荐
一剑轻语
06-21 3万+
目的：打印功能实现，添加水印 步骤： 1.写好jsp页面 2.写打印方法 即window.print()打印当前页面，如果只想打印部分页面的话，可以截取该部分赋值给body即可 3.调用打印方法即可 遇到的问题：水印无法打印 刚开始将水印图片赋值给背景图片，即background-image。但是一直无法打印，网上搜了一些人的方案，都无...
js的window.print()打印背景图片，打印背景图片无法显示
张宇的博客
11-01 9528
js的window，print()打印背景图片 题目描述 js的window，print()打印背景图片给body加了图片地址之后，非要设置浏览器打印选项里面设置背景图形打印才行，怎么通过js去设置默认的就是打印带背景图像的 方法一 ：css //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; ...
js window.print() 打印TD背景色
liangbao568的博客
08-31 1088
JS window.print()打印页面打印元素设置的背景色
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
weixin_36323996的博客
10-23 2070
先上效果图： 打印页面（数据皆为瞎扯）： 打印预览： 打印功能是调用window.print()实现； 二维码生成是使用jquery.qrcode插件实现； 完整页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
js 去掉浏览器打印默认的页头页尾和打印背景图片
yuzenan的博客
05-16 2174
<!DOCTYPE html> <html> <head> <title>print</title> <meta charset="utf-8"> <style media="print"> @page { size: auto; ...
JS中window.print()不支持背景色
aeoliancrazy的博客
04-25 7393
JS中window.print()不支持背景色 除去，在网上其他帖子的说法是：css背景+图片实现 原地址传送门：https://www.cnblogs.com/ranran/p/js_print.html 我遇到的问题是，checkbox要用背景色进行填充选中项， 最开始用background-color，怎么都调不出来 最后直接用 border实现，把border的厚度（宽度）设置的...
java:将html生成图片的所有方法比较
01-11
java:html生成图片,所有生成方法的优缺点。
JavaScript网页特效范例宝典源码
09-04
目录: 第1章 窗口/框架与导航条...实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第...
js使用小技巧
07-11
取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...
Javascript正则匹配文件名和文件后缀
刚刚好
10-23 1万+
//去除字符串前后空格 String.prototype.trim = function() { return this.replace(/(^\s+)|(\s+$)/g, ''); }; //11位手机号格式化 function telFormat(tel, space) { space = space ? space : ' '; return String(tel)...
js数组求和、最大、最小值
刚刚好
06-29 8107
<script> window.onload=function(){ var i; var x=0; var arr = new Array(); for(i=1;i<=10;i++){ arr[i-1]=i; document.write("i的当前循环值是："+arr[i-1]+
Bootstrap
刚刚好
10-13 5417
终于下定决心来学习bootstrap了，2016-10-03。bootstrap安装 先看CDN：<!-- 放在head标签内 --> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><!-- 可选的Bo
webpack傻瓜入门教程
刚刚好
02-13 3880
webpack傻瓜入门教程
js闭包在实际开发中的应用
刚刚好
03-09 3762
js闭包实际开发中应用 闭包简单来说就是函数中的函数，也可以把它理解为一种现象，就是说一个函数要访问另外一个目标函数内部的变量，就要在目标函数中再定义一个函数（以此来把作用域链往下延长一段，目的就是为了利用js在找自由变量时,会沿着作用域链一级一级往上找的特点），并将这个定义的函数return出来，供外部使用。在实际开发中，闭包主要是用来封装变量，收敛权限 。 代码 function ...
html 打印时候body背景图只有一小块
06-01
这个问题可能是因为打印机的边距设置问题，以及浏览器打印时默认启用的页...2. 如果以上方法都不起作用，你可以考虑使用JavaScript来动态生成PDF文件，这样你就可以完全控制打印时的页面样式，包括背景图的铺满方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值