PDFを生成する


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント PDF_header[15] = textData; pdf = ""; for (i=0; i<PDF_header.length; i++) pdf += PDF_header[i] + unescape("%0D%0A"); for (i=0; i<PDF_footer.length; i++) pdf += PDF_footer[i] + unescape("%0D%0A"); document.myFORM.pdfData.value = pdf;
説  明 PDF (Portable Document Format)はフォーマットが公開されているので、それに従ってデータを生成します。テキストフィールドに入力された英文字を基準としたPDFの中に埋め込み、そのデータをテキストエリアに出力します。スクリプト中でコメントで書いてある部分を変更すれば、好みのサイズ、位置、フォントで生成することができます。
サンプル <html> <head> <title>PDFを生成する</title> <script language="JavaScript"><!-- function makePDF(textData) { PDF_header = new Array(); PDF_footer = new Array(); PDF_header[ 0] = "%PDF-1.3"; PDF_header[ 1] = "1 0 obj << /Type /Catalog /Outlines 2 0 R /Pages 3 0 R >>"; PDF_header[ 2] = "endobj"; PDF_header[ 3] = "2 0 obj << /Type Outlines /Count 0 >>"; PDF_header[ 4] = "endobj"; PDF_header[ 5] = "3 0 obj << /Type /Pages /Kids [4 0 R] /Count 1 >>"; PDF_header[ 6] = "endobj"; PDF_header[ 7] = "4 0 obj << /Type /Page /Parent 3 0 R /MediaBox [0 0 612 792]"; PDF_header[ 8] = "/Contents 5 0 R /Resources << /ProcSet 6 0 R /Font << /F1 7 0 R >> >> >>"; PDF_header[ 9] = "endobj"; PDF_header[10] = "5 0 obj << /Length 73 >>"; PDF_header[11] = "stream"; PDF_header[12] = " BT"; PDF_header[13] = " /F1 48 Tf"; // 文字サイズを48ポイントに PDF_header[14] = " 10 700 Td ("; // (数学)座標(10,700)へ PDF_header[15] = "Hello World"; // ここを書き換え PDF_header[16] = ") Tj ET"; PDF_header[17] = "endstream"; PDF_header[18] = "endobj"; PDF_header[19] = "6 0 obj"; PDF_header[20] = "[/PDF /Text]"; PDF_header[21] = "endobj"; PDF_header[22] = "7 0 obj"; PDF_header[23] = "<< /Type /Font"; PDF_header[24] = "/Subtype /Type1"; PDF_header[25] = "/Name /F1"; PDF_header[26] = "/BaseFont /Helvetica"; // 基準フォントをHelveticaに PDF_header[27] = "/Encoding /MacRomanEncoding"; PDF_header[28] = ">>"; PDF_header[29] = "endobj"; PDF_footer[ 0] = "xref" PDF_footer[ 1] = "0 8" PDF_footer[ 2] = "0000000000 65535 f" PDF_footer[ 3] = "0000000009 00000 n" PDF_footer[ 4] = "0000000074 00000 n" PDF_footer[ 5] = "0000000120 00000 n" PDF_footer[ 6] = "0000000179 00000 n" PDF_footer[ 7] = "0000000364 00000 n" PDF_footer[ 8] = "0000000466 00000 n" PDF_footer[ 9] = "0000000496 00000 n" PDF_footer[10] = "trailer << /Size 8 /Root 1 0 R >>" PDF_footer[11] = "startxref" PDF_footer[12] = "625" PDF_footer[13] = "%%EOF" PDF_header[15] = textData; pdf = ""; for (i=0; i<PDF_header.length; i++) pdf += PDF_header[i] + unescape("%0D%0A"); for (i=0; i<PDF_footer.length; i++) pdf += PDF_footer[i] + unescape("%0D%0A"); document.myFORM.pdfData.value = pdf; } // --></script> </head> <body> 英文字を入れてください。<br> テキストエリアに作成されたPDFをテキストエディタ等で保存し(拡張子はpdf)<br> Acrobat Reader等で読み込ませてください。 <form name="myFORM"> 英文字:<input type="text" name="myText"> <input type="button" value="PDF生成" onClick="makePDF(document.myFORM.myText.value)"<br> <textarea rows="30" cols="100" name="pdfData"></textarea> </form> </body> </html>
補足説明 PDFのフォーマットについては「PDFリファレンス第2版」を参考にしました。(ISBN4-89471-338-1) C3004 6800円です。PostScriptリファレンス本などもあると解釈が楽になるかもしれません。

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA