html中的打印預覽頁面

本文轉載自查看原文 2019-09-24 10:16 373


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>總分環比統計查詢</title>
</head>

<body>
<div class="g0_container">
    <div class="g0_ydpm_c" id="printdiv">
        <p><span><%=lastMonth%></span>至<span><%=now%></span>總分環比統計情況</p>
        <table class="g0_table" >
            <thead>
                <tr>
                    <th>序號</th>
                    <th>單位名稱</th>
                    <th>1月</th>
                    <th>環比</th>
                    <th>2月</th>
                    <th>環比</th>
                    <th>3月</th>
                    <th>環比</th>
                    <th>4月</th>
                    <th>環比</th>
                    <th>5月</th>
                    <th>環比</th>
                    <th>6月</th>
                    <th>環比</th>
                    <th>7月</th>
                    <th>環比</th>
                    <th>8月</th>
                    <th>環比</th>
                    <th>9月</th>
                    <th>環比</th>
                    <th>10月</th>
                    <th>環比</th>
                    <th>11月</th>
                    <th>環比</th>
                    <th>12月</th>
                    <th>環比</th>
                </tr>
            </thead>
            <tbody id="resTable">
                <tr>
                    <td>1</td>
                    <td>你發的分公司電飯鍋</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
        <div class="g0_btn_c" style="display: none">
            <a href="###" class="g0_btn g0_mr_24" onclick="windowprint()">打印</a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>/common/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/layer3.1/layer.js"></script>
<script type="text/javascript">

// 打印

function windowprint() {
 $(".g0_btn_c").hide();
 var headhtml = "<html><head><title></title></head><body>";
 var foothtml = "</body>";
 // 獲取div中的html內容
 $(".rank-1").html("1");
 $(".rank-2").html("2");
 $(".rank-3").html("3");
 var newhtml= $("#printdiv").html();
 // 獲取div中的html內容，jquery寫法如下
 // var newhtml= $("#" + printpage).html();

 // 獲取原來的窗口界面body的html內容，並保存起來
 var oldhtml = document.body.innerHTML;

 // 給窗口界面重新賦值，賦自己拼接起來的html內容
 document.body.innerHTML = headhtml + newhtml + foothtml;

 // 調用window.print方法打印新窗口
 window.print();

 // 將原來窗口body的html值回填展示
 document.body.innerHTML = oldhtml;
 $(".rank-1").html("");
 $(".rank-2").html("");
 $(".rank-3").html("");
 $(".g0_btn_c").show();
 return false;
}

</script>
<script type="text/javascript" src="<%=basePath%>/common/js/jquery-1.9.1.min.js"></script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html實現打印預覽效果 JS頁面打印預覽功能 html頁面局部打印 JS打印html頁面打印html頁面 VSCode 實時預覽 HTML 頁面 JS頁面打印，預覽，設置，分頁 javascript實現jsp頁面的打印預覽 Javascript 將 console.log 日志打印到 html 頁面中 js控制打印html頁面