版权声明:本文为博主原创文章,转载请注明作者和出处,如有错误,望不吝赐教。 https://blog.csdn.net/weixin_41888813/article/details/85061178
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印。
目前是各家软件公司进行手机或微信远程打印的流行解决方案。
和其它“云打印”概念相比,C-Lodop主要是能编程控制,程序员可据此帮助客户部署自己的云打印主机。
官网:http://www.c-lodop.com/download.html
左边有很多demo,一个LoddpFuncs.js文件(官网有提供),三个安装程序;右边的有文档和比较新的安装程序
官网提供的 LodopFuncs.js文件
放到项目的assets的js路径下,调用
//====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
//让其它电脑的浏览器通过本机打印(仅适用C-Lodop自带的例子):
var oscript = document.createElement("script");
oscript.src ="/CLodopfuncs.js";
head.insertBefore( oscript,head.firstChild );
//让本机的浏览器打印(更优先一点):
oscript = document.createElement("script");
oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=2";
head.insertBefore(oscript,head.firstChild );
//加载双端口(8000和18000)避免其中某个端口被占用:
oscript = document.createElement("script");
oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=1";
head.insertBefore( oscript,head.firstChild );
//====获取LODOP对象的主过程:====
export function getLodop(oOBJECT,oEMBED){
var LODOP;
try{
try{
LODOP=getCLodop();
} catch(err) {}
if (!LODOP && document.readyState!=="complete") {
alert("C-Lodop没准备好,请稍后再试!");
return;
}
//清理原例子内的object或embed元素,避免乱提示:
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
return LODOP;
} catch(err) {alert("插件出错");}
}
function needCLodop(){
return true; // 这里强制所有浏览器都调用C-Lodop
}
官网的样例提供图片转Base64:http://www.c-lodop.com/demolist/PrintSample40.html
演示用BASE64编码输出图片:
BASE64编码是用字符串传递图片的常用方式,当浏览器(如IE6、IE7)不支持BASE64图片时,
可把图片编码直接送给ADD_PRINT_IMAGE输出图片。编码描述说明的格式不变,样式如下:
data:image/jpg;base64,XXXXXXXXXXXXXXXX 其中红色部分是编码描述说明,蓝色部分是内容,
注意紧跟"/"之后的图片格式"jpg"很重要, 一定要与生成编码时的图片格式保持一致,
目前控件支持bmp、jpg、jpeg、gif、png、ico、emf、wmf等格式的图片。
<template>
<el-button
@click="btnClickPrint"
class="el-button el-button--primary el-button--small">打印
</el-button>
</template>
<script>
import {getLodop} from '@/assets/js/LodopFuncs.js';
export default {
name: "PrintReport",
props: {
id: '',
},
data(){
return{
datas: {
name: ''
},
name: '',
logoValue: 'data:image/jpg;base64,\n' +
'BASE64的编码...'
}
},
watch: {
'datas.name'(val) {
if(!val){ val = '' }
this.name = '<div><strong><h1>'+val+'</h1></strong></div>';
},
},
methods:{
btnClickPrint: function () {
let LODOP = getLodop()//调用getLodop获取LODOP对象
if(!LODOP){
// undefined
this.$message.error("打印插件未安装,请先下载");
}else{
LODOP.PRINT_INIT("")
var strBASE64Code=this.logoValue;
// LODOP.PRINT_INIT("打印插件功能演示_Lodop功能_BASE64编码串打印图片");
LODOP.ADD_PRINT_IMAGE(50,60,"100%","100%",strBASE64Code);
LODOP.ADD_PRINT_HTM(60,180,500,50, this.name);
// Style
LODOP.PREVIEW();
}
},
// 初始化赋值
initData() {
// datas...
},
}
}
</script>