您当前的位置:首页 > 电脑百科 > 软件技术 > 软件技术

js浏览器打印指定div

时间:2020-07-24 11:51:00  来源:  作者:
js浏览器打印指定div

 

1 页面

js浏览器打印指定div

 

2 打印

js浏览器打印指定div

 

3 关键代码

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

完整代码如下:

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


Tags:js浏览器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1 页面 2 打印 3 关键代码<script language="javascript"> function printdiv(printpage) { var headstr = &#39;<html><head><title>销售发货单</title></head>...【详细内容】
2020-07-24  Tags: js浏览器  点击:(85)  评论:(0)  加入收藏
PySpider 是一个非常方便并且功能强大的爬虫框架,支持多线程爬取、JS动态解析,提供了可操作界面、出错重试、定时爬取等等的功能,使用非常人性化。能够在需要编写大量爬虫的情...【详细内容】
2019-08-26  Tags: js浏览器  点击:(352)  评论:(0)  加入收藏
▌简易百科推荐
今天教大家通过windows的CMD终端查看WIFI密码 使用管理权限打开CMD 查看本机连接过WIFI名称netsh wlan show profiles 查询某一个WIFI的密码比如这里我想查询猪猪侠的...【详细内容】
2021-12-27  吉祥同学学安全    Tags:wifi密码   点击:(1)  评论:(0)  加入收藏
从本质上来讲,PE系统最广泛的用途只是用来安装系统。通过其内置的Ghost软件来调用第三方的GHO系统镜像来完成系统的安装。从表面来看,最终的系统是否纯净、是否安全,与Gho镜像...【详细内容】
2021-12-27  u盘装系统    Tags:pe工具   点击:(2)  评论:(0)  加入收藏
Safari是苹果在iPhone和iPad上的默认网络浏览器。虽然我们天天都在使用,但是,你是否深入研究了Safari的所有功能和设置?"无痕浏览"、"阅读器"视图和下载文件等标准选项只是其...【详细内容】
2021-12-16  趣玩公社    Tags:Safari   点击:(20)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  GitHub精选    Tags:插件   点击:(22)  评论:(0)  加入收藏
给电脑安装软件,最让人担心的就是安装到“拖家带口”的,而这样的手法正是国产软件惯用的!全家桶自动安装、软文弹窗等等,这些让我们讨厌的却是软件的直接收入来源。 那么在你安...【详细内容】
2021-12-15  老毛桃winpe    Tags:软件   点击:(18)  评论:(0)  加入收藏
不知道你是否遇到过这么一种情况:在一个A4大小的图框画一个接近满框的图形,在打印的时候却发现图形很小根本不符合模型空间的实际情况。看似明显是比例问题,但又不知道究竟是什...【详细内容】
2021-12-14  设计师小仁君    Tags:CAD   点击:(20)  评论:(0)  加入收藏
哈喽大家好! 前几天一个朋友向我疯狂吐槽。 快到年底了,公司要统计年度数据。 需要把一月到十二月份,十二张表格的数据,全部汇总到一个表格内。 这样的数据汇报每年都会有,每到年...【详细内容】
2021-12-14  秋叶Excel    Tags:Excel   点击:(23)  评论:(0)  加入收藏
我发现最近不少小叶子的留言都和 Excel 相关,我寻思是时候出一期解决 Excel 疑难杂症的小合集了。于是毛毛在众多问题中,挑了三个被问次数最多的有关 Excel 的问题,今天就来给...【详细内容】
2021-12-14  叶PPT    Tags:Excel   点击:(27)  评论:(0)  加入收藏
大家好,我是Stark-C。油猴简介【油猴】一款免费的浏览器扩展和最为流行的用户脚本管理器,它是一个附加组件(扩展程序),让用户安装一些脚本使大部分HTML为主的网页改变得更方便易...【详细内容】
2021-12-13  什么值得买    Tags:油猴   点击:(43)  评论:(0)  加入收藏
年末,又到了各大厂商盘点年度最佳的时候了。不过让世超感到意外的是 Google 竟然给自己 Chrome 的插件,做了一个 2021 年精选集锦,挑选出了 13 款今年最热门的 Chrome 插件。...【详细内容】
2021-12-13  科技知迅    Tags:Chrome   点击:(19)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条