1500字范文 > 详解如何在vue项目中使用lodop打印插件以及样式打印预览缺失的问题（底部）

详解如何在vue项目中使用lodop打印插件以及样式打印预览缺失的问题（底部）

时间：2024-01-14 21:24:20

C-Lodop是一个免费云服务程序，可接受来自其它平台浏览器的JavaScrip语句实现远程打印。

目前是各家软件公司进行手机或微信远程打印的流行解决方案。

和其它“云打印”概念相比，C-Lodop主要是能编程控制，程序员可据此帮助客户部署自己的云打印主机。

官网：http://www.c-/download.html

左边有很多demo，一个LoddpFuncs.js文件（官网有提供），三个安装程序；右边的有文档和比较新的安装程序

如何使用？先大概看了下开发文档，就是一堆demo，一个js文件，三个安装程序，我擦，这么简单。come on 电脑安装C-Lodop,就可以打印预览来了。

开工，翻来覆去就一个LodopFuncs.js是干货，扔到项目中。就差怎么调里面的方法了。

如何引用：

LodopFuncs.js 方法改造如下

//====判断是否需要安装CLodop云打印服务器:====export function needCLodop(){ ...... }//====获取LODOP对象的主过程：====export function getLodop(oOBJECT,oEMBED){ ...... }

vue 组件中如何使用

import {getLodop} from '../common/LodopFuncs'......methods: {printPdf() {this.CreateOneFormPage();// LODOP.PRINT();LODOP.PREVIEW();},CreateOneFormPage() {LODOP = getLodop();LODOP.PRINT_INIT("订货单");LODOP.SET_PRINT_STYLE("FontSize", 18);LODOP.SET_PRINT_STYLE("Bold", 1);LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");LODOP.ADD_PRINT_HTM(88, 200, 350, 600, document.getElementById("form1").innerHTML); },}......

4.你以为就这么多。对的就这

现在碰见个指令打印问题，在项目中直接把部分指令都打印出来了，不能打印出正常样式，™

现在都是驱动打印机，暂时不考虑指令的…

常见问题：浏览器alert警告lodop打印出错之类的，首先得把lodop本地服务打开。

鉴于好多人提问，完整的代码还是贴出来吧。（没修改什么东西啊…）

LodopFuncs.js

具体页面使用如下

<template><div class="demo"><el-button @click="printPdf" >打印</el-button><form id="form1"><table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001"><font face="黑体" color="#FF0000" size="3"><u> 《表单一》 </u></font></td></tr></table><table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;"><tr><td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td><td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td><td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr><tr><td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td><td width="80" height="12" style="border:solid 1px black">中-001</td><td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td></tr><tr><td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td><td width="80" height="16" style="border:solid 1px black">日-スの</td><td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7㎥</font></td></tr><tr><td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub><nobr>over隐藏后面的：1234567890</nobr></td><td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup></td></tr> </table></form></div></template><script>import {getLodop} from '../common/LodopFuncs'export default {name: "demo",data() {return {}},methods: {// 查询数据printPdf() {let LODOP = getLodop();LODOP.PRINT_INIT("订货单");LODOP.SET_PRINT_STYLE("FontSize", 18);LODOP.SET_PRINT_STYLE("Bold", 1);LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");LODOP.ADD_PRINT_HTM(88, 200, 350, 600,document.getElementById("form1").innerHTML);// LODOP.PRINT();LODOP.PREVIEW();},}}</script>

打印预览时候样式缺失的问题

外部和内部样式在vue中无法打印预览，所有建议都写成内联样式

参考：/article/148064.htm

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。