WebでPDFをエクスポートする関数を実行したいと思います。 JSPDFは多くの人に推奨されていることがわかりました。残念ながら、それは中国語をサポートしていません。最後に、PDFMakeを見つけました。これにより、この問題をうまく解決しました。その効果は、最初にhttp://pdfmake.org/playground.htmlで見ることができます。使用中、写真を挿入することは比較的面倒なことであることがわかりました。
これらの問題に応じて、この記事の主な内容は3つの部分に分けることができます。
•PDFMakeの基本的な使用方法。
•中国の問題を解決する方法。
•画像アドレスを指定して写真を挿入する方法。
pdfmakeの基本的な使用方法
1。次の2つのファイルが含まれています
<script src = "build/pdfmake.min.js"> </script> <スクリプトsrc = "build/vfs_fonts.js"> </script>
2。JSコードでドキュメント解像度オブジェクトを宣言します。これは、PDFMake独自の用語です。簡単に言えば、少なくともコンテンツ属性を含むオブジェクトを作成することです。次に、PDFMakeメソッドを呼び出してPDFをエクスポートできます。次のコードを参照してください。
<script type = "text/javascript"> // Document-Definition Object var dd = {content：['1 paragraph'、 '別の段落、今回は、この行は少なくとも2行に分割されることを確認するためにもう少し長く']}; // pdf pdfmake.createpdf（dd）.download（）; </script>上記の例に従って、ダウンロードするプロンプトファイルが表示されます。 PDFMakeに関する完全なチュートリアルについては、PDFMakeプロジェクトにログインして表示してください。
PDFMakeは中国語をサポートしています
3つのステップ：
1. PDFMakeプロジェクトWebサイトに移動し、すべてのプロジェクトをダウンロードしてから、プロジェクトディレクトリを入力して、Microsoft Yahei.ttfなど）をExamples/Fontsディレクトリに配置し、Grunt Dump_Dirを使用して新しいVFS_FONTS.JSファイルを生成します。
上記の説明から、プロジェクトはGruntを通じて管理されていることがわかります。関連する知識がない場合は、オンラインで最初に個別指導を受けてください。
Grunt Dump_Dirコマンドは、Fontsディレクトリ内のすべてのファイルをパッケージ化するため、役に立たないファイルを入れないでください。
Microsoft Yahei.ttfはオンラインで検索され、Windowsコンピューターシステムディスクの下にフォントが保存されているディレクトリも見つかります。
2。独自の例コードに戻り、JSコードのPDFMakeのフォントオブジェクトを変更し、使用するフォントを宣言します。
pdfmake.fonts = {roboto：{normal： 'roboto-regular.ttf'、bold： 'roboto-medium.ttf'、italics： 'roboto-italic.ttf'、boldtalics： 'roboto-italic.ttf'、boldtalics： 'roboto-ittf' {microsoftf '、microsoftf' yahei.ttf '、bold：' microsoft yahei.ttf '、イタリック：' Microsoft yahei.ttf '、}};3.デフォルトで使用するフォントをドキュメント解像度オブジェクトで宣言します。具体的には、オブジェクトを宣言することです。コンテンツ属性に加えて、defaultStyle属性も必要です。 DefaultStyleの下には別のフォント属性があります。
var dd = {content：['中国と英語のテスト'、「別の段落」、今回は少し長く、この行は少なくとも2行に分割される ']、defaultStyle：{font：' microsoft yahei '}};以下は、上記の手順に基づいた完全な例ソースコードです。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title>私の最初のエクスポートpdf </title> <script src = "build/pdfmake.min.js"> </script> <script src = "burtion/vfss.js"> {content：['中国と英語のテスト'、「別の段落、今回は確かに少し長く、この行は少なくとも2行に分割される ']、defaultStyle：{font：' microsoft yahei '}}; pdfmake.fonts = {roboto：{normal： 'roboto-relign.ttf'、bold： 'roboto-medium.ttf'、italics： 'roboto-italic.ttf'、boldalics： 'roboto-italic.ttf'、boldalics： 'roboto-ittf'、}; pdfmake.createpdf（dd）.download（）; } </script> </head> <body> <button onclick = "down（）">ダウンロード</button> </body> </html>画像を挿入します
画像の挿入に関しては、JSPDFでは最初に画像をデータURLに変換する必要があり、PDFMakeは直接パスの指定を許可します。これは非常に便利であるように見えますが、これは条件付きであり、サーバーとして使用するか、VFS_FONTS.JSで画像を配置する必要があります。
この問題を解決するために、複数の画像アドレスを同時に渡すことができるImagedataurlの関数オブジェクトを書きました。すべての画像がロードされた後、Imagedataurl.oncompleteがトリガーされます。各画像のデータURLは、コールバックのthis.imgdataを介して削除されます。 PDFは、PDFMakeの要件に従って正しく生成できます。
Imagedataurlの原理は、H5のキャンバスタグに画像を描画し、キャンバスのdataurlを通して画像のデータURLを取得することです。使用する際には、ブラウザの互換性の問題に注意してください。
以下は、sampleimage.jpg、sampleage.jpg、sampleimage.jpgからPDFへの順番の記述の例です。 sampleage.jpgはテスト中に存在せず、PDFは直接無視されます。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title>私の2回目のエクスポートpdf </title> <script src = "build/pdfmake.min.js"> </script> <script src = "burtion/vfss.js"> < Imagedataurl（["sampleimage.jpg"、 "sampleimage.jpg"]）; x.oncomplete = function（）{var imgs = new Array（）; console.log（ "complete"）; for（this.imgdataのkey）{if（this.imgdata [key] == this.emptyobj）//存在しない写真を無視します。 imgs.push（{image：this.imgdata [key]}）; // pdfmakeの画像形式{image：image dataurl}} var dd = {content：['title'、imgs、]、}; pdfmake.createpdf（dd）.download（）; }} </script> </head> <body> <button onclick = "down（）"> download </button> <script> function imagedataurl（urls）{// urlsは文字列または文字列Array this.completenum = 0; this.totalnum = 0; this.imgdata = new Array（）; this.emptyobj = new object（）; this.oncomplete = function（）{}; this.getDataurl = function（url、index）{var c = document.createelment（ "canvas"）; var cxt = c.getContext（ "2d"）; var img = new Image（）; var dataurl; var p; p = this; img.src = url; img.onload = function（）{var i; var maxwidth = 500; varスケール= 1.0; if（img.width> maxwidth）{scale = maxwidth / img.width; c.width = maxwidth; c.height = math.floor（img.height *スケール）; } else {c.width = img.width; c.height = img.height; } cxt.drawimage（img、0、0、c.width、c.height）; p.imgdata [index] = c.todataurl（ 'image/jpeg'）; for（i = 0; i <p.totalnum; ++ i）{if（p.imgdata [i] == null）break; } if（i == p.totalnum）{p.oncomplete（）; }}; img.onerror = function（）{p.imgdata [index] = p.emptyobj; for（i = 0; i <p.totalnum; ++ i）{if（p.imgdata [i] == null）break; } if（i == p.totalnum）{p.oncomplete（）; }}; } if（urls instanceof array）{this.totalnum = urls.length; this.imgdata = new Array（this.totalnum）; for（key in urls）{this.getDataurl（urls [key]、key）; }} else {this.imgdata = new Array（1）; this.totalnum = 1; this.getDataurl（urls、0）; }} </script> </body> </html>JS（中国語および画像使用パスをサポートする）によるPDFプラグインをエクスポートする上記の方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。