欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法

 更新時(shí)間：2021年02月07日 11:40:55   作者：Allen-沐風(fēng)  
這篇文章主要介紹了vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

此控件直接進(jìn)行打印底部會(huì)有水印，通過(guò)官網(wǎng)購(gòu)買可以解決；
如不想購(gòu)買，可先執(zhí)行預(yù)覽，彈出預(yù)覽框進(jìn)行打??；
需要用到的js文件和api文檔附后，請(qǐng)注意查看。
首先需要在局部或全局引入LodopFuncs.js文件
import {getLodop} from '../../../components/js/LodopFuncs'

方法中調(diào)用

print(){
   let LODOP = getLodop();
   LODOP.PRINT_INITA(0,0,800,1600,"打印庫(kù)位名稱");
   LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //設(shè)定紙張大小
    LODOP.NewPage();//初始化
    LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
    LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');//打印文字
    LODOP.SET_PRINT_STYLEA(0,"FontSize",30);//字體樣式
    LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);//打印直線
    LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');//打印二維碼
    LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//二維碼樣式和規(guī)則
    LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");//選擇打印機(jī)
   // LODOP.PRINT_DESIGN()//打開(kāi)設(shè)置
   // LODOP.PREVIEW(); //預(yù)覽
    LODOP.PRINT() //直接打印
  },

LodopFuncs.js文件

//==本JS是加載Lodop插件及CLodop服務(wù)的綜合示例，可直接使用，建議看懂后融進(jìn)自己頁(yè)面程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;


//==判斷是否需要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(以防其中一個(gè)被占):==
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  
  var JS1 = document.createElement("script");
  JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
  head.insertBefore(JS1, head.firstChild);

  var JS2 = document.createElement("script");
  JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
  head.insertBefore(JS2, head.firstChild);

  CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));

  if (JS1.attachEvent) {
  	CLodopJsState = "loading";
    var onChange = function(){ 
	   if (window.event.srcElement.readyState == 'loaded')        
	   CLodopJsState = "complete";
	};
	JS1.attachEvent('onreadystatechange',onChange);
	JS2.attachEvent('onreadystatechange',onChange);
  }
}

//==獲取LODOP對(duì)象主過(guò)程,判斷是否安裝、需否升級(jí):==
export function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安裝!點(diǎn)擊這里<a  target='_self'>執(zhí)行安裝</a>,安裝后請(qǐng)刷新頁(yè)面或重新進(jìn)入。</font>";
  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升級(jí)!點(diǎn)擊這里<a  target='_self'>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)重新進(jìn)入。</font>";
  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安裝!點(diǎn)擊這里<a  target='_self'>執(zhí)行安裝</a>,安裝后請(qǐng)刷新頁(yè)面或重新進(jìn)入。</font>";
  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升級(jí)!點(diǎn)擊這里<a  target='_self'>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)重新進(jìn)入。</font>";
  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安裝過(guò)Lodop舊版附件npActiveXPLugin,請(qǐng)?jiān)凇竟ぞ摺?>【附加組件】->【擴(kuò)展】中先卸它）</font>";
  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，僅因?yàn)g覽器升級(jí)或重安裝而出問(wèn)題，需重新執(zhí)行以上安裝）</font>";
  var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服務(wù)CLodop未安裝啟動(dòng)，點(diǎn)擊這里<a  target='_self'>下載執(zhí)行安裝</a>";
  var strCLodopInstall_2 = "<br>（若此前已安裝過(guò)，可<a  target='_self'>點(diǎn)這里直接再次啟動(dòng)</a>）";
  var strCLodopInstall_3 = "，成功后請(qǐng)刷新本頁(yè)面。</font>";
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服務(wù)CLodop需升級(jí)!點(diǎn)擊這里<a  target='_self'>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)刷新頁(yè)面。</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" || (isIE && CLodopJsState == "loading")) ) {
        alert("網(wǎng)頁(yè)還沒(méi)下載完畢，請(qǐng)稍等一下再操作.");
        return;
      }
      if (!LODOP) {
        document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;        
        return;
      } else {
        if (CLODOP.CVERSION < "3.0.9.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));
      //==如果頁(yè)面有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插件未安裝時(shí)提示下載地址:==
      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;
    }
    //===如下空白位置適合調(diào)用統(tǒng)一功能(如注冊(cè)語(yǔ)句、語(yǔ)言選擇等):==



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

到此這篇關(guān)于vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的文章就介紹到這了,更多相關(guān)vue瀏覽器兼容打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例

    vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例

    今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • Vue中this.$nextTick()方法的使用及代碼示例

    Vue中this.$nextTick()方法的使用及代碼示例

    $nextTick()是Vue.js框架中的一個(gè)方法，它主要用于DOM操作，當(dāng)我們修改Vue組件中的數(shù)據(jù)時(shí)，Vue.js會(huì)在下次事件循環(huán)前自動(dòng)更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下
    2023-05-05
  • 使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼

    使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼

    下面小編就為大家分享一篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能

    vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能

    這篇文章主要介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能，動(dòng)態(tài)路由控制分為兩種：一種是將所有路由數(shù)據(jù)存儲(chǔ)在本地文件中，另一種則是本地只存儲(chǔ)基本路由，具體內(nèi)容詳情大家參考下此文
    2018-04-04
  • Vue 換膚的示例實(shí)踐

    Vue 換膚的示例實(shí)踐

    本篇文章主要介紹了Vue 換膚的示例實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • Axios在vue項(xiàng)目中的封裝步驟

    Axios在vue項(xiàng)目中的封裝步驟

    Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和?node.js，是一個(gè)第三方插件，第三方異步請(qǐng)求工具庫(kù)，這篇文章主要介紹了Axios在vue項(xiàng)目中的封裝方法,需要的朋友可以參考下
    2022-10-10
  • Vue中子組件調(diào)用父組件的3種方法實(shí)例

    Vue中子組件調(diào)用父組件的3種方法實(shí)例

    vue子組件調(diào)用父組件的方法其實(shí)不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下
    2022-05-05
  • layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決

    layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決

    這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • 詳解使用vue實(shí)現(xiàn)tab 切換操作

    詳解使用vue實(shí)現(xiàn)tab 切換操作

    這篇文章主要介紹了詳解使用vue實(shí)現(xiàn)tab操作,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式

    vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式

    這篇文章主要介紹了vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-01-01

最新評(píng)論