ローコードで帳票印刷機能を実現

日々の開発シーンでは帳票の印刷が比較的一般的ですが、Wi-Fi自体には印刷機能がないため、印刷を実現するにはサードパーティのライブラリが必要です。

1 サードパーティライブラリの紹介

マイクロビルドにサードパーティ ライブラリを導入する必要がある場合は、現在使用しているアプリケーションを開き、アプリケーション エディタのサイドバーの最後のメニューに移動して、サードパーティ ライブラリのアドレスを入力する必要があります

。

https://html2canvas.hertzen.com/dist/html2canvas.min.js

ライブラリをインポートするときにアドレスがアクセス可能であることを確認してください

フロントエンド開発に精通している友人は、インストールに npm を使用することに慣れているかもしれません。Microbuild は npm の形式をサポートしておらず、外部 JS のみをインポートできます。

2 ページを構築する

印刷する場合、通常は PC 側で使用するため、ビルド時に PC モードを選択する必要があります。印刷

シーンは通常、表示ページにあります。表示ページはフォーム コンテナーを使用して完了できます。フォームコンテナのシーンです。デモンストレーションの便宜上、ID を設定する必要があり、

もう 1 つは印刷領域を設定する必要があります。html2canvas ライブラリの原理は、ページの写真を撮ることです。どの領域がより適しているか私たちが取るの？

コンピュータ画面のサイズが異なるため、幅の広いものと狭いものがあるため、印刷領域の幅を 1080 に設定します。

この効果を実現するために、フォーム コンテナのレイアウトとして通常のコンテナを 2 層設定します。最初のレイヤーではページを画面いっぱいに表示し、2 番目のレイヤーでは印刷領域に固定幅を設定します。

最初のレイヤーでは、内部要素が水平かつ中央に配置されるように設定します。

2 番目のレイヤーのコンテナーは固定幅を設定します

3 印刷を実現する

印刷領域を設定したら、サードパーティのライブラリを呼び出すメソッドを定義する必要があります。

印刷ボタンに print という名前のカスタム メソッドを設定し、

print メソッドに次のコードを入力します。

export default async function({
     
     event, data}) {
    
    
const element = document.querySelector(`#container6`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素
  if(!element) {
    
    
    throw new Error('要打印的内容不存在')
  }
  const {
    
     width, height } = element.getBoundingClientRect()
  const canvas = await window.html2canvas(element)

  // 打印
  let winPrint = window.open('', '', `left=0,top=0,width=${
      
      width},height=${
      
      height},toolbar=0,scrollbars=0,status=0`);
  winPrint.document.body.appendChild(canvas);
  winPrint.document.close();
  winPrint.focus();
  winPrint.print();
  winPrint.close();

}

まず、印刷する領域を選択する必要があります。ここでは 2 番目の通常のコンテナを設定しています。コンテナの ID を選択する必要があります。

const element = document.querySelector(`#container6`)

印刷領域を設定したら、要素の幅と高さを取得する必要があります。

 const {
    
     width, height } = element.getBoundingClientRect()

JS の構文に慣れていない学生にはよくわからないかもしれませんが、これを分解代入といい、右側で呼び出されたメソッドで得られた戻り値を、左側の 2 つの変数 width と height に代入する構造代入を行います。

ここではオブジェクトを分解し、それぞれのオブジェクトを属性に割り当てています。公式テンプレートを読むと、配列の分解も確認できます。

const canvas = await window.html2canvas(element)

このコード行は、取得した print 要素をキャンバスに設定することに相当し、コードの残りの部分はブラウザの print 関数を呼び出します。

4 効果を実感する

コードを設定した後、プレビュー機能をクリックし、印刷ボタンをクリックして具体的な効果を確認します。

要約する

この記事は、帳票印刷の機能を誰もが理解できるようにします。帳票印刷は PC 環境で実行する必要があり、印刷領域を正しく設定し、html2canvas ライブラリを呼び出して実現する必要があります。必要な学生は、次の手順に従って練習できます。チュートリアル。