css js 打印背景图

如果不对浏览器设置,直接打印时是无法打印背景图的。
css 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;
    } 
}
  • 方法二 :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)
}

全部代码如下:


<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>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <p>dsfsdfsdfp>
        <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>

备份以备用!

你可能感兴趣的:(Javascript,HTML/CSS)