浏览器原生打印print

- 日理万妓 2023-10-09 12:36 73阅读 0赞

#### 需求是查看的时候要对照显示内勤和客户填写信息，点击打印的时候只打印内勤的。打印页面关闭之后，还是显示对照信息。 ####

直接上代码:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css"> body { background-color: #FFF; } table { margin: auto; margin-top: 20px; margin-bottom: 100px; border-collapse: collapse; } /*打印时的样式,display:none的时候打印不显示*/ @media print { .no-print { display: none; } } table.tableizer-table { font-size: 12px; width: 880px; font-family: Arial, Helvetica, sans-serif; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #CCC; } .tableizer-table th { padding: 10px; margin: 3px; border: 1px solid #CCC; } .juzhong { text-align: center; font-weight: bold; } </style>
    <p><button id="click_print" class="no-print">打印</button></p>
    <table class="tableizer-table">
        <thead>
            <tr>
                <th colspan="4" style="font-size:18px">专利技术需求确认书</h2>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>客户：</td>
                <td> xxxx</td>
                <td>合同编号：</td>
                <td>与本硬件产品相同的所有订单</td>
            </tr>
            <tr>
                <td>订单数量：</td>
                <td>以实际合同对应的订单信息为准</td>
                <td>客户料号：</td>
                <td>以实际合同对应的订单信息为准</td>
            </tr>
            <tr>
                <td>客户单号：</td>
                <td>以实际合同对应的订单信息为准</td>
                <td>客户机型：</td>
                <td>以实际合同对应的订单信息为准</td>
            </tr>
            <tr>
                <td>客户品牌：</td>
                <td>以实际合同对应的订单信息为准</td>
                <td>客户批号：</td>
                <td>以实际合同对应的订单信息为准</td>
            </tr>
            <tr>
                <td>默认国家：</td>
                <td>以实际合同对应的订单信息为准</td>
                <td>产品代码：</td>
                <td>002.002.0048412</td>
            </tr>
            <tr>
                <td>产品名称：</td>
                <td>T.MS6308.U701B<1275691.0022.0113>
                </td>
                <td>主芯片：</td>
                <td>MSD6308RTEM-SW,MST6M50DV</td>
            </tr>
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td class="juzhong">来源</td>
                <td class="juzhong change_colspan">内勤</td>
                <td colspan="2" class="juzhong no-print">客户</td>
            </tr>
            <tr>
                <td>专利技术授权客户：</td>
                <td class="change_colspan">取xxxx订单: 专利授权客户</td>
                <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
            </tr>
            <tr>
                <td>专利技术缴费方：</td>
                <td class="change_colspan">取xxxx订单: 专利收费项</td>
                <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
            </tr>
            <tr>
                <td>专利授权技术选项：</td>
                <td class="change_colspan">取xxxx订单: 专利授权技术选项DD/aaa-HD/MSS</td>
                <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
            </tr>
            <tr>
                <td>专利授权技术备注：</td>
                <td class="change_colspan">取xxxx订单: 专利授权客户</td>
                <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
            </tr>
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td colspan="4">[风险提示:]若终端设备需要使用Dolby Digital,Dolby Digital Plus,Dolby MS11,Dolby MS12,Dolby Atmos,Dolby Vision,aaa Sound,aaa TruSurround,aaa-HD,dbx－tv,AAC,DRA,H.264,H.265,MPEG,HDMI,RMVB等任何需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。</td>
            </tr>
            <tr>
                <td colspan="4">Special Instructions（特殊说明）</td>
            </tr>
            <tr>
                <td colspan="4">Supply of this Implementation of Dolby technology does not convey a license nor imply a right under any patent，or any other industrial or intellectual property right of Dolby Laboratories, to use this Implementation in any finished end-user or ready-to-use final product. It is hereby notified that a license for such use is required from Dolby Laboratories.</td>
            </tr>
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td colspan="4">特别说明：</td>
            </tr>
            <tr>
                <td colspan="4">"基于本确认书中所展现的板卡型号及对应的主芯片，客户仅有一种类型的专利技术需求，如后续客户的订单硬件需求不变，均默认采用本确认书中的专利技术，如有变动，客户需主动告知xxx。"专利技术"选项的内容仅体现了客户对于杜比、aaa、xxx、dbx-tv、MSS技术的需求，其他类型的专利技术需求以实际软件支持的功能为准。无论是否体现在本确认书中，客户了解任何涉及需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。"</td>
            </tr>
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td colspan="4">特别说明：</td>
            </tr>
            <tr>
                <td colspan="4">"专利技术"选项的内容仅体现了客户对于杜比、aaa、xxx、dbx-tv、MSS技术的需求，其他类型的专利技术需求以实际软件支持的功能为准。无论是否体现在本确认书中，客户了解任何涉及需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。</td>
            </tr>
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td>确认人：</td>
                <td colspan="4">XXXX</td>
            </tr>
            <tr>
                <td>客户名称：</td>
                <td colspan="4">XXXXX</td>
            </tr>
            <tr>
                <td>确认日期：</td>
                <td colspan="4">XXXXX</td>
            </tr>
        </tbody>
    </table>
    <script> // 点击打印 marked by yangshuiping <2019-09-25 16:01:40> $('#click_print').click(function() { window.print(); }); // 打印事件监听 marked by yangshuiping <2019-09-25 15:31:12> window.addEventListener('beforeprint', () => { $('.change_colspan').attr('colspan', 3); }); window.addEventListener('afterprint', () => { $('.change_colspan').removeAttr('colspan'); }); </script>

### 不打印的时候: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ_size_16_color_FFFFFF_t_70]

### 点击打印的时候: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ_size_16_color_FFFFFF_t_70 1]

这个页面的打印图标是怎么实现的？  
[https://answers.laserfiche.com/questions/118443/Suppress-the-rendering-of-a-given-HTML-element-on-the-PDF-that-results-when-a-form-is-submitted][https_answers.laserfiche.com_questions_118443_Suppress-the-rendering-of-a-given-HTML-element-on-the-PDF-that-results-when-a-form-is-submitted]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191102102251958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191102102319940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZXpoZWJpZQ==,size_16,color_FFFFFF,t_70
[https_answers.laserfiche.com_questions_118443_Suppress-the-rendering-of-a-given-HTML-element-on-the-PDF-that-results-when-a-form-is-submitted]: https://answers.laserfiche.com/questions/118443/Suppress-the-rendering-of-a-given-HTML-element-on-the-PDF-that-results-when-a-form-is-submitted

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML打印print

代码： //打印 function printme() { global_Html = documen...

阳光穿透心脏的1/2处/ 2024年04月20日 10:50/ 0 赞/ 60 阅读

相关 SQLAlchemy打印原生SQL

构建查询器 query = session.query(OperatingInstructionLog).filter(OperatingIn

超、凢脫俗/ 2024年03月27日 15:40/ 0 赞/ 94 阅读

相关浏览器原生打印print

需求是查看的时候要对照显示内勤和客户填写信息，点击打印的时候只打印内勤的。打印页面关闭之后，还是显示对照信息。直接上代码: <script src="http

- 日理万妓/ 2023年10月09日 12:36/ 0 赞/ 74 阅读

相关 Scala print语句格式打印

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIz

男娘i/ 2023年10月07日 10:54/ 0 赞/ 51 阅读

相关 window.print打印pdf

1、前言前端打印pdf就是使用原生的window.print()方法实现，这里有几个问题你会遇到。打印纸张大小，不同纸张大小，你需要相应调整表格`宽度`和

ゝ一世哀愁。/ 2023年03月12日 07:08/ 0 赞/ 14 阅读

相关 mvc条码打印（使用window.print打印条码）实例

mvc条码打印（使用window.print打印条码）实例代码： @{ Layout = "~/Views/Shared/_Layout.c

痛定思痛。/ 2022年12月18日 15:49/ 0 赞/ 176 阅读

相关【Go基础】常用的print打印

常用的print打印常用的print打印定义枚举相关资料 -------------------- 定义枚举

我会带着你远行/ 2022年09月03日 14:24/ 0 赞/ 174 阅读

相关 java打印流——Print流

java打印流——Print流只有输出流，没有输入流。 java.io Class PrintStream java.io Class PrintWri

向右看齐/ 2022年04月06日 09:49/ 0 赞/ 263 阅读

相关页面打印功能 window.print();

1.点击打印的效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

桃扇骨/ 2022年03月17日 00:25/ 0 赞/ 314 阅读

相关浏览器打印-云打印

> 呼 ~~ 松了一口气，最近我们Team刚做了一个关于票务的项目。票务的项目我不知道大家了解多少？可以简单理解成为景区售票系统。给大家甩一个什么是票务的百度百科的截图。

一时失言乱红尘/ 2022年03月01日 13:44/ 0 赞/ 393 阅读