jsPDF
v2.5.2
JavaScript で PDF を生成するライブラリ。
Twitter: @MrRio で私を見つけていただくか、私の会社の Web サイトにアクセスしてコンサルティングを受けてください。
jsPDF は現在、図作成の専門家である yWorks によって共同保守されています。
推奨: npm から jsPDF を取得します。
npm install jspdf --save
# or
yarn add jspdfあるいは、CDN からロードします。
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >または、常に unpkg 経由で最新バージョンを取得します
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script >このパッケージのdistフォルダーには、さまざまな種類のファイルが含まれています。
core-jsからインポートするだけであり、umd バリアントは自己完結型です。通常、import ステートメントで正確なファイルを指定する必要はありません。ビルドツールまたはノードが適切なファイルを自動的に判断するため、「jspdf」をインポートするだけで十分です。
これで、ドキュメントの作成を開始する準備が整いました。
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" ) ;用紙のサイズ、方向、単位を変更したい場合は、次の操作を行うことができます。
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ; const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ; const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;jsPDF の一部の関数にはオプションの依存関係が必要です。たとえば、 htmlメソッドはhtml2canvasに依存し、文字列 HTML ドキュメントが指定された場合はdompurify 。 JsPDF は、必要に応じてそれらを動的にロードします (それぞれのモジュール形式、たとえば動的インポートを使用)。 Webpack などのビルド ツールは、オプションの依存関係ごとに個別のチャンクを自動的に作成します。アプリケーションがオプションの依存関係を使用しない場合は、それらを外部依存関係として定義することで、Webpack がチャンクを生成しないようにすることができます。
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; Vue CLIプロジェクトでは、 vue.config.jsファイルの configureWebpack プロパティまたはchainWebpack プロパティを介して外部を定義できます (最初に新しいプロジェクトで作成する必要があります)。
Angularプロジェクトでは、カスタム Webpack ビルダーを使用して外部を定義できます。
React ( create-react-app ) プロジェクトでは、react-app-rewired または ejecting を使用して外部を定義できます。
jsPDF は、他のサードパーティ ライブラリと同様にインポートできます。これは、すべての主要なツールキットとフレームワークで機能します。 jsPDF は、TypeScript プロジェクト用のタイピング ファイルも提供します。
import { jsPDF } from "jspdf" ;次のように jsPDF を meteor プロジェクトに追加できます。
meteor add jspdf:core
jsPDF が機能するには、最新のブラウザ API が必要です。 Internet Explorer などの古いブラウザで jsPDF を使用するには、ポリフィルが必要です。次のように、必要なすべてのポリフィルをロードできます。
import "jspdf/dist/polyfills.es.js" ;あるいは、事前にバンドルされているポリフィル ファイルをロードすることもできます。ポリフィルを複数回ロードすることになる可能性があるため、これはお勧めできません。小規模なアプリケーションや簡単な POC にはまだ有効かもしれません。
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > PDF の 14 個の標準フォントは ASCII コードページに制限されています。 UTF-8 を使用したい場合は、必要なグリフを提供するカスタム フォントを統合する必要があります。 jsPDF は .ttf ファイルをサポートします。したがって、たとえば PDF に中国語のテキストを含めたい場合は、フォントに必要な中国語のグリフが含まれている必要があります。したがって、フォントが必要なグリフをサポートしているかどうかを確認してください。サポートしていないと、正しいテキストの代わりに文字化けが表示されます。
フォントを jsPDF に追加するには、/fontconverter/fontconverter.html にあるフォントコンバータを使用します。 fontconverter は、base64 でエンコードされた文字列として提供された ttf ファイルの内容と jsPDF 用の追加コードを含む js ファイルを作成します。この生成された js ファイルをプロジェクトに追加するだけです。これで、コード内で setFont-method を使用し、UTF-8 でエンコードされたテキストを記述する準備が整いました。
あるいは、 fetchまたはXMLHttpRequestを使用して *.ttf ファイルのコンテンツをバイナリ文字列としてロードし、フォントを PDF ファイルに追加することもできます。
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ; yWorks フォークとのマージ以来、多くの新機能が追加されました。ただし、それらの一部は API を破壊するものであるため、2 つの API モード間で API 切り替えが行われます。
を呼び出すことで 2 つのモードを切り替えることができます。
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF は、コールバックの実行後、自動的に元の API モードに戻ります。
あなたの質問が Stackoverflow https://stackoverflow.com/questions/tagged/jspdf ですでに処理されているかどうかを確認してください。 jspdfタグを使用して、お気軽に質問してください。
機能要望やバグ報告などは課題として大歓迎です。バグレポートは次のガイドラインに従う必要があることに注意してください。
jsPDF はコミュニティの助けなしでは生きていけません。機能が不足していると思われる場合、またはバグを見つけた場合は、1 ～ 2 時間の時間を割いてプル リクエストを準備できるかどうかを検討してください。このプロジェクトに単に興味があり、支援したい場合は、未解決の問題、特に「バグ」のラベルが付いている問題をご覧ください。
jsPDF のビルドとテストに関する情報は、コントリビューション ガイドで見つけることができます。
著作権 (c) 2010-2021 James Hall、https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH、https://www.yworks.com/
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
