vue 下载lodop时页面数据丢失问题

最新推荐文章于 2024-01-02 20:25:11 发布
最新推荐文章于 2024-01-02 20:25:11 发布
阅读量562 收藏
点赞数 1
分类专栏： element UI lodop 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43575827/article/details/117279829
版权

在Vue 中使用lodop时，如果未下载lodop会出现页面数据丢失的情况其问题在于Lodop的JS是将下载的数据直接插入到body下，此时app里面的内容就会被阻塞，如果不行出现数据丢失问题，则需要将数据插在APP下，下面代码仅供参考，有需要的可以自己改。

//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==
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(以防其中一个被占):==
function loadCLodop() {
   if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
   CLodopJsState = "loading";
   var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
   var JS1 = document.createElement("script");
   var JS2 = document.createElement("script");
   JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
   JS2.src = "http://localhost:18000/CLodopfuncs.js";
   JS1.onload = JS2.onload = function () { CLodopJsState = "complete"; }
   JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = "complete"; }
   head.insertBefore(JS1, head.firstChild);
   head.insertBefore(JS2, head.firstChild);
   CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}

if (needCLodop()) { loadCLodop(); }//加载

//==获取LODOP对象主过程,判断是否安装、需否升级:==
export default function getLodop(oOBJECT, oEMBED) {
   var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='../../static/install_lodop32.exe' target='_self' download='install_lodop32.exe'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
   var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='../../static/install_lodop32.exe' target='_self' download='install_lodop32.exe'>执行升级</a>,升级后请重新进入。</font>";
   var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='../../static/install_lodop64.exe' target='_self' download='install_lodop32.exe'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
   var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='../../static/install_lodop64.exe' target='_self' download='install_lodop32.exe'>执行升级</a>,升级后请重新进入。</font>";
   var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
   var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
   var strCLodopInstall_1 = "<font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='../../static/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='../../static/CLodop_Setup_for_Win32NT.exe' target='_self' download='install_lodop32.exe'>执行升级</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 && CLodopJsState !== "complete") {
               if (CLodopJsState == "loading") {
                   alert("网页还没下载完毕，请稍等一下再操作.");
               }
               else alert("没有加载CLodop的主js，请先调用loadCLodop过程.");
               return;
           }
           if (!LODOP) {
               //此处会在body插入一段HTML 导致页面数据丢失 
               //document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
               //将页面内容加入到app下就可以解决此问题
               var objUl = document.getElementById("app");
               var objLen = objUl.children.length;
               var lastObj = objUl.children[objLen - 1];
               var p = document.createElement("p"); // 创建一个元素节点
               p.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3
               insertAfter(p, lastObj); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
               function insertAfter(newElement, targetElement) {
                   // newElement是要追加的元素 targetElement 是指定元素的位置
                   var parent = targetElement.parentNode; // 找到指定元素的父节点
                   if (parent.lastChild == targetElement) {
                       // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
                       parent.insertBefore(newElement, targetElement);
                   } else {
                       parent.insertBefore(newElement, targetElement.nextSibling);
                   }
               }
               return;
           } else {
               if (CLODOP.CVERSION < "4.1.2.3") {
                   // document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
                   var objUl = document.getElementById("app");
                   var objLen = objUl.children.length;
                   var lastObj = objUl.children[objLen - 1];
                   var p = document.createElement("p"); // 创建一个元素节点
                   p.innerHTML = strCLodopUpdate
                   insertAfter(p, lastObj); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
                   function insertAfter(newElement, targetElement) {
                       // newElement是要追加的元素 targetElement 是指定元素的位置
                       var parent = targetElement.parentNode; // 找到指定元素的父节点
                       if (parent.lastChild == targetElement) {
                           // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
                           parent.insertBefore(newElement, targetElement);
                       } else {
                           parent.insertBefore(newElement, targetElement.nextSibling);
                       }
                   }
               }
               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 (!CreatedOKLodopObject) {
               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);
               CreatedOKLodopObject = LODOP;
           } else
               LODOP = CreatedOKLodopObject;
           //==Lodop插件未安装时提示下载地址:==
           if ((!LODOP) || (!LODOP.VERSION)) {
               if (ua.indexOf('Chrome') >= 0)
                   // document.body.innerHTML = strHtmChrome + document.body.innerHTML;
                   var objUl = document.getElementById("main");
               var objLen = objUl.children.length;
               var lastObj = objUl.children[objLen - 1];
               var p = document.createElement("p"); // 创建一个元素节点
               p.innerHTML = strHtmChrome
               insertAfter(p, lastObj); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
               function insertAfter(newElement, targetElement) {
                   // newElement是要追加的元素 targetElement 是指定元素的位置
                   var parent = targetElement.parentNode; // 找到指定元素的父节点
                   if (parent.lastChild == targetElement) {
                       // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
                       parent.appendChild(newElement, targetElement);
                   } else {
                       parent.insertBefore(newElement, targetElement.nextSibling);
                   }
               }

               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;
               var objUl = document.getElementById("app");
           var objLen = objUl.children.length;
           var lastObj = objUl.children[objLen - 1];
           var p = document.createElement("p"); // 创建一个元素节点
           p.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML
           insertAfter(p, lastObj); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
           function insertAfter(newElement, targetElement) {
               // newElement是要追加的元素 targetElement 是指定元素的位置
               var parent = targetElement.parentNode; // 找到指定元素的父节点
               if (parent.lastChild == targetElement) {
                   // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
                   parent.insertBefore(newElement, targetElement);
               } else {
                   parent.insertBefore(newElement, targetElement.nextSibling);
               }
           }
       }
       //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==


       //=======================================================
       return LODOP;
   } catch (err) {
       alert("getLodop出错:" + err);
   }
}
Faith_ZL
关注
专栏目录
解决Vue中 父子传值 数据丢失问题
10-16
然而，在使用过程中，开发者可能会遇到页面刷新后子组件接收的父组件数据丢失的问题。这个问题的解决方法是在子组件的watch属性中监听数据变化，然后重新对数据进行处理。这通常涉及到数据的深拷贝，以避免在更新...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
chelflan's blog
03-28 1万+
C-Lodop是一个免费云服务程序，可接受来自其它平台浏览器的JavaScrip语句实现远程打印。 目前是各家软件公司进行手机或微信远程打印的流行解决方案。 和其它“云打印”概念相比，C-Lodop主要是能编程控制，程序员可据此帮助客户部署自己的云打印主机。 官网：http://www.c-lodop.com/download.html 左边有很多demo，一个LoddpFuncs.js文件（...
IE9环境下。LODOP打印，首次打印时，图片加载不出来、加载不完全问题
zpq9401的博客
04-18 4854
IE9环境下。LODOP打印，首次打印时，图片加载不出来、加载不完全问题最近项目中涉及到照片打印的地方在IE9环境下首次打印会出现图片打印不出来，或者只打印出来一部分，但是第二次打印或者将浏览器切换到Edge下，又可以完整的打印出来的问题。一开始想到的就是由于网络原因造成了图片没有加载到或者没有加载完全。加延时！这是我第一个想到的方法。但是延时加在哪儿呢？当时还是很懵逼的，于是经过了各种尝试： 这
VUE 集成 LODOP插件打印
梅廷贺的博客
04-15 2722
VUE 中使用 LODOP插件打印VUE 中使用 LODOP插件打印Lodop、C-Lodop使用说明及样例VUE简单使用lodop1.创建LodopFuncs.js文件2.在打印功能vue页面引入LodopFuncs3.执行打印方法4.打印接口函数官网样例说明 VUE 中使用 LODOP插件打印 Lodop、C-Lodop使用说明及样例 http://www.lodop.net/LodopDemo.html VUE简单使用lodop 1.创建LodopFuncs.js文件 js 内容如下 var Cre
lodop 报表套打分页、每页带有表头等【解决问题：每页底部最好一条数据显示不全、遗漏等问题】
李忠祥个人博客
07-04 4581
function DoPrint(){//打印 var LODOP=getLodop(); LODOP.PRINT_INIT("test套打"); LODOP.SET_PRINT_PAGESIZE(1, 0, 0,"A4");//设置纸张A4打印 横向 LODOP.SET_PRINT_STYLE("Alignment",2);...
LODOP打印分页出现空白页
Coder-文小白的博客
10-18 3396
最近项目中使用lodop控件进行打印操作，由于之前也使用过所以并没有感觉有什么问题，不过在进行超文本打印分页的时候却发现连续出现了空白页，这是我很奇怪，于是第一反应就是给分页错误的超文本内容加上背景色，查看打印范围： LODOP.ADD_PRINT_HTM("15mm", "5mm", "190mm", "263mm", '<style>*{background:#000}</s...
解决vue刷新页面以后丢失store的数据问题
10-14
本篇文章将详细介绍如何解决Vue刷新页面后丢失store数据的问题。 首先，我们需要理解，当浏览器刷新页面时，JavaScript运行环境会被重置，包括Vue实例和Vuex store。为了在刷新后恢复store的状态，我们可以利用...
解决vue页面刷新，数据丢失的问题
01-21
就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据...
lodop多打印一页白纸
aic25820的博客
04-25 1296
【错误还原】Lodop多张空白页测试2 【错误还原】Lodop多出空白页测试 http://blog.sina.com.cn/s/blog_157ebf1370102wta1.html 上面这个链接是以前的一个超文本自动分页，最后却出现了空白页的问题。 该问题产生的原因是，超文本中有不可见内容，所以占了空间，导致分出了空白页。 此问题可以通过给超文本加背景色，...
LODOP打印vue和 js
myTiLife的博客
07-14 934
LODOP 和 C-LODOP 打印 官方网址 官网说明如下 Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现 复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下： ● PRINT_INIT(strPrintTaskName)打印初始化 ● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 ● ADD_PRI
有关lodop.js和CLodop服务
m0_45868673的博客
04-20 1409
有关预览打印 需要下载clodop软件
使用LODOP打印控件实现打印功能的解决方案
热门推荐
Jnsone的博客
06-08 1万+
功能丰富：LODOP控件可以实现各种打印功能，如文字、图片、表格等，而且可以自定义页面大小、边距等参数。易于使用：LODOP控件提供了简单易懂的API接口，使得应用程序开发者可以快速上手并实现需要的打印功能。可定制性强：LODOP控件支持自定义纸张大小和分页设置，并且可以添加水印、背景等效果。支持多种浏览器：LODOP控件支持多种主流浏览器，如IE、Chrome、Firefox等。多语言支持：LODOP控件支持中文、英文等多种语言。
LODOP使用
最新发布
weixin_58405115的博客
01-02 594
【代码】LODOP使用。
vue 项目中使用LodopFuncs （浏览器控制打印机）
web_hj的博客
01-11 3419
1.电脑安装c-Lodop 下载地址http://www.lodop.net/download.html 2. 在要控制打印页面引入 LodopFuncs.js 3. template: <el-button @click="onStart">打印</el-button> script: onStart: function () { let LODOP=getLodop(); LODOP.PRINT_INIT(""); ...
C-Lodop打印控件通过https协议访问时设置及使用参考
onlylele的博客
04-16 8017
通过https访问的网站C-Lodop打印控件无法使用问题处理： 1、前端改造LodopFuncs.js代码 //改造后的代码 if (needCLodop()) { var protocol = window.location.protocol;//http、https var src1,src2; if(protocol == 'https:'){ ...
vue新增数据时 打印表单内容为空问题
luxurie的小窝
03-13 2012
vue+element-ui打印表单数据为空问题 在做后台管理系统时，我们常常有新增用户或商品类似数据的功能。 因为用了element-ui组件库，所以新增表单在对话框中完成。 今天突发奇想在向后端发起请求前先在控制台console.log一下新增的表单对象，结果发现为空。 可是明明这些数据已经赋值了，下面单独打印表单中任意一条数据，发现也不为空。 最后查阅资料，原来谷歌浏览器打印的对象是...
VUE 下载文件流 文件无法打开，缺失数据
daotian2016的博客
03-22 5413
项目场景： 项目场景：VUE工程，做了一个代码自动生成可以导出zip的功能。 问题描述 导出的zip文件打开提示“不可预料的压缩文件末端”，文件打不开。 export function downLoadZip(str, filename) { var url = baseUrl + str axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authorization'
LODOP打印，首次打印时，图片加载不出来、加载不完全问题
lchu55的博客
05-17 8425
IE9环境下。LODOP打印，首次打印时，图片加载不出来、加载不完全问题 最近项目中涉及到照片打印的地方在IE9环境下首次打印会出现图片打印不出来，或者只打印出来一部分，但是第二次打印或者将浏览器切换到Edge下，又可以完整的打印出来的问题。 LODOP.SET_PRINT_STYLEA(0,”HtmWaitMilSecs”,1000) 这样就是延时下载超文本1000毫秒，该过后的代码为： ...
解决Vue页面刷新Vuex数据丢失：使用Proxy与本地存储
本文档探讨了在Vue应用中使用Vuex时遇到的页面刷新数据消失问题的解决方案。Vuex是一个状态管理库，它允许在单页应用（SPA）中集中管理共享状态，但在页面刷新或浏览器关闭后，由于数据没有持久化存储，常规情况下会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值