css js 打印背景图

最新推荐文章于 2023-10-30 17:56:47 发布

淘宝新蔷程序员特训营,快速学会开发项目

最新推荐文章于 2023-10-30 17:56:47 发布

阅读量688

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ycs_0405/article/details/112213831

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

参考：https://blog.csdn.net/lidysun/article/details/88995208

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

方法1：css

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

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