web中的打印 table打印等功能区域打印

最新推荐文章于 2024-12-30 15:27:42 发布

我的___爱

最新推荐文章于 2024-12-30 15:27:42 发布

阅读量1.5k

点赞数

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/jiazhongkai521/article/details/9221443

版权

自己的同时被 2 个专栏收录

12 篇文章

订阅专栏

jquery

8 篇文章

订阅专栏

以前总是看到页面上有打印，不过一直没有接触到，现在在做oa，然后上网找了一下打印的js命令，其实很简单就是window.print（），关键是如何来使用，看了一篇文章说是用iframe然后就没有声了，只是提了一下，就没有下音了，后来自己琢磨了一下，发现window.print（）方法是来打印整个页面的，如果把需要打印的地方做成一个iframe页面不就可以了，所以这是一种方法；还有一种方法就是打开一个新的页面，然后把需要打印的内容，用document.write给输出到那个新打开的页面，并执行打印，第一种方法比较简单，就不多说了，就是把需要打印的内容做成一个iframe，然后在head部分加上<script type="text/javascript">window.print()</script>即可。

下面来说一下第二种方法即打印页面上特定区域，如单独的table或者单独的div等。

来看一下，代码如下：

<html>
<head>

    <script type="text/javascript">
        function printPage()
        {
            var newWin = window.open('about:blank');
            var titleHTML = document.getElementById("doctitle").innerHTML;
            newWin.document.write("<span style='color:red;'>" + titleHTML + "</span>");
            newWin.document.location.reload();
            newWin.print();
        } 
    </script>

</head>
<body>
    <div id="doctitle">
        <table border="1px">
            <tr bgcolor="red;">
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
            </tr>
        </table>
    </div>
    <a href="javascript:void(0)" οnclick="printPage() ">打印 </a>
</body>
</html>

上面的代码说明的是当点击超链接的打印的时候调用printpage方法，然后那个printpage方法，首先是打开一个新的页面，然后把获取的div中的innerhtml输出到那个新的页面中，并且在新的页面执行打印。记住了千万别忘了在需要打印的东西的外面加上一个div，这样次才能保证里面的格式不变，如果上面的代码中我们把table的id设置成doctitle，那么打印出来的就会变成<tbody></tbody>然后table的样式也不会存在了。（因为我们打印的是innerHTML而不是简单的里面的文字，我们需要的还有里面的格式。）