カスタム印刷

パソコン側のブラウザでのみ使用できます。

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• 通常のフォームとプロセスフォームは、印刷テンプレートを使用してデータを印刷できます。カスタムページはどのように印刷できますか?

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• カスタムページの作成

このチュートリアルでは、web開発技術を使用しています。まず、次の技術を理解することができます。

• Window.print()

効果を実現する

実装手順

カスタムページの作成

ページコンテンツにコンテナコンポーネントをドラッグし、印刷するコンテンツをこのコンテナにドラッグし、「一意のidをdom idとして使用」オプションをオンにします。

ページコンテンツにコンテナコンポーネントをドラッグし、ボタンコンポーネントをドラッグします。

コンテナに次のスタイルを設定します。

:root {
  margin-top: 12px;
  display: flex;
  flex-direction: row-reverse;
}

@media print {
  :root {
    display: none;
  }
}

印刷関数の追加

次のコードをページjsパネルにコピーします。

// 自定义打印函数
// printPartDomId：指定打印区域的id，若无此id，默认打印全页
export function printPage(printPartDomId = '') {
  const printPartDom = document.querySelector(printPartDomId ? `#${printPartDomId}` : (self === top ? '.next-shell-main' : '#App'));
  if (printPartDom) {
    if (!printPartDomId) {
      // 默认打印当前页面 - 若存在底部 footer 关闭底部 footer
      const footerDom = document.querySelectorAll('.stickyFooter');
      if (footerDom.length) {
        // 打印时移除底部 footer
        const footerParent = footerDom[0].parentElement;
        footerParent.removeChild(footerDom[0]);
      };
    };
    window.document.body.innerHTML = '';
    window.document.body.appendChild(printPartDom);
    setTimeout(() => {
      window.print();
      location.reload();
    }, 1000);
  } else {
    this.utils.toast({
      title: '未获取到打印内容，请使用浏览器手动打印',
      type: 'error'
    });
  };
}

印刷関数の使用

ボタン結合イベント、ここのDiv_lbq7kcu0上で「一意のidをdom idとして使用」をオンにしたコンテナの一意のid。

export function onClick(){
  this.printPage('div_lbq7kcu0');
}

保存ページ

オンラインで試遊する