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 アドレスを割り当てる方法

推薦する

シャトルボックス機能を実装するためのVueの詳細なコード

Vue - シャトルボックス機能を実装します。効果図は次のようになります。 CS 。移行{ ディスプ...

mysql インストーラ ウェブ コミュニティ 5.7.21.0.msi インストール グラフィック チュートリアル

この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...

ウェブページの背景画像を伸ばす2つの方法

解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...

Vueは画像切り替え効果を実現

この記事の例では、画像切り替え効果を実現するためのVueの具体的なコードを参考までに共有しています。...

インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明

1. 前の章では、プログラムを yum リポジトリに直接インストールできることを学びましたが、そのた...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

dockerを使用してTomcatをデプロイし、Skywalkingに接続する

目次1. 概要2. dockerを使用してTomcatをデプロイし、Skywalkingに接続する要...

Linux sar コマンドの使用方法とコード例の分析

1. CPU使用率sar -p (一日中表示) sar -u 1 10 (1: 1秒ごと、10: 1...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...