1. 製品
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

オープンソースの JavaScript API を介して PDF を生成

PDF ファイルを作成および変換するためのオープン ソース JavaScript ライブラリ。JavaScript を介してグラフィックスとテキストを PDF に追加します。

JSPDF は、PDF ドキュメントの作成と管理のためのオープン ソースの HTML5 クライアント側ソリューションです。レポート、証明書、発券などの優れた機能をサポートしています。 PDF は Web 全体で非常に人気があり、ほぼすべての企業が PDF を使用してドキュメントやレポートを共有しています。いくつかのコマンドを使用するだけで、独自のアプリケーション内のすべての優れた機能にアクセスして再利用できます。 

JsPDF ライブラリの優れた点は、ユーザーがダウンロード ボタンをクリックすると PDF ファイルが生成されることです。 PDF ドキュメントの生成、図形の描画、PDF ファイルへの画像の挿入、PDF へのページの追加、テキストの追加と表示、PDF としてのマップのエクスポート、HTML から PDF への変換など、いくつかの優れた機能のサポートが含まれています。

Previous Next

JsPDF の概要

開始するための推奨される最も簡単な方法は、CDN ホスト ライブラリをページにドロップすることです。以下にコマンドを示します。

インストールコードを使用

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

JavaScript ライブラリによる PDF ドキュメントの生成

JsPDF は、PDF ドキュメントの生成機能と、JavaScript アプリケーション内での変更機能を提供します。簡単に PDF ドキュメントを生成し、それに新しいページを追加できます。新しいドキュメントの作成中に、ドキュメントの方向、単位、およびデフォルトのページ形式を定義できます。 PDF が生成されると、簡単に新しいページを追加したり、画像を挿入したりできます。

JavaScript を使用して PDF ドキュメントを作成する

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

JavaScript による PDF ドキュメントへのテキストの挿入

JsPDF API を使用すると、JavaScript 開発者は PDF ドキュメント内にテキストを追加して表示できます。テキストを描画するには、フォント名を定義する必要があります。利用可能なフォントから選択できます。フォント ファミリーとフォント スタイルを変更することも可能です。その後、フォント サイズ、テキストの色などを定義できます。

JavaScript を使用して既存の PDF にテキストを追加する

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

JavaScript による PDF ドキュメントへのグラフィックの追加

JsPDF ライブラリを使用すると、JavaScript プロフェッショナルは PDF ドキュメント内にグラフィックを描画できます。グラフィックは常にコンテンツの価値を高めます。まず、描画された図形の塗りと線の色を設定する必要があります。ストローク幅も設定できます。すべての形状描画関数は、中心点の座標を最初の 2 つのパラメーターとして受け取ります (三角形を除く)。また、最後のパラメーター描画スタイルも使用します。 2 つの半径または円を渡すことで、1 つの半径のみを渡すことで、三角形を、各コーナーの座標などを渡すことで、楕円を描くことができます。

JavaScript を使用して PDF に画像を追加する

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 日本