码迷，mamicode.com
首页 > Web开发 > 详细

Web打印 Lodop打印控件 bootstrap框架

时间：2014-12-10 18:05:31      阅读：351      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   os   sp   for   

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


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

bubuko.com,布布扣


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

    
<script src="../Scripts/Lodop/LodopFuncs.js"></script>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0">
        <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" pluginspage="../Scripts/Lodop/install_lodop.exe"></embed>
    </object>

 <script>
 var LODOP; //声明为全局变量   
 function preview(){ 
myPreview2();
        };
function preview_2() {
            CreateOneFormPage_2();
            LODOP.PREVIEW();
        };
        function CreateOneFormPage() {
            LODOP = getLodop();
            LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
            LODOP.SET_PRINT_STYLE("FontSize", 18);
            LODOP.SET_PRINT_STYLE("Bold", 1);
            LODOP.SET_PRINT_PAGESIZE(0, "1064", "200", "A4");//动态纸张
            //LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
            LODOP.ADD_PRINT_HTM(88, 200, 350, 600, document.getElementById("PrintHTML").innerHTML);
            LODOP.PREVIEW();
        };
</script>

<a style="cursor: pointer;" onclick="preview()">打印</a>



<!-- 打印 样式 -->
    <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>
    <!-- 打印 样式 -->





四、打印预览

bubuko.com,布布扣



五、问题说明

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


Web打印 Lodop打印控件 bootstrap框架

标签：style   blog   http   io   ar   color   os   sp   for   

原文地址：http://blog.csdn.net/chinaplan/article/details/41848153
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！