一、指定內(nèi)容打印

要調(diào)用瀏覽器中的打印功能，并指定需要打印的內(nèi)容為特定的DIV內(nèi)的內(nèi)容，你可以使用JavaScript來(lái)實(shí)現(xiàn)。下面是一種實(shí)現(xiàn)方法：

1. 首先，在需要打印的DIV標(biāo)簽上添加一個(gè)唯一的ID屬性，例如：

<div id="print-content">
  <!-- 這里是需要打印的內(nèi)容 -->
</div>

2. 接下來(lái)，在JavaScript中使用window.print()方法來(lái)調(diào)用瀏覽器的打印功能，并指定打印的內(nèi)容為指定的DIV。

<script>
  function printDiv() {
    var printContents = document.getElementById("print-content").innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
  }
</script>

3. 然后，在頁(yè)面中添加一個(gè)觸發(fā)打印的按鈕，并綁定上面定義的printDiv()函數(shù)。

<button onclick="printDiv()">打印</button>

現(xiàn)在，當(dāng)用戶點(diǎn)擊"打印"按鈕時(shí)，瀏覽器將會(huì)打印出指定的DIV內(nèi)的內(nèi)容。請(qǐng)注意，由于涉及到瀏覽器的打印功能，以上方法可能在不同的瀏覽器中略有差異。

二、背景圖片打印

1.CSS背景圖片設(shè)置

將圖片設(shè)置在CSS設(shè)置為背景圖片時(shí)，會(huì)被打印默認(rèn)選項(xiàng)“背景圖形”的影響，增加了用戶端的復(fù)雜度。

#print-content {
            width: 700px;
            line-height: 30px;
            background: url('images/main.jpg') no-repeat top left;
        }

2.div相對(duì)定位居中

即：將背景圖片，單獨(dú)建立DIV作為底層顯示，文字層設(shè)置z-index的優(yōu)先級(jí)別。
div相對(duì)定位居中：要將一個(gè) <div> 元素相對(duì)定位并水平居中，你可以使用以下 CSS 樣式：

<style>
  .centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

在上面的示例中，我們給目標(biāo) <div> 添加了一個(gè)名為 .centered 的類，并設(shè)置了相對(duì)定位以及水平居中的樣式。position: relative; 聲明了相對(duì)定位，left: 50%; 通過(guò)將元素的左邊距設(shè)置為父元素寬度的一半，將其移到了水平中間位置。transform: translateX(-50%); 這一行樣式通過(guò)應(yīng)用 translateX 變換，將元素在水平方向上向左平移了自身寬度的一半，實(shí)現(xiàn)了水平居中。

接下來(lái)，你可以將該類應(yīng)用到需要水平居中的 <div> 元素上，例如：

<div class="centered">
  <!-- 這里是需要水平居中的內(nèi)容 -->
</div>

水平居中是相對(duì)父元素進(jìn)行的，所以父元素應(yīng)該具有明確的寬度。如果父元素的寬度是根據(jù)內(nèi)容自適應(yīng)的，請(qǐng)確保父元素可以容納居中的子元素。

三、完整案例展示

1.CSS樣式表

body {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        #print-box {
            position: relative;
            width: 1000px;
            left: 50%;
            transform: translateX(-50%);
        }

        .print-bg {
            position: absolute;
            z-index: 99;
        }

        .print-content {
            position: absolute;
            width: 100%;
            line-height: 32px;
            top: 500px;
            z-index: 9999;
            text-align: center;
        }

        .print-content > p {
            width: 90%;
            margin: 40px auto;
            text-align: center;
        }

        .com_name {
            font-size: 38px;
            color: #865800;
            font-weight: bold;
        }

        #non-print {
            position: fixed;
            border-radius: 10px 10px 0 0;
            margin-top: 80px;
            width: 100%;
            height: 80px;
            bottom: 0px;
            line-height: 30px;
            background-color: #0066cc;
            color: #f1f1f1;
            text-align: center;
            z-index: 9999;
        }

        #btn {
            position: fixed;
            width: 80px;
            height: 30px;
            right: 0;
            top: 50px;
            background-color: #0066cc;
            border-radius: 30px 0 0 30px;
            color: #f1f1f1;
            cursor: pointer;
            border: none;
        }

2.HTML容器構(gòu)建

<div id="print-box">
    <div class="print-bg"><img src="images/main.jpg" alt="" width="1005"></div>
    <div class="print-content">
        <p style="margin-top: 100px;"><span class="com_name">漏刻有時(shí)</span></p>
        <p style="font-size: 28px;">開(kāi)展 <img src="images/adi.png" alt="" height="30"> 抖音直播銷售服務(wù)，本公司保證所售產(chǎn)品均為品牌正品。</p>
        <p style="font-size: 28px;"><label style="font-weight: bold;">授權(quán)期限：</label>2023年8月8日至2024年8月7日</p>
        <p style="text-align: right;padding-right: 50px;margin-top: 280px;font-size: 20px;">寧波漏刻文化科技有限公司</p>
        <p style="text-align: right;padding-right: 50px;font-size: 20px;">2023年8月8日</p>
    </div>
</div>
<div id="non-print">非打印區(qū)域</div>
<button id="btn" onclick="printDiv()">打印</button>

@漏刻有時(shí)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-639732.html

到了這里，關(guān)于在瀏覽器中使用javascript打印HTML中指定Div帶背景圖片內(nèi)容生成PDF電子證書查詢的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！