Web打印 Lodop打印控件 bootstrap框架

偏执的太偏执、 2022-08-06 01:25 234阅读 0赞

# 贴图    ![这里写图片描述][SouthEast]                  知乎：显著提升程序员身心健康和工作效率的装备有哪些？  笔记本：    1.[银河舰队 PAVILION 15-bc011TX光暗影精灵2][PAVILION 15-bc011TX_2]    2.[顽石 —FL5900U7500超薄i7（性价比最高）][_FL5900U7500_i7]         键盘：    1.机械键盘：[FILCO 圣手 87键 红轴（日）][FILCO _ 87_]，[樱桃（Cherry）G80-3000 茶轴    （德）][Cherry_G80-3000 _]，[DUCKY    2087S（台）][DUCKY_ 2087S]    2.静电容：[HHKB（日）][HHKB]    3.情怀插入：小黑USB键盘 ThinkPad USB Track Point 键盘 0B47082         显示器：Eizo，戴尔，三星，明基，22寸以上（[AOC C3208VW8 32英寸曲屏][AOC C3208VW8 32]）         PC配置：i7，16G，SSD，双显示器         电脑椅：[Aeron Chair][]（个人经济承受能力下，最贵的）         萌妹纸一枚（多多益善，不过太多小心受用不起）         IDE：  `1.Win（Visual Studio） 2.Linux（Vim，其他真的还有必要说吗？） 3.Mac（Xcode，CodeRunner，SnippetsLab） 4.跨平台（Pycharm，UltraEdit，Eclipse，Source Insight，Codeblocks） 5.插件（Visual Assist X,Pydev）`  耳机：    1.听音乐：[AKG Q460][]    2.玩游戏：[赛睿西伯利亚][Link 1] v1，v2  贴图    ![这里写图片描述][SouthEast 1]       #

# 一、下载Lodop打印控件[ http://www.lodop.net/][http_www.lodop.net] #

# 二、将解压的Lodop文件夹加入到项目中 #

![Image 1][]

![Center][]

# 三、在web页面中引入Lodop的js文件 #

<div id="PrintHTML" style="background-color: white;">
            <table style="width: 100%;">
                <tr>
                    <td colspan="3" style="height: 25px; text-align: center; font-weight: bold; font-size: 14px;">上海XX有限公司（上海旗舰店）</td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 25px; text-align: center; font-size: 14px;">定金单</td>
                </tr>
                <tr>
                    <td style="width: 50%; height: 25px; font-size: 12px; text-align: left;" id="Print_CustomerInformation">客户:王某某    电话:13011112222    卡号:8021656090    渠道:1000000    到货通知:不通知</td>
                    <td style="width: 10%; height: 25px;"></td>
                    <td style="width: 40%; height: 25px; font-size: 12px; text-align: right;" id="Print_DateString">出货:14.10.10    开单:14.10.02    NO:535063</td>
                </tr>
                <tr>
                    <td colspan="3" style="width: 100%; height: 25px; font-size: 12px;" id="Print_SendGoodsInformation">[寄货]123212  上海市上海市闸北区西藏北路9898号  （联系人：刘某某  13817489878）
                    </td>
                </tr>
            </table>
            <table style="width: 100%; border: solid 1px black; border-collapse: collapse; table-layout: fixed; margin-top: 5px;" id="Print_OsaledInformation">
                <thead>
                    <tr>
                        <th style="width: 10%; font-size: 12px; text-align: center; border: 1px solid black;">条码<br />
                            单内ID
                        </th>
                        <th style="width: 15%; font-size: 12px; text-align: center; border: 1px solid black;">名称<br />
                            款号（镶口范围）
                        </th>
                        <th style="width: 10%; font-size: 12px; text-align: center; border: 1px solid black;">证书
                        </th>
                        <th style="width: 10%; font-size: 12px; text-align: center; border: 1px solid black;">重量
                        </th>
                        <th style="width: 15%; font-size: 12px; text-align: center; border: 1px solid black;">参数
                        </th>
                        <th style="width: 10%; font-size: 12px; text-align: center; border: 1px solid black;">原价<br />
                            成品价
                        </th>
                        <th style="width: 30%; font-size: 12px; text-align: center; border: 1px solid black;">单内备注
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">00396097<br />
                            888852
                        </td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">GIA
                        </td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">GIA-17097234</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">0.6ct</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">VS1 G VG VG EX</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">19590<br />
                            19590</td>
                        <td style="font-size: 12px; border: 1px solid black; word-wrap: break-word; padding-left: 4px;">保留裸钻 无内刻</td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">26606188<br />
                            888853</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">铂900钻石对戒<br />
                            RB939</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">2014I1274123766</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">3.674 g 主:0.079ct*28</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">----</td>
                        <td style="font-size: 12px; text-align: center; border: 1px solid black;">3250<br />
                            3250</td>
                        <td style="font-size: 12px; border: 1px solid black; word-wrap: break-word; padding-left: 4px;">保留异调(成都-上海) 对戒 材质:铂900 手寸:11 无内刻 表面处理:抛光</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td rowspan="1" colspan="7" style="font-size: 12px; height: 50px; border: 1px solid black;"></td>
                    </tr>
                    <tr>
                        <td colspan="6" style="font-size: 12px; height: 30px; text-align: left; border: 1px solid black; padding-left: 20px;" id="Print_AmountName">实收金额(大写)：<b>伍佰零拾零元零角</b>（E1411-0000043  现金）</td>
                        <td style="font-size: 12px; text-align: left; border: 1px solid black; padding-left: 20px;" id="Print_osaled_earnest">定金：500</td>
                    </tr>
                </tfoot>
            </table>
            <table style="width: 100%; table-layout: fixed; margin-top: 20px;">
                <tr>
                    <td style="width: 50%; height: 25px; font-size: 12px; text-align: left; font-weight: bold;">客户须知
                        <ol>
                            <li>定金单作为取货的重要凭证，请您妥善保管，结单时请同时携带定单及身份证件。</li>
                            <li>非定制类商品订单有效期30天，即于定金单显示的出货日期30天内结单，定制类商品（刻
                                字属于定制类商品）订单有效期60天,即于定金单显示的出货日期60天内结单,如客户未能
                                按时结单，则视为合同自动解除,XXXX所收定金将视为违约金,不予返还
                            </li>
                            <li>如过出货日期仍未收到我们的到货通知，请尽快联系我们的客服中心，查询定单具体情况。
                            </li>
                        </ol>
                    </td>
                    <td style="width: 10%; height: 25px;"></td>
                    <td style="width: 40%; height: 25px; font-size: 12px; text-align: center; vertical-align: middle;">上海旗舰店：南京东路XXX号XX广场8层 (九江路XXX号侧门电梯直达)<br />
                        客服电话：400-880-00XX<br />
                        专业XX网站：www.XX.com
                    </td>
                </tr>
            </table>
            <table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
                <tr>
                    <td style="font-size: 12px; text-align: left;">营业员：0000    收银员：0096</td>
                    <td style="font-size: 12px; text-align: left;">销售（签字）：<input type="text" style="border: 0px; border-bottom: 1px solid black;" /></td>
                    <td style="font-size: 12px; text-align: left;">顾客（签字）：<input type="text" style="border: 0px; border-bottom: 1px solid black;" /></td>
                    <td style="font-size: 12px; text-align: right;">★号代表刻爱心符号<br />
                        取货凭证自取货日起保留期一年</td>
                </tr>
                <tr>
                    <td colspan="4" style="font-size: 12px; height: 40px; text-align: right;">1/1</td>
                </tr>
            </table>
        </div>

# 四、打印预览 #

![Center 1][]

# 五、问题说明 #

有些chrome浏览器会出现奔溃问题，其实不是浏览器奔溃无反应是假死状态。针对这个Lodop对谷歌浏览器停用Plugin技术的处理办法： [http://blog.sina.com.cn/s/blog\_55c109190101sadd.html][http_blog.sina.com.cn_s_blog_55c109190101sadd.html]

贴图   
![这里写图片描述][SouthEast]

知乎：显著提升程序员身心健康和工作效率的装备有哪些？

> 1.  笔记本：   
>     1.[银河舰队 PAVILION 15-bc011TX光暗影精灵2][PAVILION 15-bc011TX_2]   
>     2.[顽石 —FL5900U7500超薄i7（性价比最高）][_FL5900U7500_i7]   
>       
>     
> 2.  键盘：   
>     1.机械键盘：[FILCO 圣手 87键 红轴（日）][FILCO _ 87_]，[樱桃（Cherry）G80-3000 茶轴   
>     （德）][Cherry_G80-3000 _]，[DUCKY   
>     2087S（台）][DUCKY_ 2087S]   
>     2.静电容：[HHKB（日）][HHKB]   
>     3.情怀插入：小黑USB键盘 ThinkPad USB Track Point 键盘 0B47082   
>       
>     
> 3.  显示器：Eizo，戴尔，三星，明基，22寸以上（[AOC C3208VW8 32英寸曲屏][AOC C3208VW8 32]）   
>       
>     
> 4.  PC配置：i7，16G，SSD，双显示器   
>       
>     
> 5.  电脑椅：[Aeron Chair][]（个人经济承受能力下，最贵的）   
>       
>     
> 6.  萌妹纸一枚（多多益善，不过太多小心受用不起）   
>       
>

1.  IDE：
    
        1.Win（Visual Studio）
        2.Linux（Vim，其他真的还有必要说吗？）
        3.Mac（Xcode，CodeRunner，SnippetsLab）
        4.跨平台（Pycharm，UltraEdit，Eclipse，Source Insight，Codeblocks）
        5.插件（Visual Assist X,Pydev）
2.  耳机：   
    1.听音乐：[AKG Q460][]   
    2.玩游戏：[赛睿西伯利亚][Link 1] v1，v2

贴图   
![这里写图片描述][SouthEast 1]

[SouthEast]: /images/20220806/9962671e76fb4e3ea3f51c80ca80419c.png
[PAVILION 15-bc011TX_2]: https://s.click.taobao.com/wSZbZJx
[_FL5900U7500_i7]: https://s.click.taobao.com/6neZZJx
[FILCO _ 87_]: https://s.click.taobao.com/RtYXZJx
[Cherry_G80-3000 _]: https://s.click.taobao.com/Cl9XZJx
[DUCKY_ 2087S]: https://s.click.taobao.com/7dwWZJx
[HHKB]: https://s.click.taobao.com/A89WZJx
[AOC C3208VW8 32]: https://s.click.taobao.com/QW3TZJx
[Aeron Chair]: https://s.click.taobao.com/4OcRZJx
[AKG Q460]: https://s.click.taobao.com/rKzQZJx
[Link 1]: https://s.click.taobao.com/LSoPZJx
[SouthEast 1]: /images/20220806/309afdf8f0c8496ca490d61e1fe5ae77.png
[http_www.lodop.net]: http://www.lodop.net/
[Image 1]: 
[Center]: /images/20220806/7cb245c008e0448680fddbd697f4ac2b.png
[Center 1]: /images/20220806/0a470303c3754151ad1f0d5b432e4df8.png
[http_blog.sina.com.cn_s_blog_55c109190101sadd.html]: http://blog.sina.com.cn/s/blog_55c109190101sadd.html