反応に反応するPDFの生成

執筆Hussain Arif ✏️
あなたは成功したオンラインビジネスを所有していると仮定します.そのような場所では、請求書を生成し、お客様にメールする必要があります.各バイヤーにレシートを作成するには、次の手順を実行する必要があります.

あなたのワープロを開けて、ユーザーの個人情報をペーストしてください

ユーザの購入をテーブルに書き、合計を計算する

このファイルをダウンロードしてPDF形式に変換

このドキュメントをユーザにメールする

そうでしょう.しかし、これを考慮してください:あなたが1日で何百もの顧客を得るならば、どうですか?あなたが同じプロセスを何度も繰り返しているので、これは多くの時間とエネルギーを浪費します.では、どうやってこの問題を緩和するのですか?
この問題を解決する最良の方法は、APIを使用してこの操作を自動化することです.ここはどこですreact-pdf 入る.これは、オープンソース、開発者が反応環境でPDF文書を生成することができます使いやすいライブラリです.
この記事では、あなたはreact-pdf 図書館.次の概念をカバーします.

Simple usage

Fundamental components

Embedding links

Displaying annotations

Displaying graphics in a Canvas

Displaying SVG images

Rendering JPG or PNG photos

Advanced concepts

Using flex boxes

Page breaks

Dynamic page content

インストール

対応するPDFパッケージをインストールするには、次のコマンドを実行します.

npm i @react-pdf/renderer

簡単な使い方

次のコードブロックは、ブラウザで基本的なPDFドキュメントをレンダリングします.

import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#d11fb6",
    color: "white",
  },
  section: {
    margin: 10,
    padding: 10,
  },
  viewer: {
    width: window.innerWidth, //the pdf viewer will take up all of the width and height
    height: window.innerHeight,
  },
});

// Create Document Component
function BasicDocument() {
  return (
    <PDFViewer style={styles.viewer}>
      {/* Start of the document*/}
      <Document>
        {/*render a single page*/}
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>Hello</Text>
          </View>
          <View style={styles.section}>
            <Text>World</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
}
export default BasicDocument;

このコードからのいくつかの推論

The StyleSheet モジュールは、開発者が自分のPDFドキュメントにCSSコードを適用することができます.ここでは、我々は我々のページの背景色とフォントの色を変更する反応を指示している

さらにviewer オブジェクトは、width and height プロパティ.結果として、これは、我々はページ上のすべてのスペースを取るためにブラウザのPDFビューアが欲しいPDFを反応させる

名前が示す通りPDFViewer コンポーネントは、ブラウザ上でPDFビューアをレンダリングします

テストしましょう!次のステップとしてBasicDocument DOMのようなコンポーネント

import BasicDocument from "./BasicDocument";
function App() {
  return (
    <div className="App">
      <BasicDocument />
    </div>
  );
}
export default App;

ビューアの空き領域を減らすこともできます.

const styles = StyleSheet.create({
  viewer: {
    width: window.innerWidth / 3,
    height: window.innerHeight / 2,
  },
  //further code...
});

このスニペットでは、ビューポートのwidth and height プロパティ.これはページ上の利用可能なサイズを小さくします.

基本構成要素

埋め込みリンク

を使用してアンカーリンクを表示できます L component . これはユーザーをウェブサイトにリダイレクトする場合に便利です.

import { Link } from "@react-pdf/renderer";
<Text>
  <Link src="www.facebook.com">Go to Facebook</Link>
</Text>

ここでは、我々はsrc Facebookのウェブサイトへのprop.ユーザーがテキストのこの部分をクリックすると、アプリケーションは、ページにそれらをリダイレクトされます.

注釈の表示

ドキュメントに注釈を付けるには、 Note コンポーネント.この要素の1つの重要なユースケースは、ファイルにコメントを表示する必要がある場合です.

import { Note } from "@react-pdf/renderer";
<Note>This will take the user to Facebook</Note>

キャンバスにグラフィックスを表示する

The Canvas コンポーネントは、ユーザーがページにコンテンツを描画することができます.これはSVG形式で簡単な図とロゴを表示するのに適しています.
このコードスニペットは、ページに三角形を描画します.

import { Canvas } from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  canvas: {
    backgroundColor: "black",
    height: 500,
    width: 500,
  },
});
<Canvas
  style={styles.canvas}
  paint={
    (painterObject) =>
      painterObject
        .save()
        .moveTo(100, 100) //move to position 100,100
        .lineTo(300, 100) //draw a line till 300, 100
        .lineTo(300, 300) //draw another line till 300,300
        .fill("red") //when the diagram is drawn, set the background color to pink
  }
/>

上記のスニペットではCanvas 図を表示するコンポーネント.The paint propはコールバック関数です.パラメータの一つはpainterObject 引き数で、描画メソッドへのアクセスを与えます.

SVG画像の表示

反応PDFもバンドル SVG component 描くSVG diagrams . まさにCanvas , 簡単なダイアグラムのレンダリングに使用できます.
このコードはページに線を描画します.

import { Line, Svg } from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  line: {
    x1: "0", //starting coords are x1 and y1
    y1: "0",
    x2: "200", //ending coords:
    y2: "200",
    strokeWidth: 2,
    stroke: "rgb(255,255,255)", //stroke color
  },
});
<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Line style={styles.line} />
</Svg>

こちらでは Line ドキュメント内の行をレンダリングします.注意Line がSvg コンポーネント.

また、 Polygon 閉じた形をレンダリングするコンポーネント

<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Polygon
    points="100,100 200,100 200,250 100,250"
    fill="white" //color of background
    stroke="black" //color of border
    strokeWidth={10} //border thickness
  />
</Svg>

The points prop座標のデータセットを受け入れます.これは、アプリケーションのグラフィックをレンダリングに役立ちます.

JPGまたはPNG写真のレンダリング

The Image コンポーネントは、ネットワーク上またはローカルディスク上のイメージを挿入する機能を提供します.これは、複雑なダイアグラムまたはスクリーンショットを表示するために最適です.
コードのこのブロックは、PDFで500ピクセル単位の500ピクセルイメージをレンダリングします.

import { Image } from "@react-pdf/renderer";
const styles = StyleSheet.create({
  image: {
    width: 500,
    height: 500,
  },
});
<Image
  style={styles.image}
  src="https://image.shutterstock.com/image-photo/tiny-floating-house-on-lake-600w-1980476267.jpg"
/> 

The src propはレンダリングする画像のソースURLを含んでいます.

先進概念

フレックスボックスの使用

CSSと同じように、PDFを開発者はflex プロパティを指定します.これは、デバイスの画面サイズに応じてあなたのドキュメントをスケールアップまたはダウンしたい場合に便利です.

// Create styles. Notice that we have specified a flex direction.
const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
  },
});
<Page size="A4" style={styles.page}>
  <View style={{ backgroundColor: "black", flex: 1 }}></View>
  <View style={(styles.section, { backgroundColor: "pink", flex: 1 })}></View>
</Page>

このコードの中でflex 両方のプロパティView コンポーネント.これは、ページの半分が黒の背景色を持ち、他の半分がピンクの色の背景を持つことを意味します.

ページブレーク

ページブレークは、特定の要素が常にページの上部に表示されるようにするために便利です.
を介してページのブレークを有効にすることができますbreak 以下のようにprop :

// Create styles
const styles = StyleSheet.create({
  text: {
    fontSize: 40,
  },
});
// Create Document Component
<Page>
  <Text break style={styles.text}>
    First PDF break
  </Text>
  <Text break style={styles.text}>
    Second break
  </Text>
</Page>

ダイナミックなページ内容

を使用して動的なテキストをレンダリングすることができますrender の柱Text 以下のようなコンポーネント:

<Document>
  <Page size="A4">
    <Text
      style={styles.text}
      render={({ pageNumber, totalPages }) =>
        `Page ${pageNumber} of ${totalPages}`
      }
      fixed
    />
  </Page>
  <Page>
    <Text> Hello, second page!</Text>
  </Page>
</Document>

ここでrender propには二つの引数があります:pageNumber (ページの現在のインデックス)totalPages (このドキュメントが含むページの総数).両方の値をクライアントに表示します.

国立天文台render 関数は<Text /> 要素:ページラッピング処理のレイアウト、およびドキュメントがどのように多くのページを持っているかを知った後の別の1つ.したがって、アプリケーションのパフォーマンスが問題ではない場合に使用します.
また、render 我々の支柱View 要素

<View render={({ pageNumber }) => (
    //detect if user is NOT on an even page:
        pageNumber % 2 === 0 && (
          <View style={{ background: 'red' }}>
            {/*If condition is fulfilled, display this component*/}
            <Text>I'm only visible in odd pages!</Text>
          </View>
        )
      )} />

結論

この記事では、我々は反応PDFライブラリの基礎をカバーした.それは安全で堅牢であるだけでなく、それも軽量です.そして、このようにテーブルにパフォーマンスをもたらします.
読書ありがとうございます!ハッピーコーディング!

フル可視性の生産反応アプリ

ユーザーが再生するのが難しい問題を経験するとき、特に反応する反応アプリケーションは難しくありえます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを浮上させて、遅いネットワーク要求と成分負荷時間を追跡してください.try LogRocket .

LogRocket ウェブアプリのDVRのような、文字通りあなたの反応アプリで起こるすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
近代化する方法あなたの反応アプリをデバッグするstart monitoring for free