小墨の博客

梦想需要付诸行动,否则只能是梦

js浏览器打印指定div

关键代码

<script>
    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>

完整代码如下:

<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>

来自:https://open-hl.toutiao.com/a6852847790209532419/?label=vivo_llq_channel&utm_source=vivoliulanqi

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:512
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:235404

    | | |
    | |  Z-Blog PHP