浏览器打印-云打印

一时失言乱红尘 2022-03-01 13:44 316阅读 0赞

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

给大家甩一个什么是票务的百度百科的截图。

![file][] 给大家在看看票务系统的特点:

![file][file 1]

好了。吹牛逼到此结束。。。

![file][file 2]

> 看我红圈圈的地方，这些都是我们程序员背后的努力啊。为中国程序猿点赞！！！

> 今天就给大家分享一下B/S架构浏览器连接打印机并且打印门票信息（也可以称为云打印）

> 我上次给我朋友讲这个打印流程的时候，我朋友问我什么是B/S架构。 我哔哩吧啦讲了一大推，一句话概括吧就是web浏览器做的系统。 下面是B/S架构构百度百科的讲解。

![file][file 3]

> 反之我问我的朋友对应B/S结构的是什么结构呢。他说S/B架构。 我说我一个大嘴巴子的踢死你。。

![file][file 4]

> 我觉得你不适合干程序猿。回家买烤冷面吧。

![file][file 5]

> 他说我看行，我上次去买烤冷面的时候听那个大妈说，我月入三万在乎你一个鸡蛋。。

![file][file 6]

> 大家千万不要向我那么朋友一样，据听说他真回去买烤冷面了，每个月比程序员赚的还多。关键是还不掉头发。

![file][file 7]

> 你说气人不气人。。 来我继续给大家说B/S结构对应的是什么结构 C/S结构你们可以这么理解装在客户端的软件 比如CS游戏。 我给你们甩一个CS结构的百度百科。

![file][file 8]

> 好了给你们介绍完什么是BS结构和CS结构了。现在给你们说一下什么是云打印。

![file][file 9]

> 我刚接触的时候，丝毫没有头绪。leader直接给我扔过来一大推驱动。你自己玩吧。

![file][file 10]

> 心里想驱动怎么跟浏览器挂钩呢。一瞬间头白了头。问度娘呗。

![file][file 11]

> 一看有结果 贼拉拉开心。结果没有一个能用的。。。。

![file][file 12]

> 就在我快要哭的时候，出现了一个盖世英雄（是不是电视剧剧本都这么写。）

![file][file 13]

> 我的盖世英雄鹏哥给我推荐了一个超级牛逼插件（不过是收费的，免费的带水印）

![file][file 14]

> 我觉得不是马赛克，都能忍受。先实现功能吧，要不leader提着大砍刀就来取我小命了。

好了正戏开始了。大家别眨眼。我要变身了。。。。

> 我用的就是这个打印插件LODOP [点我快速进入官网][Link 1]

![file][file 15]

> 抓住了最后的救命稻草。勉强的活着。做个~~小仙女~~ （男神）真累。。。

> 下面是技术手册-和要装的软件。地址：http://www.lodop.net/download.html

![file][file 16]

\*\*在客户端安装的软件如下（主要说一下安装打印插件，打印机驱动请自行研究）

a) 支持市面常用的浏览器。也兼容市面上常用windows系统。

b) 需要在本地电脑安装打印机的驱动（不安装打印机驱动不能打印。）

c) 安装监听打印机的软件如下\*\*

> 我用的这个版本的做的开发，你们可以自行研究一下后面那个版本的。

![file][file 17]

> 下载完成之后会有下面三个软件还有我们开发用的js（install\_lodop32.exe/install\_lodop64.exe根据安装系统版本选择安装）。

![file][file 18]

> 安装完成之后需要访问：http://127.0.0.1:8000/ 或者http://127.0.0.1:18000/ 两个都可以。至少保证8000端口和18000一个端口不被占用。访问可以访问到如下即可安装成功。

![file][file 19]

> 上面红圈圈的地方可根据需求进行更改哦！

> 我们不擅长的工作做完了。现在开始我们程序员大显身手的时候了。 新建一个html引入LodopFuncs.js方法 然后看LODOP的官方api就可以。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>KingYiFan测试打印</title>
        <script src="/static/js/LodopFuncs.js"></script>
    </head>
    
    <body style="zoom:1;font-family:'adobe-clean',sans-serif">
    
    <a href="javascript:myPrint()"><b>测试打印机</b></a>
    
    </p>
    <script language="javascript" type="text/javascript">
    	//打印方法
        function myPrint() {
            var   LODOP = getLodop();
            LODOP.PRINT_INITA(0,0,376,302,"打印控件功能演示_Lodop功能_空白练习");
            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
            LODOP.ADD_PRINT_TEXT(57,194,76,29,"捐助KingYiFan");
            LODOP.SET_PRINT_STYLEA(0,"FontName","楷体");
            LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
            LODOP.ADD_PRINT_TEXT(103,187,28,27,"￥");
            LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
            LODOP.ADD_PRINT_TEXT(267,193,145,25,"2019年3月11日10:49:43");
            LODOP.PRINT();
        };
    </script>
    </body>
    </html>

> 上面就是一个测试打印的代码。是不是看到myprint方法是不是一脸懵逼。

![file][file 20]

> 其实我也懵逼，也不是我写的。他们官方提供一个很强大的设计工具。

![file][file 21]

> 是不是有感觉爽多了。。。

> 现在小伙伴肯定又问我了怎么找到这个牛逼的工具。别急别急。

![file][file 22]

> 直接可以从他官网的demo能调起来，也可以从刚刚下载的demo html打开。 然后开始各种涂鸦呗。

![file][file 23]

> 这个时候小伙伴肯定又问我 我涂鸦好了怎么生成代码。

![file][file 24]![file][file 25]

> 是不是感觉炒鸡简单。把写死的数据直接改成动态的即可。

![file][file 26]

> 然后把生成代码填充即可。下面是我自己封装的js。可以参考一下。

/**
     *调用打印任务
     * ticket:打印信息 name:kingYiFan age:18 money:999999
     * create 2019/03/22
     */
    function CreatePrintPage(name, age, money) {
        var LODOP = getLodop();
        //获取当前时间
        var time = getNowFormatDate();
                LODOP.PRINT_INITA(0,0,376,302,"打印控件功能演示_Lodop功能_空白练习");
                LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
                LODOP.ADD_PRINT_TEXT(57,194,76,29,name);
                LODOP.SET_PRINT_STYLEA(0,"FontName","楷体");
                LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
                LODOP.ADD_PRINT_TEXT(103,187,28,27,"年龄");
                LODOP.SET_PRINT_STYLEA(0,"FontSize",age);
                LODOP.ADD_PRINT_TEXT(267,193,145,25,time);
                LODOP.ADD_PRINT_TEXT(10,103,175,41,"存款");
                LODOP.SET_PRINT_STYLEA(0,"FontSize",17)；
                LODOP.ADD_PRINT_TEXT(99,213,60,38,money);
                LODOP.SET_PRINT_STYLEA(0,"FontSize",23);
                LODOP.ADD_PRINT_TEXT(104,273,27,30,"元");
                //调用打印方法
                LODOP.PRINT();
    };
    
    //获取当前时间 固定格式的时间戳
    function getNowFormatDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        return year + "年" + month + "月" + strDate + "日";
    }

Q:如果遇到这种问题。重新安装一下官网下载的软件即可。

![file][file 27]

Q:需要生成二维码发现只能生成条码。下面是条码改成二维码的方法。

![file][file 28]

> 他的官网有好多样例，可以自行研究一下。

![file][file 29]

> 我个人觉得这个插件挺好的。还有一个值得我佩服的事，免费版在群里回复很及时。

![file][file 30]

--------------------

声明：我没有打广告。目前也不接任何广告，只是纯个人分享。别问我赚了多少广告费。我想给各位粉丝说一下。我不是专职写博客的。我也有自己的生活和工作。只是业余时间会更新文章。你们遇到问题可以问我，但是请你先去百度完在问我，有可能一个答案 百度只需要2分钟 你问我 等我看到会很长时间。我也希望很。。的问题请也别问我。上次有个小伙过来问我怎么装jdk。。。。
    	以上就是云打印java教程欢迎大家和我一起学习。共同加油。
    	下一篇我会讲 公众号小程序以及微信支付java开发的常用东西。java后台功能不用你们写了。直接调用某大佬的jar包。你们只需要注重业务逻辑就可以了。一起期待吧。

甩几张你们喜欢的照片吧。

![file][file 31]

![file][file 32]

![file][file 33]

--------------------

鼓励作者写出更好的技术文档，就请我喝一瓶哇哈哈哈哈哈哈哈。。你们的赞助绝对我更新的速度哦！

微信：

[![E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg][]][E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]

支付宝：

[![E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png][]][E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]

--------------------

感谢一路支持我的人。。。。。
    
    Love me and hold me
    QQ:69673804（16年老号）
    EMAIL:69673804@qq.com
    友链交换
    如果有兴趣和本博客交换友链的话，请按照下面的格式在评论区进行评论，我会尽快添加上你的链接。

--------------------

网站名称：KingYiFan’S Blog
    网站地址：http://blog.cnbuilder.cn
    网站描述：年少是你未醒的梦话，风华是燃烬的彼岸花。
    网站Logo/头像： [头像地址](https://blog.cnbuilder.cn/upload/2018/7/avatar20180720144536200.jpg)

[file]: https://cnbuilder.cn/upload/2019/2/image-155324170061120190322160140965.png
[file 1]: https://cnbuilder.cn/upload/2019/2/image-155324174443720190322160224677.png
[file 2]: https://cnbuilder.cn/upload/2019/2/image-155324183153520190322160351835.png
[file 3]: https://cnbuilder.cn/upload/2019/2/image-155324221302020190322161012760.png
[file 4]: https://cnbuilder.cn/upload/2019/2/image-155324257158920190322161611565.png
[file 5]: https://cnbuilder.cn/upload/2019/2/image-155324265968020190322161739515.png
[file 6]: https://cnbuilder.cn/upload/2019/2/image-15532428376652019032216203771.png
[file 7]: https://cnbuilder.cn/upload/2019/2/image-155324293754520190322162217789.png
[file 8]: https://cnbuilder.cn/upload/2019/2/image-155324305738120190322162417132.png
[file 9]: https://cnbuilder.cn/upload/2019/2/image-155324152482520190322155844539.png
[file 10]: https://cnbuilder.cn/upload/2019/2/image-15532432833122019032216280342.png
[file 11]: https://cnbuilder.cn/upload/2019/2/image-15532433848932019032216294448.png
[file 12]: https://cnbuilder.cn/upload/2019/2/image-155324349294120190322163132508.png
[file 13]: https://cnbuilder.cn/upload/2019/2/image-155324355482920190322163234907.png
[file 14]: https://cnbuilder.cn/upload/2019/2/image-15532436449052019032216340477.png
[Link 1]: http://www.lodop.net/
[file 15]: https://cnbuilder.cn/upload/2019/2/image-155324378728420190322163626829.png
[file 16]: https://cnbuilder.cn/upload/2019/2/image-155324387302420190322163752986.png
[file 17]: https://cnbuilder.cn/upload/2019/2/image-155324398001220190322163939257.png
[file 18]: https://cnbuilder.cn/upload/2019/2/image-155324463503120190322165034710.png
[file 19]: https://blog.cnbuilder.cn/upload/2019/2/image-155324420696020190322164326359.png
[file 20]: https://cnbuilder.cn/upload/2019/2/image-155324498326720190322165623918.png
[file 21]: https://cnbuilder.cn/upload/2019/2/image-155324507939920190322165759416.png
[file 22]: https://cnbuilder.cn/upload/2019/2/image-155324515221620190322165911790.png
[file 23]: https://cnbuilder.cn/upload/2019/2/image-155324558901620190322170630102.png
[file 24]: https://cnbuilder.cn/upload/2019/2/image-155324561556920190322170655533.png
[file 25]: https://cnbuilder.cn/upload/2019/2/image-155324580955820190322171009422.png
[file 26]: https://cnbuilder.cn/upload/2019/2/image-155324595182820190322171231743.png
[file 27]: https://cnbuilder.cn/upload/2019/2/image-155324633545120190322171855615.png
[file 28]: https://cnbuilder.cn/upload/2019/2/image-155324645041520190322172050604.png
[file 29]: https://cnbuilder.cn/upload/2019/2/image-155324654985920190322172229102.png
[file 30]: https://cnbuilder.cn/upload/2019/2/image-155324661248220190322172332223.png
[file 31]: https://blog.cnbuilder.cn/upload/2019/2/image-155324817224820190322174931986.png
[file 32]: https://blog.cnbuilder.cn/upload/2019/2/image-155324821459720190322175014619.png
[file 33]: https://blog.cnbuilder.cn/upload/2019/2/image-155324823704620190322175036240.png
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png