插件使用:print.js演示

仙古.梦回～

已于 2024-05-27 20:45:18 修改

阅读量222

点赞数 3

文章标签： javascript css css3

于 2024-05-27 20:44:14 首次发布

本文链接：https://blog.csdn.net/qq_55139096/article/details/139247382

版权

基本演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件打印</title>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <style href="https://printjs-4de6.kxcdn.com/print.min.css"></style>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #app{
            margin: 20px auto 0;
            width:600px;
            height:1200px;
            background:#f7f7f7;
        }
        table{
            text-align: center;
        }
        table tr{
            width:100%;
            height:40px;
            line-height: 40px;
        }
 
    </style>
</head>
<body>
    <button>点击打印</button>
    <div id="app" >
        <table width="600" height="1200" cellspacing="0" border="1px" align="center"
        bordercolor="#666"  >
            <thead height="60">
                 <tr align="center">
                    <th>姓名</th><th>联系方式</th><th>性别</th>
                 </tr>
            </thead>
            <tbody>
                 <tr align="center">
                    <td>张三</td>
                    <td>110</td>
                    <td>男</td>
                 </tr>
                 <tr align="center">
                    <td>李四</td>
                    <td>110</td>
                    <td>男</td>
                 </tr>
                 <tr align="center">
                    <td>王五</td>
                    <td>110</td>
                    <td>男</td>
                 </tr>
                 <tr align="center">
                    <td>赵六</td>
                    <td>110</td>
                    <td>女</td>
                 </tr>
            </tbody>
        </table>
    </div>
    <script>
        const app = document.querySelector('#app');
        const btn = document.querySelector('button');
 
        btn.onclick = function(){
            printJS({
                printable:'app',
                type:'html',
                documentTitle:'公司文档',
                header:`<header style="color:red;height:60px;text-align:center;">仙古梦回</header>`,
            })
        }
    </script>
</body>
</html>