Vue ページ印刷で自動ページングを実装する 2 つの方法

// クラス属性、メソッド定義を印刷/* eslint-disable */
const Print = 関数 (dom, オプション) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend({
    'noPrint': '.no-print'
  }, オプション);

  if ((typeof dom) === "文字列") {
    DOM をクエリセレクターとして使用します。
  } それ以外 {
    this.isDOM(DOM) は、
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }

  これを初期化します。
};
印刷.プロトタイプ = {
  初期化: 関数 () {
    var コンテンツ = this.getStyle() + this.getHtml();
    this.writeIframe(コンテンツ);
  },
  拡張: 関数 (obj, obj2) {
    (変数 k 内の obj2) {
      obj[k] = obj2[k];
    }
    obj を返します。
  },

  getStyle: 関数 () {
    var str = "",
      スタイル = document.querySelectorAll('style,link');
    (var i = 0; i < スタイルの長さ; i++) {
      str += スタイル[i].outerHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    str += "<style>html,body,div{height: auto!important;font-size:12px}</style>";

    str を返します。
  },

  getHtml: 関数 () {
    var 入力 = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('textarea');
    var selects = document.querySelectorAll('select');

    (var k = 0; k < inputs.length; k++) の場合 {
      if (inputs[k].type == "チェックボックス" || inputs[k].type == "ラジオ") {
        入力[k]がチェックされている場合、
          inputs[k].setAttribute('checked', "checked")
        } それ以外 {
          inputs[k].removeAttribute('checked')
        }
      } そうでなければ (inputs[k].type == "text") {
        入力[k].setAttribute('値', 入力[k].値)
      } それ以外 {
        入力[k].setAttribute('値', 入力[k].値)
      }
    }

    (var k2 = 0; k2 < textareas.length; k2++) {
      テキストエリア[k2].type == 'テキストエリア'の場合{
        テキストエリア[k2].innerHTML = テキストエリア[k2].値
      }
    }

    (var k3 = 0; k3 < selects.length; k3++) の場合 {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        (変数 i 内の子) {
          if (child[i].tagName == 'OPTION') {
            子[i]が選択されている場合 == true
              child[i].setAttribute('selected', "selected")
            } それ以外 {
              child[i].removeAttribute('選択された')
            }
          }
        }
      }
    }
    this.dom.outerHTML を返します。
    // 印刷する要素をラップします // 修正: https://github.com/xyl66/vuePlugs_printjs/issues/36
    // outerHTML = this.wrapperRefDom(this.dom).outerHTML とします
    // 外側のHTMLを返します。
  },
  // 親要素にループし、印刷する必要のある要素をラップします // ルートレベルの先頭にある CSS セレクターが有効にならないようにします wrapperRefDom: function (refDom) {
    prevDom = null とする
    currDom = refDomとする
    // 現在の要素が本文内にあるかどうかを判定します。文書内にない場合は、ノードを直接返します。if (!this.isInBody(currDom)) return currDom

    while (currDom) {
      if (前のドメイン) {
        要素をcurrDom.cloneNode(false)にします
        要素.appendChild(前のDom)
        prevDom = 要素
      } それ以外 {
        prevDom = currDom.cloneNode(true)
      }

      currDom = currDom.parentElement
    }

    前のDomを返す
  },

  writeIframe: 関数 (コンテンツ) {
    var w, doc, iframe = document.createElement('iframe'),
      ドキュメントのボディに iframe を追加します。
    iframe.id = "myIframe";
    //iframe.style = "位置:absolute;幅:0;高さ:0;上:-10px;左:-10px;";
    iframe.setAttribute('style', '位置:絶対;幅:0;高さ:0;上:-10px;左:-10px;');
    f.contentDocument は、次のコードで使用できます。
    doc = f.contentDocument || f.contentWindow.document;
    ドキュメントを開きます。
    doc.write(コンテンツ);
    ドキュメントを閉じる();
    var _this = これ
    iframe.onload = 関数(){
      _this.toPrint(w);
      setTimeout(関数() {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

  toPrint: 関数 (frameWindow) {
    試す {
      setTimeout(関数() {
        フレームウィンドウにフォーカスを当てます。
        試す {
          frameWindow.document.execCommand('print', false, null) の場合 {
            フレームウィンドウを印刷します。
          }
        } キャッチ (e) {
          フレームウィンドウを印刷します。
        }
        フレームウィンドウを閉じます。
      }, 10);
    } キャッチ (エラー) {
      コンソールにログ出力します。
    }
  },
  // 要素が body 要素の子孫であり、body 要素自体ではないかどうかを確認します isInBody: function (node) {
    戻り値 (node ​​=== document.body) ? false : document.body.contains(node);
  },
  isDOM: (HTMLElement の typeof === 'object') ?
    関数 (オブジェクト) {
      HTMLElement のインスタンス obj を返します。
    } :
    関数 (オブジェクト) {
      obj を返します && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
定数MyPlugin = {}
MyPlugin.install = 関数 (Vue、オプション) {
  // 4. インスタンスメソッド Vue.prototype.$printPage = Print を追加します。
}
デフォルトのMyPluginをエクスポート

エクスポートデフォルト関数printHtml(html) {
  スタイルを getStyle() に設定します。
  コンテナを getContainer(html);
 
  document.body.appendChild(スタイル);
  document.body.appendChild(コンテナ);
  getLoadPromise(コンテナ).then(() => {
    ウィンドウを印刷します。
    document.body.removeChild(スタイル);
    document.body.removeChild(コンテナ);
  });
}
 
//印刷スタイルを設定する関数 getStyle() {
styleContent = `#print-container {
    表示: なし;
}
@media 印刷 {
    本文 > :not(.print-container) {
        表示: なし;
    }
    html,
    体 {
      マージン: 0 0.2cm;
      表示: ブロック !重要;
      高さ:自動;
    }
    #印刷コンテナ{
        表示: ブロック;
    }
    @ページ {
      マージン: 0.25cm 0;
    }
}`;
  style = document.createElement("style"); とします。
  style.innerHTML = styleContent;
  戻りスタイル;
}
 
// 印刷内容をクリアする function cleanPrint() {
  div = document.getElementById('print-container') とします。
  の場合 (!!div) {
    document.querySelector('body').removeChild(div)
  }
}
 
//新しいDOMを作成し、印刷するコンテンツをDOMに入力します
関数 getContainer(html) {
  クリーンプリント()
  コンテナを document.createElement("div");
  コンテナ.setAttribute("id", "印刷コンテナ");
  コンテナ内のHTML要素をHTML要素に代入します。
  返却コンテナ;
}
 
// 画像が完全に読み込まれた後に印刷メソッドを呼び出す function getLoadPromise(dom) {
  imgs = dom.querySelectorAll("img"); とします。
  imgs = [].slice.call(imgs);
 
  (画像の長さ === 0) の場合 {
    Promise.resolve() を返します。
  }
 
  終了カウントを 0 にします。
  新しいPromiseを返します(resolve => {
    関数チェック() {
      終了カウント++;
      終了カウント === imgs.length の場合 {
        解決する（）;
      }
    }
    imgs.forEach(画像 => {
      img.addEventListener("load"、チェック);
      img.addEventListener("エラー", チェック);
    })
  });
}