js 调用打印

整理知识点发现的 忘记当初从哪里摘的了 如有侵权 请联系我删除 谢谢谢谢~

 //打印
    function printTable() {
        var cssString = ".table{table-layout: fixed;border-collapse: collapse;width:100%;margin-top:34px;border:1px solid #E8E4E4;}.table tr{height:74px;border-bottom:1px solid #E8E4E4;}.table tr th{text-align: left;    font-size:15px;padding:0 4px;}.table .first-tr{background:#f5f5f5;border:none;}.table .first-tr td{vertical-align: middle;padding-top:0;}.table tr td{font-size:14px;padding:0 4px;vertical-align: top;padding-top:16px;}.table tr td a{display: inline-block;margin-right:4px;color:#000000;}.table tr td a:hover{color:#FF9E10;}.table .tr-padding-item{padding-left:20px;}.ui-paging-container ul, .ui-paging-container li{text-align: right;}";
        var tableToPrint = document.getElementById('table'); //将要被打印的表格
        var newWin = window.open(""); //新打开一个空窗口
        newWin.document.write(tableToPrint.outerHTML); //将表格添加进新的窗口
        var c = newWin.document.getElementsByClassName("detail"); //获取新窗口需要隐藏的td
        for (var i = 0; i < c.length; i++) {
            c[i].style.display = "none"; //隐藏td
        }
        var style = newWin.document.createElement("style"); //创建style标签
        style.setAttribute("type", "text/css");

        if (style.styleSheet) { // IE      //向style标签里添加样式内容
            style.styleSheet.cssText = cssString;
        } else { // w3c
            var cssText = newWin.document.createTextNode(cssString);
            style.appendChild(cssText);
        }

        var heads = newWin.document.getElementsByTagName("head"); //把style标签添加到head里
        if (heads.length) {
            heads[0].appendChild(style);
        } else {
            newWin.document.documentElement.appendChild(style);
        }

        newWin.document.close(); //在IE浏览器中使用必须添加这一句
        newWin.focus(); //在IE浏览器中使用必须添加这一句

        newWin.print(); //打印
        newWin.close(); //关闭窗口
    } //打印函数结束

<think> 由于在浏览器环境中,JavaScript通常通过调用浏览器的打印功能来实现打印,而不是直接调用打印驱动。但我们可以使用`window.print()`方法触发浏览器的打印对话框。然而,如果需要更底层的控制(如指定打印机、设置打印参数等),则可能需要使用浏览器插件、ActiveX控件(仅IE)或Web API(如WebUSB、Web Bluetooth)与打印机直接通信,但这通常受限于浏览器安全策略。 不过,这里提供一个使用浏览器默认打印功能的简单示例,并说明如何通过CSS控制打印样式: ```html <!DOCTYPE html> <html> <head> <title>打印示例</title> <style> @media print { /* 打印时隐藏不需要的元素 */ .no-print { display: none; } /* 设置打印页面的样式 */ body { font-size: 12pt; } } </style> </head> <body> <h1>打印测试文档</h1> <p>这是一段用于测试打印功能的文本。</p> <button onclick="window.print()" class="no-print">打印</button> <script> // 如果需要更复杂的控制,例如指定打印机(在支持的情况下) // 可以使用浏览器的打印API(需要用户交互) function advancedPrint() { if (window.print) { // 直接调用打印对话框 window.print(); } else { alert('您的浏览器不支持打印功能'); } } </script> </body> </html> ``` ### 进阶方法:使用Web API与打印机通信 对于需要直接控制打印机的场景(如POS打印机): 1. **WebUSB API**:允许网页与USB设备通信(需要用户授权) 2. **网络打印机**:通过发送原始数据到打印机的网络地址(需跨域支持) 3. **浏览器插件/扩展**:如Chrome的Native Messaging ### 注意事项: 1. `window.print()` 会触发浏览器的打印对话框,用户可以选择打印机和设置。 2. 使用CSS的`@media print`可以调整打印布局。 3. 直接控制打印机需要用户明确授权,且操作复杂。 §§相关问题§§ 1. 如何在打印时隐藏页面上的某些元素(比如按钮)? 2. 如何通过JavaScript设置打印的页面方向(横向或纵向)? 3. 如何使用WebUSB API连接并控制USB打印机? 4.打印多页内容时,如何避免内容被分页截断? </think> 在 JavaScript 中调用打印机进行打印,主要通过浏览器提供的 `window.print()` API 实现。以下是完整实现方案: ```html <!DOCTYPE html> <html> <head> <title>JavaScript 打印示例</title> <style> @media print { /* 打印时隐藏不需要的元素 */ .no-print { display: none; } /* 确保打印内容占满页面 */ body { margin: 0; padding: 1cm; } /* 避免内容被分页截断 */ .page-break { page-break-inside: avoid; } } </style> </head> <body> <div class="print-content"> <h1>销售订单</h1> <p>订单编号: <span id="orderId">ORD-2023-001</span></p> <p>日期: <span id="printDate"></span></p> <table border="1" style="width:100%"> <tr> <th>产品名称</th> <th>数量</th> <th>单价</th> <th>总价</th> </tr> <tr> <td>笔记本电脑</td> <td>2</td> <td>¥5,999</td> <td>¥11,998</td> </tr> <!-- 更多行 --> </table> <div class="page-break"> <p>总计: <strong>¥11,998</strong></p> <p>客户签名: _________________________</p> </div> </div> <button class="no-print" onclick="printDocument()">打印文档</button> <button class="no-print" onclick="printSpecificElement()">打印表格</button> <script> // 自动设置打印日期 document.getElementById('printDate').textContent = new Date().toLocaleDateString(); // 基本打印方法 function printDocument() { window.print(); } // 打印特定元素 function printSpecificElement() { const printContent = document.querySelector('table').outerHTML; const originalContent = document.body.innerHTML; // 替换页面内容 document.body.innerHTML = printContent; window.print(); // 恢复原始内容 document.body.innerHTML = originalContent; } // 添加打印事件监听 window.addEventListener('beforeprint', () => { console.log('打印前准备...'); }); window.addEventListener('afterprint', () => { console.log('打印已完成'); }); </script> </body> </html> ``` ### 关键功能说明: 1. **基础打印** ```javascript window.print(); // 调用浏览器打印对话框 ``` 2. **CSS 打印控制** ```css @media print { .no-print { display: none; } /* 隐藏非打印元素 */ .page-break { page-break-before: always; } /* 强制分页 */ } ``` 3. **特定内容打印** ```javascript const printContent = element.innerHTML; const originalContent = document.body.innerHTML; document.body.innerHTML = printContent; window.print(); document.body.innerHTML = originalContent; ``` 4. **打印事件监听** ```javascript window.addEventListener('beforeprint', prepareForPrint); window.addEventListener('afterprint', afterPrintActions); ``` ### 高级解决方案: 1. **使用打印库** ```javascript // 使用 Print.js 库(需要引入CDN) printJS({ printable: 'contentDiv', type: 'html', style: '.invoice { font-size: 12pt; }' }); ``` 2. **直接发送到打印机(需要浏览器支持)** ```javascript // 仅适用于支持WebUSB的浏览器 navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] }) .then(device => { // 发送打印指令 const printCommand = new TextEncoder().encode('打印内容'); return device.transferOut(2, printCommand); }); ``` ### 注意事项: 1. 浏览器安全限制阻止直接静默打印 2. 不同浏览器的打印预览界面有差异 3. 复杂布局推荐使用PDF打印(`printJS`支持PDF) 4. 移动端打印支持有限
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值