フロントエンドの実装の印刷機能

能力を印刷するフロントエンドを達成するための多くの方法があります
方法1：window.print（）
window.print（）体の内容を印刷するデフォルトの
ローカル印刷を達成する必要がある場合は、再割り当てをするためにコンテンツ本体、完成印刷した後、後続の実行コンテンツ削減する必要がありますバック。

    //根据div标签ID拿到div中的局部内容
    bdhtml=window.document.body.innerHTML; 
    var jubuData = document.getElementById("printcontent").innerHTML;
    //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
    window.document.body.innerHTML= jubuData; 
    //调用打印功能
    window.print();
    window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
    return false;

上記の方法はまた、ユーザーエクスペリエンスに影響を与えますリフレッシュを印刷し、現在、window.document.bodyコンテンツの再レンダリングで動作欠点があります。
方法2：インラインフレームを使用して、iframe.contentWindow.printは（）
の違いは、印刷されたページの廃止は、現在のページの内容を維持することができます後にアクセスされていることである）（オリジナルエコロジーを印刷
プリント（）メソッドのIFRAMEを使用して、ローカルコンテンツ印刷されますリリースiframe内に、欠点は、あなたが大量のコンテンツを印刷したい場合も、JSを生成するために必要なコンテンツを使用するスタイルは、それが便利避けられないです

<iframe width='100%' height='200px' ref='iframe' style='display: none;' id='iframe'></iframe>
JS：
      let doc = this.$refs.reconciliationWrapper.innerHTML
      this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><div>'+ doc +'</div></body></html>')
      this.$refs.iframe.contentWindow.print()

ここでのスタイルは、生成されたスタイルは、スタイルを書くことは、この問題を解決する方法、大きなプロジェクトであるので、非常に複雑である場合には、JSに行く必要もありますか？コンテンツ画像を生成するために印刷され、次いで、iframe内に配置されます。
スクリーンショットはhtml2canvasを使用して生成しました

    // 打印账单
    printBill () {
      this.printDisabled = true  // 点击打印按钮禁止重复点击
      setTimeout(_ => {      // 按钮显示为禁止了再去执行截图功能
        html2canvas(this.$refs.reconciliationWrapper, {
          backgroundColor: null,
          scale: 1.3
        }).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.$refs.iframe.contentWindow.document.body.innerHTML = ''  // 清空上一次打印的内容
          this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><img src=' + dataURL + '></body></html>')
          setTimeout(_ => {
            this.$refs.iframe.contentWindow.print()
          }, 0)
          this.printDisabled = false
        })
      }, 100)
    }

IMGは、実際の状況に応じて調整されるIFRAME、スクリーンショット概して幾分曖昧、スケールhtml2canvas調整パラメータ、ズーム比、のスクリーンショットに印刷しました。

_dalianmiao

公開された137元の記事・ウォン称賛30 ・ビュー260 000 +

プライベートの手紙の懸念

フロントエンドの実装の印刷機能

おすすめ