electron + vue + lodop实现打印预览功能

最新推荐文章于 2024-07-03 19:09:01 发布
最新推荐文章于 2024-07-03 19:09:01 发布
阅读量5.4k 收藏 7
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caimaomaocai/article/details/89489187
版权

因为electron集成的客户端并不像浏览器那样自带打印功能，然后查了electron的打印，资料太少，什么静默打印乱七八糟的看不太懂，好像也没有预览的功能。。然后我找到了lodop控件，实现了打印功能

 

步骤一:到官网下载lodop，安装到电脑。

下载地址：http://www.lodop.net/download.html

 

步骤二：修改LodopFuncs.js源码，其实很简单，就是改为es6的模块化语法，方便在vue项目中引用而已。也就是在每个function前加上export ，具体如下

var CreatedOKLodop7766 = null, CLodopIsLocal;

//====判断是否需要 Web打印服务CLodop:===
//===(不支持插件的浏览器版本需要用它)===
export function needCLodop() {
    try {
        var ua = navigator.userAgent;
        if (ua.match(/Windows\sPhone/i))
            return true;
        if (ua.match(/iPhone|iPod|iPad/i))
            return true;
        if (ua.match(/Android/i))
            return true;
        if (ua.match(/Edge\D?\d+/i))
            return true;

        var verTrident = ua.match(/Trident\D?\d+/i);
        var verIE = ua.match(/MSIE\D?\d+/i);
        var verOPR = ua.match(/OPR\D?\d+/i);
        var verFF = ua.match(/Firefox\D?\d+/i);
        var x64 = ua.match(/x64/i);
        if ((!verTrident) && (!verIE) && (x64))
            return true;
        else if (verFF) {
            verFF = verFF[0].match(/\d+/);
            if ((verFF[0] >= 41) || (x64))
                return true;
        } else if (verOPR) {
            verOPR = verOPR[0].match(/\d+/);
            if (verOPR[0] >= 32)
                return true;
        } else if ((!verTrident) && (!verIE)) {
            var verChrome = ua.match(/Chrome\D?\d+/i);
            if (verChrome) {
                verChrome = verChrome[0].match(/\d+/);
                if (verChrome[0] >= 41)
                    return true;
            }
        }
        return false;
    } catch (err) {
        return true;
    }
}

//====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000）避免其中某个被占用：====
if (needCLodop()) {
    var src1 = "http://localhost:8000/CLodopfuncs.js?priority=1";
    var src2 = "http://localhost:18000/CLodopfuncs.js?priority=0";

    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    var oscript = document.createElement("script");
    oscript.src = src1;
    head.insertBefore(oscript, head.firstChild);
    oscript = document.createElement("script");
    oscript.src = src2;
    head.insertBefore(oscript, head.firstChild);
    CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i));
}

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {
    var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
    var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
    var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
    var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
    var strCLodopInstall_3 = "，成功后请刷新本页面。</font>";
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
    var LODOP;
    try {
        var ua = navigator.userAgent;
        var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
        if (needCLodop()) {
            try {
                LODOP = getCLodop();
            } catch (err) {}
            if (!LODOP && document.readyState !== "complete") {
                alert("网页还没下载完毕，请稍等一下再操作.");
                return;
            }
            if (!LODOP) {
                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
                return;
            } else {
                if (CLODOP.CVERSION < "3.0.8.3") {
                    document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
                }
                if (oEMBED && oEMBED.parentNode)
                    oEMBED.parentNode.removeChild(oEMBED);
                if (oOBJECT && oOBJECT.parentNode)
                    oOBJECT.parentNode.removeChild(oOBJECT);
            }
        } else {
            var is64IE = isIE && !!(ua.match(/x64/i));
            //=====如果页面有Lodop就直接使用，没有则新建:==========
            if (oOBJECT || oEMBED) {
                if (isIE)
                    LODOP = oOBJECT;
                else
                    LODOP = oEMBED;
            } else if (!CreatedOKLodop7766) {
                LODOP = document.createElement("object");
                LODOP.setAttribute("width", 0);
                LODOP.setAttribute("height", 0);
                LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
                if (isIE)
                    LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
                else
                    LODOP.setAttribute("type", "application/x-print-lodop");
                document.documentElement.appendChild(LODOP);
                CreatedOKLodop7766 = LODOP;
            } else
                LODOP = CreatedOKLodop7766;
            //=====Lodop插件未安装时提示下载地址:==========
            if ((!LODOP) || (!LODOP.VERSION)) {
                if (ua.indexOf('Chrome') >= 0)
                    document.body.innerHTML = strHtmChrome + document.body.innerHTML;
                if (ua.indexOf('Firefox') >= 0)
                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
                document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
                return LODOP;
            }
        }
        if (LODOP.VERSION < "6.2.2.6") {
            if (!needCLodop())
                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
        }
        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==



        //=======================================================
        return LODOP;
    } catch (err) {
        alert("getLodop出错:" + err);
    }
}

步骤三：就是在组件引入LodopFuncs.js啦

vue相应组件的script代码

<script>
    import {getLodop} from "../../../config/LodopFuncs";

    export default {
        name: "PrintDetailDialog",
        props:{
            PrintDetailDialogVisible:{
                type:Boolean,
                default:null
            }
        },
        data () {
            return {
                showClose:false,
                tableData:{
                    one:'扭力扳手',
                    two:'aaaa',
                    three:'2019-04-23 10:12:30',
                    four:'1111',
                    five:12,
                    six:8,
                    seven:666,
                    eight:353,
                    nine:2312,
                    mark:'已领用已领用'
                }
            }
        },
        methods:{
            handlePrintBtnClick () {
                // this.$print(this.$refs.printContent);
            },
            printPdf() {
                let  LODOP = getLodop();
                var strBodyStyle = '<link href="../../../assets/css/print.css" type="text/css" rel="stylesheet">';
                var strTableHtml = "<head>"+strBodyStyle+"</head><body>"+document.getElementById('PrintDetailTable').innerHTML+"</body>";
                LODOP.PRINT_INIT("订货单");
                LODOP.SET_PRINT_STYLE("FontSize", 18);
                LODOP.SET_PRINT_STYLE("Bold", 1);
                // LODOP.ADD_PRINT_TEXT(50, 231, 500, 39, "打印页面部分内容");
                LODOP.ADD_PRINT_HTM(0, "5%", "90%", "100%",strTableHtml);
                //参数按顺序分别为，上下间距，左右间距，宽度，高度  

//        LODOP.PRINT();
                LODOP.PREVIEW();
            }
        }
    }
</script>

template部分如下 

 

到了这步，就可以打印预览了，

 

重点来了！！！！！

 

如果你写的外联样式，你会发现样式不生效，哈哈

所以样式写内联。。

 

我目前没有找到外联样式的解决方法。。搜到的方法都试了就是木有效果。。。哪位亲知道引用外联样式的方法告诉一下我，多谢啦！

 

 

caimaomaocai
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
js 打印指定内容_electron webview 打印
weixin_39568133的博客
11-22 800
你好，我是燕云长风。 寓意：结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里，吹度玉门关。 最近在实际的项目中接到了大量打印方面的需求，起初是优先采用lodop进行web打印，后来考虑到了跨平台的可扩展性，研究了electron webview 打印。 由于electron5版本以上默认是禁用状态，所以首先需要在构造BrowserWindow时，需...
[原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
weixin_34199405的博客
04-26 4544
最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引用外部css文件时, 需要拼出实际的含有IP地址的CSS文件地址, 并且需要用双斜杠(//)来代替单斜杠.   =====后来遇到的问题:  css文件里的样式, 在页面上显示没有问题, 但是...
lodop 打印格式
Name_xing的博客
04-28 2142
lodop 打印格式
Electron、Win11静默打印与PowerShell：技术融合与应用探索
最新发布
MrLi的博客
07-03 833
Electron是一个由GitHub公司开发并维护的开源跨平台框架，旨在利用Web技术（HTML、CSS和JavaScript）构建桌面应用程序。这一框架的核心理念在于，通过整合Chromium渲染引擎和Node.js，使得开发者能够使用熟悉的前端开发技术来构建跨平台的桌面应用。Electron的广泛应用，如Atom编辑器、Visual Studio Code和Slack等，充分证明了其强大的灵活性和实用性。
lodop的基本使用和常用API的详细介绍
weixin_63203565的博客
06-22 7022
功能丰富：LODOP 允许网页中进行高度自定义的打印操作，包括添加文本、图像、表格等内容，设置纸张尺寸和方向，调整对象的风格和布局，控制打印机的设置等HTML 内容支持：LODOP 支持添加 HTML 内容到打印任务中，可以通过方法将 HTML 代码呈现为打印内容，可以灵活地处理复杂的格式和布局需求对象风格控制：通过方法，可以为打印任务中的对象（如文本、图像、表格等）设置各种风格，包括字体大小、字体名称、加粗、对齐方式、边框样式等，从而实现个性化的打印效果。
使用LODOP打印控件实现打印功能的解决方案
Jnsone的博客
06-08 1万+
功能丰富：LODOP控件可以实现各种打印功能，如文字、图片、表格等，而且可以自定义页面大小、边距等参数。易于使用：LODOP控件提供了简单易懂的API接口，使得应用程序开发者可以快速上手并实现需要的打印功能。可定制性强：LODOP控件支持自定义纸张大小和分页设置，并且可以添加水印、背景等效果。支持多种浏览器：LODOP控件支持多种主流浏览器，如IE、Chrome、Firefox等。多语言支持：LODOP控件支持中文、英文等多种语言。
打印 传参数给HTML页面 同步加载数据
Tylt_ylw的专栏
11-02 4091
工作内容： 打印一个申请表格 表格里面有申请人的信息 以及领导审批的信息         于是 想到了Lodop这个控件  这个控件有好几种方式打印表格 我选择的是 打印页面的方式 如下： 名称：增加超文本打印项(普通模式) 格式：ADD_PRINT_HTM(Top,Left,Width,Height,strHtmlContent) 功能：增加超文本打印项，设定该打印
electron + vue项目实现打印小票功能及实现代码
10-17
在电子（Electron）+ Vue 项目中实现打印小票功能，主要涉及到Electron的API使用和Vue组件的配合。以下是对实现这一功能的详细解释： 1. **需求分析**： - 公司项目中可能需要通过Electron应用程序调用用户的系统...
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询...
electron + vue项目实现打印小票功能及实现代码.docx
01-13
"electron + vue 项目实现打印小票功能" electron + vue 项目实现打印小票功能是一个基于 electron 和 vue 框架的项目，它的主要目的是实现打印小票的功能。这个项目使用了 electron 的 ipcRenderer 对象和 ...
Electron+Vite+Vue3 模版
05-31
标题 "Electron+Vite+Vue3 模版" 提供了一个关于软件开发的集成环境，它结合了三个强大的技术栈：Electron、Vite 和 Vue3。这个模版是为开发者构建跨平台桌面应用而设计的，允许开发者使用现代前端技术栈的同时，...
CLodop设置打印
m0_71331177的博客
08-22 3503
CLodop打印设置 1、可同时控制多台打印机打印，根据打印机名称或直接设置默认打印机或指定打印机 2、CLodop可同一个页面多次注册/设置打印内容--原生HTML 3、CLodop可设置预览或直接打印
打印的几种方法(lodop、window.print)
weixin_46118496的博客
06-17 2581
打印的几种方法(lodop、window.print) ADD_PRINT_HTML特点：切行切字，不补表格线，类似截图，把内容当图截了 ADD_PRINT_TABLE 特点：不切行，只能输出一个table，嵌套复杂等表格不行 window.print() 举例： vue 打印...
使用vue进行Lodop打印的一些方法
字节叔叔
06-11 7386
一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例。
使用Lodop控件打印表单和二维码
weixin_45111741的博客
12-16 1万+
1.了解lodop 1.1Lodop的定义 Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句一样。 1.2Lodop的下载 下载链接：http://www.lodop.net/download.html 一路安装就行，安装好之后解压 可以跟着示例一个一个学习，不懂的地方结合源代码一起学习 2.在页面中引入lodop (必须要安装lodop才行，不然没有效果) 在页面中嵌入l
【黄啊码】Lodop：自定义打印网页插件
黄啊码
12-08 914
Lodop自定义打印网页插件，可打印发票，快递面单之类的
在UniApp中使用Lodop实现APP打印标签功能
Mr.Hua的博客
07-28 7311
在当今移动互联网时代，移动应用程序已经成为人们日常生活中不可或缺的一部分。随着移动设备性能的不断提升和移动网络的普及，越来越多的企业和个人开始将业务扩展到移动端。UniApp 作为一种新兴的跨平台移动应用开发框架，为开发人员提供了快速构建高质量移动应用的能力。它支持一次开发，多端运行，可以大大提高开发效率。然而，在实际应用中，我们经常会遇到需要在移动应用中实现打印功能的需求。例如，在物流行业，快递员需要在移动设备上打印快递单；在餐饮行业，服务员需要在移动设备上打印点菜单等。
Web打印--Lodop使用手册install_lodop.exe
热门推荐
LYBWWP
07-13 3万+
http://www.hbsszx.com/lodop/PrintSample27.html Lodop是一款专业的WEB打印控件，其设计目标是简单易用、功能足够强大，开创WEB打印开发的新局面。 Lodop设计者对WEB下的打印开发任务进行了分类汇总，高度抽象，设计出仅用几个功能函数，就可实现复杂的打印任务，尽量减少使用者的知识累赘。控件发布包有3个系统文件组成，全部功能用几个控件参数和2组
electron+vue3+vite实现rtsp播放
07-02
Electron是一个开源框架，用于构建跨平台的桌面应用程序，结合Vue.js和Vite（一个快速的前端构建工具）可以让您创建现代、高性能的Web视图层，嵌入到 Electron 应用中。RTSP（Real-Time Streaming Protocol）是一种网络协议，用于实时视频流传输。 要在 Electron + Vue3 + Vite 中实现 RTSP 播放，您可以按照以下步骤操作： 1. **安装依赖**： - 安装 `vue-video-player` 或类似的库，它提供了处理媒体流的功能，如 `vue-streaming-api`。 - 如果需要，安装支持 RTSP 解码的库，比如 `fluent-ffmpeg` 或 `mediasoup-client`。 ```bash npm install vue-video-player fluent-ffmpeg --save ``` 2. **设置配置**： 在项目中创建一个配置文件（例如 `config.js`），用于管理 RTSP 地址等信息。 ```javascript export default { rtspsource: 'rtsp://your_rtspserver_url/stream' } ``` 3. **在 Vue 组件中使用**： 使用 Vue 插件或组件内的方法加载并播放 RTSP 流。例如，使用 `vue-video-player`: ```html <template> <div id="player"> <VideoPlayer v-bind:src="config.rtspsource"></VideoPlayer> </div> </template> <script> import VideoPlayer from 'vue-video-player'; import { defineComponent, ref } from 'vue'; import config from '@/config'; export default defineComponent({ components: { VideoPlayer, }, setup() { const player = ref(null); // 当组件挂载后尝试播放 mounted() { player.value.play(); } return { player, }; }, }); </script> ``` 4. **错误处理**： 添加错误处理代码来捕获并处理播放过程中可能出现的问题，如连接失败、编码不兼容等。 5. **优化和调整**： 根据应用需求可能还需要对视频质量、缓冲策略等进行优化，并确保在不同平台上运行稳定。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值