美文网首页
js浏览器打印指定div

js浏览器打印指定div

作者: 零一间 | 来源:发表于2020-07-23 10:08 被阅读0次

1 页面

2 打印效果

image.png

3 代码

<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>&nbsp;</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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>

相关文章

网友评论

      本文标题:js浏览器打印指定div

      本文链接:https://www.haomeiwen.com/subject/ltsclktx.html