👠 🔛 ⤵️ Kotlinの別のDSLまたはReactからPDFを印刷する方法 💘 🚺 👨🏻‍🔧

Reactで記述されたページを取得して印刷することはできません。ページセパレーター、入力フィールドがあります。さらに、ReactDomとPDFに変換可能なプレーンHTMLの両方を生成するように、レンダリングを1回作成します。

最も難しいのは、Reactには独自のdslがあり、htmlには独自のdslがあることです。この問題を解決するには？別のものを書いてください！

私はほとんど忘れていました、それはすべてKotlinで書かれているので、これは実際にはKotlin dslに関する記事です。

なぜ独自のウルクハイが必要なのですか？

私のプロジェクトには多くのレポートがあり、それらはすべて印刷可能でなければなりません。これを行う方法にはいくつかのオプションがあります。

印刷スタイルを試して、必要のないものをすべて隠し、すべてがうまくいくことを望みます。ボタン、フィルターなどのみがそのまま印刷されます。また、テーブルが多数ある場合は、それぞれが別々のページにある必要があります。そして個人的に、サイトから印刷するときに出てくる追加されたリンク、日付などは私を怒らせています
PDFをレンダリングできる特殊な反応ライブラリを使用してみてください。私はこれを見つけました、それはベータ版であり、その中で、通常の反応コンポーネントを再利用できないようです。
HTMLをキャンバスに変換し、PDFを作成します。ただし、このためにはボタンなどのないHTMLが必要です。後で印刷するには、非表示の要素でレンダリングする必要があります。しかし、このオプションでは改ページを制御できるとは思えません。

最終的に、ReactDomとHTMLの両方を生成できるコードを書くことにしました。途中で改ページに関する特別なタグを挿入して、HTMLをバックエンドに送信してPDFを印刷します。

Kotlinには、Reactを操作するためのタイプセーフなdslを提供するReactを操作するためのレイヤーライブラリがあります。一般的にどのように見えるかは、以前の記事で見ることができます。

JetBrainsは、 HTMLを生成するためのライブラリも作成しました。クロスプラットフォーム、つまり JavaとJSの両方で使用できます。これもdslで、構造が非常に似ています。

ReactDomまたは純粋なHTMLのどちらが必要かによって、ライブラリを切り替える方法を見つける必要があります。

どんな材料がありますか？

たとえば、ヘッダーに検索ボックスがあるテーブルを考えます。これは、ReactとHTMLでのテーブルレンダリングの様子です。

反応する html

反応する	html
`fun RBuilder.renderReactTable( search: String, onChangeSearch: (String) -> Unit ) { table { thead { tr { th { attrs.colSpan = "2" //(1) attrs.style = js { border = "solid" borderColor = "red" } //(2) +":" search(search, onChangeSearch) //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }`	`fun TagConsumer<*>.renderHtmlTable( search: String ) { table { thead { tr { th { colSpan = "2" //(1) style = """ border: solid; border-color: red; """ //(2) +": " +(search?:"") //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }`

fun RBuilder.renderReactTable( search: String, onChangeSearch: (String) -> Unit ) { table { thead { tr { th { attrs.colSpan = "2" //(1) attrs.style = js { border = "solid" borderColor = "red" } //(2) +":" search(search, onChangeSearch) //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }

 fun TagConsumer<*>.renderHtmlTable( search: String ) { table { thead { tr { th { colSpan = "2" //(1) style = """ border: solid; border-color: red; """ //(2) +": " +(search?:"") //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }

私たちのタスクは、テーブルの左側と右側を結合することです。

まず、違いが何であるかを理解しましょう。

htmlでは、 style

とcolSpan

、Reactのattrネストされたオブジェクトのトップレベルで割り当てられます。
スタイルの塗り方は異なります。 HTMLでこれが文字列としての通常のcssである場合、Reactでは、JSの制限によりフィールド名が標準のcssとわずかに異なるjsオブジェクトです。
Reactバージョンでは、検索に入力を使用し、HTMLでは単にテキストを表示します。これはすでに問題のステートメントから始まっています。

まあ、最も重要なこと：これらは異なる消費者と異なるAPIを持つ異なるDSLです。コンパイラーの場合、それらはまったく異なります。それらを直接交差させることは不可能であるため、ほぼ同じように見えるが、React APIとHTML APIの両方で動作できるレイヤーを記述する必要があります。

スケルトンを組み立てる

とりあえず、1つの空のセルからタブレットを描画します。

 table { thead { tr { th { } } } }

HTMLツリーと、それを処理する2つの方法があります。従来のソリューションは、複合パターンと訪問者パターンを実装することです。訪問者用のインターフェースはありません。なぜ-それは後で見られます。

メインユニットはParentTagとTagWithParentです。 ParentTagはKotlin apiのHTMLタグによって生成され（HTMLとReact apiの両方で使用されます）、TagWithParentはタグ自体と2つのAPIバリアントの親に挿入する2つの関数を格納します。

 abstract class ParentTag<T : HTMLTag> { val tags: MutableList<TagWithParent<*, T>> = mutableListOf() //     protected fun RDOMBuilder<T>.withChildren() { ... } //  reactAppender    protected fun T.withChildren() { ... } //  htmlAppender    } class TagWithParent<T, P : HTMLTag>( val tag: T, val htmlAppender: (T, P) -> Unit, val reactAppender: (T, RDOMBuilder<P>) -> Unit )

なぜそんなに多くのジェネリックが必要なのですか？問題は、コンパイル時にHTMLのdslが非常に厳しいことです。 Reactでdivからでもどこからでもtdを呼び出すことができる場合、HTMLの場合はtrのコンテキストからのみ呼び出すことができます。したがって、どこにでもジェネリックの形でコンパイルするためにコンテキストをドラッグする必要があります。

ほとんどのタグはほぼ同じ方法で記述されます。

2つの訪問メソッドを実装します。 1つはReact用、もう1つはHTML用です。最終的なレンダリングを担当します。これらのメソッドは、スタイル、クラスなどを追加します。
タグを親に挿入する拡張機能を作成します。

ここにtheadの例があります

 class THead : ParentTag<THEAD>() { fun visit(builder: RDOMBuilder<TABLE>) { builder.thead { withChildren() } } fun visit(builder: TABLE) { builder.thead { withChildren() } } } fun Table.thead(block: THead.() -> Unit) { tags += TagWithParent(THead().also(block), THead::visit, THead::visit) }

最後に、訪問者用のインターフェースが使用されなかった理由を説明できます。問題は、trをtheadとtbodyの両方に挿入できることです。 1つのインターフェイスのフレームワーク内でこれを表現できませんでした。訪問機能の4つのオーバーロードが発生しました。

回避できない重複の束

 class Tr( val classes: String? ) : ParentTag<TR>() { fun visit(builder: RDOMBuilder<THEAD>) { builder.tr(classes) { withChildren() } } fun visit(builder: THEAD) { builder.tr(classes) { withChildren() } } fun visit(builder: RDOMBuilder<TBODY>) { builder.tr(classes) { withChildren() } } fun visit(builder: TBODY) { builder.tr(classes) { withChildren() } } }

肉を作る

セルにテキストを追加します。

  table { thead { tr { th { +": " } } } }

「+」を使用したフォーカスは非常に簡単です。テキストを含む可能性のあるタグでunaryPlusを再定義するだけです。

 abstract class TableCell<T : HTMLTag> : ParentTag<T>() { operator fun String.unaryPlus() { ... } }

これにより、tdまたはthのコンテキストで '+'を呼び出すことができ、テキストを含むタグがツリーに追加されます。

皮をむく

ここで、HTMLが異なる場所とapiをリアクションする必要があります。 colSpanとの小さな違いはそれ自体で解決されますが、スタイルの形成の違いはより複雑です。 Reactで誰も知らない場合、スタイルはJSオブジェクトであり、フィールド名にハイフンを使用することはできません。そのため、代わりにcamelCaseが使用されます。 HTML APIでは、通常のCSSが必要です。再びこれとその両方が必要です。

自動的にcamelCaseをハイフネーションにし、React APIのようにそのままにしておくこともできますが、常に機能するかどうかはわかりません。したがって、別のレイヤーを作成しました。

怠zyではない人は、それがどのように見えるかを見ることができます

 class Style { var border: String? = null var borderColor: String? = null var width: String? = null var padding: String? = null var background: String? = null operator fun invoke(callback: Style.() -> Unit) { callback() } fun toHtmlStyle(): String = properties .map { it.html to it.property(this) } .filter { (_, value) -> value != null } .joinToString("; ") { (name, value) -> "$name: $value" } fun toReactStyle(): String { val result = js("{}") properties .map { it.react to it.property(this) } .filter { (_, value) -> value != null } .forEach { (name, value) -> result[name] = value.toString() } return result.unsafeCast<String>() } class StyleProperty( val html: String, val react: String, val property: Style.() -> Any? ) companion object { val properties = listOf( StyleProperty("border", "border") { border }, StyleProperty("border-color", "borderColor") { borderColor }, StyleProperty("width", "width") { width }, StyleProperty("padding", "padding") { padding }, StyleProperty("background", "background") { background } ) } }

はい、もう1つのcssプロパティが必要な場合は、このクラスに追加します。はい。コンバータを使用したマップを実装する方が簡単です。しかし、タイプセーフです。私も場所で列挙を使用します。おそらく、自分で書いていないのであれば、どうにかして質問を別の方法で解決するでしょう。

私は少しだまして、結果のクラスのこの使用を許可しました：

 th { attrs.style { border = "solid" borderColor = "red" } }

方法：attr.styleフィールドには、デフォルトで空のStyle（）がすでに横になっています。演算子fun invokeを定義すると、オブジェクトを関数として使用できます。スタイルは関数ではなくフィールドですが、 attrs.style()

を呼び出すことができます。このような呼び出しでは、演算子fun invokeで指定されたパラメーターを転送する必要があります。この場合、これは1つのパラメーター-コールバック：スタイル（）->ユニット。これはラムダなので、（括弧）はオプションです。

別の鎧を試着する

Reactで入力を描画する方法と、HTMLでテキストを描画する方法を学ぶことは残っています。この構文を取得したい：

 react { search(search, onChangeSearch) } html { +(search?:"") }

仕組み：反応関数は、Rreact APIのラムダを受け取り、挿入されたタグを返します。タグで、中置関数を呼び出し、ラムダをHTML APIに渡すことができます。中置修飾子を使用すると、htmlをドットなしで呼び出すことができます。 if {} else {}と非常に似ています。また、if-elseの場合と同様に、html呼び出しはオプションであり、数回役に立ちました。

実装

 class ReactTag<T : HTMLTag>( private val block: RBuilder.() -> Unit = {} ) { private var htmlAppender: (T) -> Unit = {} infix fun html(block: (T).() -> Unit) { htmlAppender = block } ... } fun <T : HTMLTag> ParentTag<T>.react(block: RBuilder.() -> Unit): ReactTag<T> { val reactTag = ReactTag<T>(block) tags += TagWithParent<ReactTag<T>, T>(reactTag, ReactTag<T>::visit, ReactTag<T>::visit) return reactTag }

サルマンのマーク

別のタッチ。すでに言語のコアから特別なアノテーション@DslMarkerが立っている特別な傷のアノテーションを持つ特別に傷ついたインターフェースからParentTagとTagWithParentを継承する必要があります。

 @DslMarker annotation class StyledTableMarker @StyledTableMarker interface Tag

これは、コンパイラが次のような奇妙な呼び出しを記述できないようにするために必要です。

 td { td { } } tr { thead { } }

しかし、誰がそのようなことを書くことを考えるだろうかは不明です...

戦いに！

記事の最初から表を作成する準備はすべて整っていますが、このコードはすでにReactDomとHTMLの両方を生成します。どこでも一度実行して書いてください！

 fun Table.renderUniversalTable(search: String?, onChangeSearch: (String?) -> Unit) { thead { tr { th { attrs.colSpan = 2 attrs.style { border = "solid" borderColor = "red" } +":" react { search(search, onChangeSearch) //(*) } html { +(search?:"") } } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } }

（*）に注意してください-ここで、検索機能はReactのテーブルの元のバージョンとまったく同じです。すべてを新しいdslに転送する必要はなく、一般的なタグのみを転送します。

そのようなコードの結果はどのように機能しますか？ここに私のプロジェクトからのレポートのPDF印刷の例を示します。当然、すべての数字と名前をランダムに置き換えました。比較のために、同じページのPDFプリントアウトですが、ブラウザによるものです。ページ間でテーブルを分割してからテキストをオーバーレイすることによるアーティファクト。

dslを作成すると、使用形態のみを目的とした多くのコードが追加されます。さらに、多くのKotlin機能が使用されていますが、これは日常生活でも考えられません。

おそらく他の場合では異なるかもしれませんが、この場合、私は取り除くことができなかった多くの重複もありました（私が知る限り、JetBarinsはコード生成を使用してHTMLライブラリを記述します）。

しかし、React and HTML apiと外観がほぼ同じdslを作成することがわかりました（ほとんど覗き見ませんでした）。興味深いことに、dslの便利さとともに、レンダリングを完全に制御できます。別のページにページタグを追加できます。印刷時に「アコーディオン」を展開できます。そして、サーバー上でこのコードを再利用し、検索エンジン用にすでにHTMLを生成する方法を見つけることができます。

PS確かに、PDFを簡単に印刷する方法があります

記事のソースとカブ

Kotlinに関する他の記事：

Kotlinからの後味、パート1

Kotlinの後味、パート2

Kotlinの後味、パート3。コルーチン-プロセッサー時間の共有

Kotlin + React vs Javasript + React

Kotlinの別のDSLまたはReactからPDFを印刷する方法