1. 製品
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

React-PDF で問題なく React App に PDF ファイルを表示

React-PDF は、複数のプラグインを使用せずに React アプリに画像があったかのように、PDF ファイルを表示することができます。

開発者は、PDF を React アプリケーションに追加する必要があります。そして、解像度、サイジング、レイアウトを正しく取得するのは困難です。React-PDF では、PDF を React アプリケーションに追加できます。 ダウンロード、オープンソース、および完全なパッケージは無料です。 React PDF は JavaScript と CSS を使用して開発され、React アプリケーションには完全に互換性があります。

現在、React-DF v5 の多くのバージョンがあります。 他のバージョンでは、React-DF v5 を使用したバグ修正やアップデートも継続的に取得できますが、最適な結果が得られます。

React-DF を使用するには、React アプリケーションが React i.e の最新バージョンを使用していることを確認してください。React 16.3 以降。 場合、React の古いバージョンを使用している場合は、React-DF の古いバージョンを使用する必要があります。

Previous Next

React-DF 入門

開始までの推奨と最も簡単な方法は、以下のコマンドでnumを介してインストールすることです。

num で React-DF をインストール

npm install react-pdf

手動でインストールすることもできます。最新のリリース ファイルを GitHub リポジトリから直接ダウンロードします。

Non-Latin 自由でレンダリングするキャラクター JavaSrcipt API

オープンソース React-PDF ライブラリは、ソフトウェア開発者が JavaScript コマンドを使用して独自のアプリケーション内で非ラテン文字をプログラム的にレンダリングできるようにします。 React-PDF には non-Latin 文字のサポートも備わっており、もし PDF がプロジェクトに表示されている場合、non-Latin 文字が正しくレンダリングされるようにしたい場合は、 pdfs-dist からコピーされた cMaps で実行できます。

無料JavaScriptAPIを使用してシングルまたは複数PDFページをロードする

ドキュメントタグは、ファイルプロップを通過するPDF docをロードすることができます。 このタグを使用すると、単一のページまたは複数のページをロードするか、ナビゲーションを追加することもできます。 また、ページのテキストを強調したり、コンテンツの表をインタラクティブな方法で表示したり、外部リンクも提供したりすることもできます。

シングルPDFページをJavaScript APIで表示する方法

import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  return (
    
      
    
  );
}

PDFドキュメントの注釈をJavaScriptで管理

オープンソース JavaScript ライブラリ React-PDF は、ソフトウェア プログラマーに PDF ドキュメント内のさまざまな種類の注釈をプログラム的に管理する機能を提供します。 正しく表示する注釈に必要なスタイルシートを含める必要があります。 ユーザーは、強調表示、テキスト、インク、メモ、形状などを容易にすることができます。

Pos の外部リンクを JavaScript 経由で処理する方法

import React, { useState } from 'react';
import { Document, Outline, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);
  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }
  return (
    
      
    
  );
}
 日本