Vue 中云打印C-Lodop简单应用

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>

Vue 中云打印C-Lodop简单应用

演示用BASE64编码输出图片：

猜你喜欢