[亲测]vue使用C-lodop打印总结

曾经终败给现在 2024-04-17 05:29 26阅读 0赞

**按照我步骤走不迷路**  
**1.[先来到官方网站][Link 1]**  
下图中的1点击下载，下载后安装，傻瓜式安装方式就不再阐述了  
下图中的2点击下载，下载后大概的看一下(内容不是很重要但是还是需要看的)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]  
**2.找到你安装好的C-lodop，将其启动 如下图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]  
**3.[访问本地的教程][Link 2]，这里默认你的8000端口之前没有被占用，即使被占用那就访问18000端口，若仔细看文档的都知道，访问成功如下图**仔细琢磨以下内容,他给的代码是js的，不适合vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]  
**4.咱这个打印只在前台就可以完成，下面开始上代码**  
官方上说在 **Program Files (x86)\\MountTaiSoftware\\CLodop32\\Rootdir\\CLodopDemos** 文件下找到 **LodopFuncs.js** 文件粘到自己项目中，但是我使用这个文件没有成功，于是在网上找到以下js文件

**5.来到vue页面**  
5.1.将刚刚复制的js文件导入需要打印的页面

import { getLodop } from '@/assets/js/LodopFuncs'

![在这里插入图片描述][20190822143938964.png]  
5,2.由于打印分为：直接打印，打印预览，打印维护，打印设计。所以我呢就把这几个都添加了

<a-dropdown>
 <a-button icon="printer" type="primary">
 打印选项
 <a-icon type="down" />
 </a-button>
 <a-menu slot="overlay">
 <a-menu-item type="primary" @click="printPreview(0)">直接打印</a-menu-item>
 <a-menu-item type="primary" @click="printPreview(1)">打印预览</a-menu-item>
 <a-menu-item type="primary" @click="printPreview(2)">打印维护</a-menu-item>
 <a-menu-item type="primary" @click="printPreview(3)">打印设计</a-menu-item>
 </a-menu>
 </a-dropdown>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 3]  
5.3在 **mothods** 方法中添加方法，百分之九十的打印方式我都试过了，可能下面没有，但是不要慌，往下看

printPreview(s) {
 this.CreateOneFormPage()
 if (s == 0) {
 LODOP.PRINT() //直接打印
 }
 if (s == 1) {
 LODOP.PREVIEW() //打印预览
 }
 if (s == 2) {
 LODOP.PRINT_SETUP() //打印维护
 }
 if (s == 3) {
 LODOP.PRINT_DESIGN() //打印设计
 }
 },
 CreateOneFormPage() {
 LODOP = getLodop()
 //样式
 var olstyle1 = '<style>' + document.getElementById('olstyle1') + '</style>'
 var body = olstyle1 + '<body>' + document.getElementById('form1').innerHTML + '</body>'
 LODOP.PRINT_INIT('订单') //打印初始化
 LODOP.SET_PRINT_STYLE('FontSize', 18) //设置对象风格
 LODOP.SET_PRINT_STYLE('Bold', 1) 设置对象风格
 LODOP.ADD_PRINT_TEXT(50, 521, 130, 39, this.description) //增加纯文本项
 LODOP.SET_PRINT_PAGESIZE(0, 2000, 2000, '') //设定纸张大小
 LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '55%')//设置缩放
 LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口
 // 打印二维码
 // LODOP.ADD_PRINT_BARCODE(23,23,233,233,"QRCode","https://blog.csdn.net/qq_43652509");
 //打印网址
 // LODOP.ADD_PRINT_URL(222,2000,2000,233,"https://blog.csdn.net/qq_43652509");
 //打印图片
 // LODOP.ADD_PRINT_IMAGE(100,100,400,400,"<img border='0' src='http://s1.sinaimg.cn/middle/4fe4ba17hb5afe2caa990&690' width='345' height='250'>");
 LODOP.ADD_PRINT_HTM(88, 20, 2000, 2000, body) //增加超文本项
 }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 4]  
5.4 [案例大全][Link 3]，我呢就是从这里面一点点看一点点研究出来的  
5.4.1有些会说明语句的每个属性什么意思，但是有些没有，不慌，一个 **F12** 就可以看到 **script** 标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 5]  
5.4.2点进去,对，你需要的就在下面，照着葫芦画瓢，大家都会吧！一共51个案例，如果都试过了，那我就可以向你请教请教了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 6]  
6.到这也差不多就结束了，最后给大家推荐C-lodop的官方QQ讨论群 ：**580517659** ，我也在这个群里哦

[Link 1]: http://www.lodop.net/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/b0359e1db85a4549a448529af6a78f95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ccacfaf7dd3842649fab37be3d21da02.png
[Link 2]: http://localhost:8000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ffa6a5250fe249d2a38c2d170b4ddb7d.png
[20190822143938964.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/cf879f479ae94c5486f3ddfdfd943223.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/670652a1787e41b38bbea788e243a551.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/211282d1c1134d8394a138bca1271cea.png
[Link 3]: http://localhost:8000/CLodopDemos/PrintSampIndex.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/91478539fff2420393e040bd82f0190d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/abdd4624dc7f4946b5dafd2e824f32ac.png