js中打印使用

最新推荐文章于 2024-10-07 14:58:14 发布

十年树木_2015

最新推荐文章于 2024-10-07 14:58:14 发布

阅读量593

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 javaScript

本文链接：https://blog.csdn.net/qq_30337695/article/details/51683310

javaScript 同时被 2 个专栏收录

30 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

window.print()这个方法可以调打印 :

下面是写的小例子:

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试打印</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<style>
.thead{
    padding: 8px;
    border:1px solid #ccc;
    width: 100px;
}
.tbody{
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    padding: 8px;
    line-height: 1.42857143; 
}
</style>
<body>
<table id="table">
    <thead>
        <tr>
            <th class="thead">姓名</th>
            <th class="thead">部门</th>
            <th class="thead">日期</th>
            <th class="thead">状态</th>
            <th class="thead">打印</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tbody">吴雨臻</td>
            <td class="tbody">民事第一审判庭</td>
            <td class="tbody">2016-06</td>
            <td class="tbody">用户已提交</td>
            <td class="tbody"><button id="btn">打印</button></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

js代码：

<script type="text/javascript">
$(function(){

    $("#btn").click(function(){
        printTable();
    })

    var printTable = function(){
        var wind = window.open('about:blank', '', ''),
        cont = $("#table").html();
        wind.document.write(
                '<style>@media print{.tbody{word-break: ' + 
                'keep-all;white-space:nowrap;}} @media all{th,td{border:1px solid #000;}' + 
                'table{border-collapse:collapse;width:95%;}}</style><table>'+cont+'</table>'
        );

        wind.print();
    }
});
</script>
</body>
</html>

比较简单，看下就明白了。

疑问的是：js代码写成这样不行：

<td class="tbody"><button id="btn" onclick="printTable()">打印</button></td>
<script type="text/javascript">
$(function(){

    var printTable = function(){
        var wind = window.open('about:blank', '', ''),
        cont = $("#table").html();
        wind.document.write(
                '<style>@media print{.tbody{word-break: ' + 
                'keep-all;white-space:nowrap;}} @media all{th,td{border:1px solid #000;}' + 
                'table{border-collapse:collapse;width:95%;}}</style><table>'+cont+'</table>'
        );

        wind.print();
    }
});
</script>

学习下函数的定义了。知道的朋友解释下吧。

--自己解释下：

var function这种函数是定义了再使用的；是js代码在浏览器中初始化时，必须先定义了再使用；调用这个代码必须在定义之后；

而function xx()这种在浏览器初始化js代码时，定义了并且初始化了，以后就可以拿来用；

上面的代码onclick指向这个function，发现这个函数没有被定义就调用，肯定不行；

--说的好乱，百度吧。