24

js浏览器打印指定div

 4 years ago
source link: https://www.jianshu.com/p/61b5c9cec3d3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

2 打印效果

image.png
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>

<script language="javascript">
    function printdiv(printpage) {
        var headstr = '<html><head><title>销售发货单</title></head><body>';
        var footstr = "</body>";
        var newstr = document.getElementById(printpage).innerHTML;
        var oldstr = document.body.innerHTML;
        document.body.innerHTML = headstr + newstr + footstr;

        console.log(headstr + newstr + footstr)
        window.print();
        document.body.innerHTML = oldstr;
        return false;
    }
</script>
<h1>div前</h1>
<div id="div_print">
    <div style="line-height: 30px; color:#000;" class=size16 align=center>
        <strong>销售发货单-01</strong></div>
    <table border=0 cellspacing=0 cellpadding=0 width="100%">
        <tbody>
        <tr>
            <td width="43%">所在店铺：<span>XYZ-专卖店</span></td>
            <td width="33%">发货单号：<span>2020050810372</span></td>
            <td>快递单号：</td>
        </tr>
        <tr>
            <td>收 件 人：<span>小明</span></td>
            <td>网店单号：<span>74235823905643</span</td>
            <td>发货日期：2020-5-10</td>
        </tr>
        <tr>
            <td>电话号码：<span>13935429860　</span></td>
            <td>收件人id：<span>小李飞刀</span></td>
            <td> </td>
        </tr>
        </tbody>
    </table>
    <table border=1 cellspacing=0 cellpadding=1 width="100%" style="border-collapse:collapse" bordercolor="#333333">
        <thead>
        <tr>
            <td width="10%">
                <div align=center><b>表格页眉</b></div>
            </td>
            <td width="25%">
                <div align=center><b>品名</b></div>
            </td>
            <td width="10%">
                <div align=center><b>颜色</b></div>
            </td>
            <td width="10%">
                <div align=center><b>规格</b></div>
            </td>
            <td width="10%">
                <div align=center><b>数量</b></div>
            </td>
            <td width="15%">
                <div align=center><b>单价</b></div>
            </td>
            <td width="20%">
                <div align=center><b>金额</b></div>
            </td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td> 1</td>
            <td>名称01</td>
            <td>浅灰色</td>
            <td>185/10</td>
            <td>1</td>
            <td>248.00</td>
            <td>248.00</td>
        </tr>
        <tr>
            <td> 2</td>
            <td>名称02</td>
            <td>浅灰色</td>
            <td>185/10</td>
            <td>1</td>
            <td>248.00</td>
            <td>248.00</td>
        </tr>
        <tr>
            <td> 3</td>
            <td>名称03</td>
            <td>浅灰色</td>
            <td>185/10</td>
            <td>1</td>
            <td>248.00</td>
            <td>248.00</td>
        </tr>
        <tr>
            <td> 4</td>
            <td>名称04</td>
            <td>浅灰色</td>
            <td>185/10</td>
            <td>1</td>
            <td>248.00</td>
            <td>248.00</td>
        </tr>
    </table>
    <input name="btn_print" type="button" onclick="printdiv('div_print');" value="打印" align=center>
</div>
<h1>div后</h1>
</body>
</html>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK