window.open结合doucment打印带表格页面

本文介绍了一个需求,即如何在不导出Excel或Word的情况下,通过JavaScript的window.open函数结合document来实现表格内容的打印。提供的代码示例展示了如何在点击打印按钮时,更改表单的target和action属性,使页面在新窗口打开并提交,从而完成打印申请单的操作。同时,代码还确保在打印完成后恢复表单的原始属性。

需求如下:

将以下表格中的内容填写好,然后点击打印申请单,

注意:不是导出Excel或者word.

 

js代码:

//打印按钮
  function printB() {
  var newTarget ="newWin";


    var newUrl = "<%=request.getContextPath()%>/blankInvoiceApplyMainAction.do?method=print";
    var targetForm = $("#baseForm");

        //在新页面打开打印页面后,要恢复到原来form的请求路径
    var curUrl = targetForm.attr("action");    //当前action属性值,
    var curTarget =  targetForm.attr("target");    //当前target属性值

    //指定表单的target和action
    document.baseForm.target = newTarget;                 
    document.baseForm.action = newUrl;

                //让请求返回的页面在newTarget的Window中打开
    window.open('',newTarget);     //打开一个新页面(即打印页面)

在JavaScript和HTML中创建一个全局的模态框,你可以通过以下步骤实现: 1. **HTML结构**: 首先,在HTML中定义一个模态框的基本结构,通常包括一个遮罩层和内容区域。例如: ```html <div id="modal-root"> <div class="modal-mask" id="modal-mask"></div> <div class="modal-container" id="modal-container"> <div class="modal-content" id="modal-content"> <button class="close-btn">关闭</button> <!-- 模态框内容将动态添加 --> </div> </div> </div> ``` 2. **CSS样式**: 定义一些基本样式,比如透明度、定位等,确保遮罩层在页面上全屏显示并能遮盖其他内容。 3. **JavaScript函数**: - **开启模态**: 创建一个函数,如 `openModal`,用于显示模态框,可以获取焦点元素(如果有的话),并将模态内容插入到`modal-content`元素中,并改变相应的CSS状态。 ```javascript function openModal(content) { document.getElementById('modal-mask').classList.add('active'); document.getElementById('modal-content').innerHTML = content; document.getElementById('modal-container').style.display = 'block'; } // 示例:打开包含文本的模态 openModal('<p>这是一个全局模态框的内容。</p>'); ``` - **关闭模态**: 另外一个函数 `closeModal` 负责移除遮罩层的`active`类和隐藏`modal-container`。 ```javascript function closeModal() { document.getElementById('modal-mask').classList.remove('active'); document.getElementById('modal-container').style.display = 'none'; } // 示例:监听关闭按钮点击 document.querySelector('.close-btn').addEventListener('click', closeModal); ``` 4. **触发和传递内容**: 为了在需要的地方打开这个模态,你可以在JavaScript中编写适当的触发逻辑,传递所需的内容作为参数给`openModal`函数。 **注意事项**: - 这种方法可能会导致浏览器性能问题,因为它会改变DOM布局。尽量减少不必要的模态展示,并在完成后及时关闭。 - 如果你想要更好地管理全局状态,考虑使用模块化工具(如ESM或CommonJS)来组织代码。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值