PDF-LIBのtextfieldの日本語設定について

実現したいこと

PDF-LIBのPDFTextField内のメソッドsetTextで、日本語を入力したいのですが、
可能なのでしょうか。もし可能であれば実装方法を教えていただけますでしょうか。

前提

JavaScriptにてPDF-LIBを使用したPDF出力を構築しています。
あらかじめPDFテンプレートを作成し、フォームのテキストフィールドを
入れています。
drowTextでのテキスト描画については日本語を出力する事ができるのですが、
TextField内のsetTextで日本語を指定するとエンコードができない旨の
エラーが発生します。

発生している問題・エラーメッセージ

pdf-lib.min.js:15 Uncaught (in promise) Error: WinAnsi cannot encode "あ" (0x3042)
at gn.encodeUnicodeCodePoint (pdf-lib.min.js:15:182172)
at t.encodeTextAsGlyphs (pdf-lib.min.js:15:275139)
at t.encodeText (pdf-lib.min.js:15:274006)
at t.encodeText (pdf-lib.min.js:15:446053)
at Lc (pdf-lib.min.js:15:437900)
at $c (pdf-lib.min.js:15:442696)
at r.updateWidgetAppearance (pdf-lib.min.js:15:473346)
at r.updateAppearances (pdf-lib.min.js:15:473222)
at r.defaultUpdateAppearances (pdf-lib.min.js:15:473020)
at e.updateFieldAppearances (pdf-lib.min.js:15:478428)
encodeUnicodeCodePoint @ pdf-lib.min.js:15
t.encodeTextAsGlyphs @ pdf-lib.min.js:15
t.encodeText @ pdf-lib.min.js:15
t.encodeText @ pdf-lib.min.js:15
Lc @ pdf-lib.min.js:15
$c @ pdf-lib.min.js:15
r.updateWidgetAppearance @ pdf-lib.min.js:15
r.updateAppearances @ pdf-lib.min.js:15
r.defaultUpdateAppearances @ pdf-lib.min.js:15
e.updateFieldAppearances @ pdf-lib.min.js:15
(anonymous) @ pdf-lib.min.js:15
(anonymous) @ pdf-lib.min.js:15
(anonymous) @ pdf-lib.min.js:15
(anonymous) @ pdf-lib.min.js:15
i @ pdf-lib.min.js:15
e.save @ pdf-lib.min.js:15
createPdf @ index:138
await in createPdf (async)
(anonymous) @ index:142
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2

該当のソースコード

JavaScript

1<script src="/pdf-lib_parts/pdf-lib.min.js"></script>2<script src="/pdf-lib_parts/fontkit.umd.js"></script>3<script>4 5$("#button_output").on('click',6function(){7 8 // PDFLibのオブジェクト取得9 const { PDFDocument, rgb } = PDFLib;10 // フォントファイルのパス11 const FONT_URL = '/pdf-lib_parts/ipaexg.ttf';12 // PDFファイルのパス13 const PDF_URL = '/pdf_template/repair_field.pdf';14 // 非同期関数15 async function createPdf() {16 // テンプレートPDFの取得17 const existingPdfBytes = await fetch(PDF_URL).then(res => res.arrayBuffer());18 19 // PDFの読み込み20 const pdfDoc = await PDFDocument.load(existingPdfBytes);21 // フォントキットの登録22 pdfDoc.registerFontkit(fontkit);23 // フォントデータの読み込み24 const fontData = await pdfDoc.embedFont(await (await fetch(FONT_URL)).arrayBuffer(),{subset:true});25 // テンプレートのPDFファイル取得26 const pages = pdfDoc.getPages();27 // 1ページ目28 const page = pages[0];29 // PDFの縦横幅取得30 const { width, height } = page.getSize(); 31 //文字色32 const font_color = rgb(0.1, 0.1, 0.1);33 const form = pdfDoc.getForm();34 35 const houkokusya = form.getTextField('houkokusya');36 houkokusya.setText('abcd');//これは成功します。37 houkokusya.setText('abcdあ');//日本語が入っている為、失敗します。38 39 //drawTextであれば日本語でも問題ないです。40 page.drawText('あいうえお' , {41 x: 120,42 y: height - 195,43 size: 11,44 font: fontData,45 color: font_color 46 });47 48});49

試したこと

新しくtextFieldをCreatして、addToPageでfontを指定してもダメでした。

const textField = form.createTextField('new'); textField.addToPage(page, { x: 50, y: 75, width: 200, height: 100, textColor: rgb(1, 0, 0), backgroundColor: rgb(0, 1, 0), borderColor: rgb(0, 0, 1), borderWidth: 2, font: fontData, }); textField.setText('abcdあ');

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント