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

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

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

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

2. 接下來，在JavaScript中使用window.print()方法來調(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. 然后，在頁面中添加一個(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%; 通過將元素的左邊距設(shè)置為父元素寬度的一半，將其移到了水平中間位置。transform: translateX(-50%); 這一行樣式通過應(yīng)用 translateX 變換，將元素在水平方向上向左平移了自身寬度的一半，實(shí)現(xiàn)了水平居中。

接下來，你可以將該類應(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;">開展 <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í)