css js 打印背景图

最新推荐文章于 2025-05-08 09:54:28 发布

wx_lidysun

最新推荐文章于 2025-05-08 09:54:28 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript HTML/CSS 文章标签： js打印背景图 css打印背景图打印背景图背景图打印

本文链接：https://blog.youkuaiyun.com/lidysun/article/details/88995209

Javascript 同时被 2 个专栏收录

41 篇文章

订阅专栏

HTML/CSS

17 篇文章

订阅专栏

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

方法一：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>