Vue で lodop 印刷コントロールを使用してブラウザ互換の印刷を実現する方法

Vue で lodop 印刷コントロールを使用してブラウザ互換の印刷を実現する方法

序文

このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで解決できます。
購入しない場合は、まずプレビューしてから、印刷用のプレビュー ボックスが表示されます。
必要な js ファイルと API ドキュメントが添付されていますので、よく確認してください。
まず、LodopFuncs.jsファイルをローカルまたはグローバルにインポートする必要があります。
import {getLodop} from '../../../components/js/LodopFuncs'

メソッドの呼び出し

印刷(){
   LODOP = getLodop(); とします。
   LODOP.PRINT_INITA(0,0,800,1600,"印刷場所名");
   LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //用紙サイズを設定 LODOP.NewPage(); //初期化 LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
    : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

LodopFuncs.js ファイル

//==この JS は、Lodop プラグインと CLodop サービスをロードする包括的な例です。そのまま使用できます。理解した上で、独自のページ プログラムに統合することをお勧めします==

var CreatedOKLodopObject、CLodopIsLocal、CLodopJsState;


//==CLodop が必要かどうかを判断します (プラグインをサポートしていないブラウザの場合):==
エクスポート関数needCLodop() {
  試す {
    var ua = navigator.userAgent;
    if (ua.match(/Windows\sPhone/i))
      true を返します。
    ua.match(/iPhone|iPod|iPad/i) の場合
      true を返します。
    ua.match(/Android/i) の場合
      true を返します。
    (ua.match(/Edge\D?\d+/i))の場合
      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))
      true を返します。
    そうでなければ(verFF){
      verFF = verFF[0].match(/\d+/);
      ((verFF[0] >= 41) || (x64))の場合
        true を返します。
    } そうでなければ (verOPR) {
      verOPR = verOPR[0].match(/\d+/);
      (verOPR[0] >= 32)の場合
        true を返します。
    } そうでない場合 ((!verTrident) && (!verIE)) {
      var verChrome = ua.match(/Chrome\D?\d+/i);
      if (verChrome) {
        verChrome = verChrome[0].match(/\d+/);
        (verChrome[0] >= 41)の場合
          true を返します。
      }
    }
    false を返します。
  } キャッチ (エラー) {
    true を返します。
  }
}

//==デュアルポート 8000 と 18000 を使用して CLodop のメイン JS を参照します (どちらかが使用されている場合)。==
CLodop() が必要な場合
  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));

  JS1.attachEventの場合{
  	CLodopJsState = "ロード中";
    var onChange = 関数(){ 
	   (window.event.srcElement.readyState == 'loaded') の場合        
	   CLodopJsState = "完了";
	};
	JS1.attachEvent('onreadystatechange',onChange);
	JS2.attachEvent('onreadystatechange',onChange);
  }
}

//==LODOP オブジェクトのメイン プロセスを取得して、インストールされているかどうか、アップグレードする必要があるかどうかを判断します:==
エクスポート関数 getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#FF00FF'>印刷コントロールがインストールされていません。<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>インストールを実行するにはここをクリック</a>してください。インストール後にページを更新するか、再度入力してください。</font>";
  var strHtmUpdate = "<br><font color='#FF00FF'>印刷コントロールをアップグレードする必要があります。<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>アップグレードを実行するには、ここをクリック</a>してください。アップグレード後に再度入力してください。</font>";
  var strHtm64_Install = "<br><font color='#FF00FF'>印刷コントロールがインストールされていません。インストールを実行するには、ここ <a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'> をクリックしてください</a>。ページを更新するか、インストール後に再度入力してください。</font>";
  var strHtm64_Update = "<br><font color='#FF00FF'>印刷コントロールをアップグレードする必要があります。<a href='https://wms.warehousing.com/download/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='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'>ダウンロードしてインストール</a>してください";
  var strCLodopInstall_2 = "<br>(以前にインストールしたことがある場合は、<a href='https://wms.warehousing.com/download/CLodop.protocol:setup' target='_self'>ここをクリックしてもう一度開始</a>できます)";
  var strCLodopInstall_3 = "成功したらこのページを更新してください。</font>";
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web 印刷サービス CLodop をアップグレードする必要があります。アップグレードを実行するには、ここ <a href='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'> をクリックしてください</a>。アップグレード後にページを更新してください。</font>";
  var LODOP;
  試す {
    var ua = navigator.userAgent;
    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
    CLodop() が必要な場合
      試す {
        LODOP は getCLodop() を返します。
      } キャッチ (エラー) {}
      if (!LODOP && (document.readyState !== "complete" || (isIE && CLodopJsState == "loading")) ) {
        alert("Web ページはまだダウンロードされていません。再度操作する前にしばらくお待ちください。");
        戻る;
      }
      もし (!LODOP) {
        document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;        
        戻る;
      } それ以外 {
        CLODOP.CVERSIONが3.0.9.3の場合
          document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
        }
        (oEMBED && oEMBED.parentNode) の場合
          oEMBED.parentNode.removeChild(oEMBED);
        (oOBJECT && oOBJECT.parentNode) の場合
          oOBJECT.parentNode.removeChild(oOBJECT);
      }
    } それ以外 {
      var is64IE = isIE && !!(ua.match(/x64/i));
      //==ページに Lodop がある場合はそれを直接使用し、ない場合は新しいものを作成します:==
      if (oOBJECT || oEMBED) {
        (IEの場合)
          LODOP = オブジェクト;
        それ以外
          LODOP = 埋め込み;
      } そうでない場合 (!CreatedOKLodopObject) {
        LODOP = document.createElement("オブジェクト");
        LODOP.setAttribute("幅", 0);
        LODOP.setAttribute("高さ", 0);
        LODOP.setAttribute("style", "位置:absolute;左:0px;上:-100px;幅:0px;高さ:0px;");
        (IEの場合)
          LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
        それ以外
          LODOP.setAttribute("type", "application/x-print-lodop");
        ドキュメント要素に子要素を追加します。
        作成されたOKLodopオブジェクト = LODOP;
      } それ以外
        LODOP = 作成されたOKLodopオブジェクト;
      //==Lodop プラグインがインストールされていない場合のダウンロード アドレスの入力を求める:==
      if ((!LODOP) || (!LODOP.VERSION)) {
        (ua.indexOf('Chrome') >= 0)の場合
          document.body.innerHTML = strHtmChrome + document.body.innerHTML;
        (ua.indexOf('Firefox') >= 0) の場合
          document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
        document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
        LODOP を返します。
      }
    }
    LODOP.VERSIONが6.2.2.6の場合
      (!CLodop() が必要)
        document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
    }
    //===次の空白位置は、統合された関数 (登録ステートメント、言語選択など) を呼び出すのに適しています:==



    //=======================================================
    LODOP を返します。
  } キャッチ (エラー) {
    alert("getLodopエラー: " + err);
  }
}

Vue が lodop 印刷コントロールを使用してブラウザー互換印刷を実現する方法について説明したこの記事はこれで終わりです。Vue ブラウザー互換印刷に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue iview IE ブラウザ非互換性エラーの詳細な説明 (Iview Bable ポリフィル)
  • Vue2.0が独自ブラウザで開けない問題を解決(互換処理)
  • Vue で lodop 印刷機能を実装した例
  • Vue で Lodop プラグインを使用して印刷機能を実装する簡単な方法
  • Vueはlodopを使用して要約の印刷を実装します
  • Vueプロジェクトでlodop印刷プラグインを使用する方法の詳細な説明

<<:  単一テーブルのMySQLバックアップとリストアに関する簡単な説明

>>:  Linux のインスタンスにパブリック IP アドレスを割り当てる方法

推薦する

MySQL 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)

目次1. 上の写真2. ユーザーが存在しない3. コードをアップロードする1. 上の写真 2. ユー...

Vue3.0 + TypeScript + Vite初体験の詳しい説明

目次プロジェクトの作成プロジェクト構造メイン.jsアプリ.vue:設定コンポジションAPI参照反応的...

適応幅(パーセンテージ)に応じて Div の高さを調整する純粋な CSS

今日のレスポンシブ レイアウトの要件では、サイズを自動的に調整できる多くの要素で高さと幅の適応を実現...

nginx でクロスドメイン障害修復を構成する方法の例

Nginxのクロスドメイン設定は次のようには機能しません サーバー{ 聞く 80; server_n...

AWS無料サーバーアプリケーションとネットワークプロキシ設定チュートリアルの詳細な説明

目次予防必要条件AWSアカウントを申請する仮想マシンの申請と有効化仮想マシンを申請するセキュリティグ...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

写真をアップロードして顔を認識する Vue+axios サンプルコード

目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...

Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

突然、MySQLにログインすると、アクセスが拒否されたか、データベースに接続できないと表示されました...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

円形/扇形メニューを2分で実装する方法を教えます(基本バージョン)

序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

Linuxのシグナルメカニズムについての簡単な説明

目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...

要素テーブルの多層ネスト表示の実践

複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...