JavaScript プリンタ コンポーネントのインストール

インターネットの発展に伴い、印刷機能をサポートする必要のある Web ページがますます増えています。 JavaScript プリンター コンポーネントは、Web ページを迅速に印刷できる非常に優れたツールです。この記事では、JavaScript プリンターコンポーネントのインストール方法と活用術を紹介します。

1. JavaScript プリンター コンポーネントをインストールする

まず、JavaScript プリンター コンポーネントをダウンロードする必要があります。ここでは、推奨されるオープンソースの JavaScript 印刷ライブラリである Print.js を紹介します。 Print.js は、サードパーティのライブラリを必要とせず、カスタム スタイルをサポートし、複数の印刷方法を備えた使いやすいライブラリです。

Print.js の公式 Web サイト (https://printjs.crabbly.com/) を開くと、公式では 3 つのインストール方法が提供されていることがわかります:

1. CDN による導入

この方法は最も簡単で、次のコードを HTML ファイルにコピーするだけです:

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

2. NPM パッケージを使用してインストールします

Node.js を使用している場合

npm install print-js

3. 手動ダウンロード

GitHub で Print.js コードを手動でダウンロードするか、最新バージョンの Print をダウンロードすることもできます。公式ウェブサイトの .js 圧縮パッケージをダウンロードし、プロジェクトに抽出します。

2. JavaScript プリンター コンポーネントを使用します

1. テキストを印刷します

Print.js は非常に便利なので、関数を呼び出すだけで印刷機能を実現できます。 。以下は、テキストを印刷する簡単な例です。

<script>
    function printText() {
        var text = "这是一段测试文本。";
        printJS({printable: text, type: 'raw'})
    }
</script>

<button onclick="printText()">打印文本</button>

上記のコードでは、印刷コンポーネントを初期化し、指定されたテキストを印刷するために使用される JavaScript 関数 printText() を定義します。このうち、printable はプリンタに出力したいテキスト、type パラメータは印刷内容の種類を指定するものですが、ここでは印刷されたテキストがオリジナルのテキストであることを意味する raw として宣言しています。

HTML ファイルにボタンを追加しました。ユーザーがボタンをクリックすると、printText() 関数が呼び出され、テキストが印刷されます。

2. Web ページの印刷

JavaScript プリンター コンポーネントは、テキストの印刷に加えて、スタイルや画像などを含む Web ページ全体の印刷にも役立ちます。以下は簡単な Web ページ印刷の例です:

<script>
    function printPage() {
        printJS({printable: 'https://www.example.com', type: 'url'})
    }
</script>

<button onclick="printPage()">打印网页</button>

上記のコードでは、printPage() という名前の JavaScript 関数を定義します。ユーザーがボタンをクリックすると、この関数が参照されて印刷コンポーネントが初期化されます。 Web ページ全体を印刷します。

この例では、印刷するコンテンツ タイプが URL であり、印刷する Web ページのアドレスが指定された https://www.example.com であると指定します。

3. カスタマイズされた印刷スタイル

JavaScript プリンター コンポーネントはカスタム印刷スタイルもサポートしており、印刷時に適切なフォントと植字設定を選択するのに役立ちます。以下は、カスタマイズされた印刷スタイルの例です。

<script>
    function printStyledText() {
        var text = "这是一段测试文本。";
        var style = "<style>body {font-family: Arial, sans-serif; font-size: 12pt;}";
        printJS({printable: style + text, type: 'raw'})
    }
</script>

<button onclick="printStyledText()">打印格式化文本</button>

上記のコードでは、関数 printStyledText() を定義するときに、style 変数を使用して、使用する CSS スタイルを指定します。本文の下の family と font-family font-size 属性は、印刷されるテキストのスタイルを指定します。さらに、印刷可能なコンテンツにスタイルを埋め込み、最終的に印刷されるテキストにはこのスタイルが適用されます。

この例では、CSS スタイルを変更することで、印刷されるコンテンツの外観をさらに変更できます。

3. 概要

この記事では、JavaScript プリンター コンポーネントのインストール方法と使用スキルを紹介し、テキストの印刷、Web ページの印刷、印刷スタイルのカスタマイズの例を示します。これらの方法を使用すると、Web ページの印刷機能を迅速に実装し、印刷されたコンテンツの外観を完全に制御できます。

以上がJavaScript プリンタ コンポーネントのインストールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。