実現したいこと
pdfを日本語で生成したいです。
pdf-libとpdf-lib/fontkitをインポート済み。使用言語はHTML,SCSS,Typescript。Angularを使用しています。
openPDF関数とその中で呼び出されるcreatePDF関数とを作成して、ボタンを押すと今まで保持しておいたデータをPDFに書きだせるようにする予定です。
発生している問題・分からないこと
fontkitを使わない、StandardFont、非日本語でのPDF出力はうまくいくのに、fontkitを使うと以下が起こる。
１. PDFContext.jsファイルが 'pako' に依存しているという警告がなくならない。
２. 読み込んだ日本語フォントファイルが404Notfoundといわれる。
３． const font = await pdfDoc.embedFont(await (await fetch('フォントファイル名')).arrayBuffer());のところでエラーが出て中断される。
エラーメッセージ
error
11. 2Warning: C:～～ファイル名～～\node_modules\pdf-lib\es\core\PDFContext.js depends on 'pako'. CommonJS or AMD dependencies can cause optimization bailouts. 3For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies 4 5 62. 7Failed to load resource: the server responded with a status of 404 (Not Found) 8core.mjs:10614 9 10３． 11Failed to load resource: the server responded with a status of 404 (Not Found) 12pdf.service.ts:20 13core.mjs:10614 ERROR Error: Uncaught (in promise): TypeError: fontkit.create is not a function 14TypeError: fontkit.create is not a function 15 at Function.<anonymous> (CustomFontEmbedder.js:37:58) 16 at step (tslib.es6.js:100:1) 17 at Object.next (tslib.es6.js:81:46) 18 at tslib.es6.js:74:1 19 at new ZoneAwarePromise (zone.js:1411:21) 20 at __awaiter (tslib.es6.js:70:1) 21 at CustomFontEmbedder.for (CustomFontEmbedder.js:33:25) 22 at PDFDocument.<anonymous> (PDFDocument.js:881:72) 23 at step (tslib.es6.js:100:1) 24 at Object.next (tslib.es6.js:81:46) 25 at resolvePromise (zone.js:1193:31) 26 at zone.js:1100:17 27 at zone.js:1116:33 28 at asyncGeneratorStep (asyncToGenerator.js:6:1) 29 at _throw (asyncToGenerator.js:25:1) 30 at _ZoneDelegate.invoke (zone.js:368:26) 31 at Object.onInvoke (core.mjs:11083:33) 32 at _ZoneDelegate.invoke (zone.js:367:52) 33 at Zone.run (zone.js:129:43) 34 at zone.js:1257:36 35handleError @ core.mjs:10614 36Show 1 more frame 37Show less
該当のソースコード
Typescript
1import { Injectable , EventEmitter} from '@angular/core';2import { PDFDocument, StandardFonts,PDFPage, rgb } from 'pdf-lib';3import * as fontkit from '@pdf-lib/fontkit';4 5@Injectable({6 providedIn: 'root'7})8 9export class PdfService {10 pdfCreated: EventEmitter<Blob> = new EventEmitter<Blob>(); 11 12 constructor() { }13 14 async createPDF(history:{formula: string, result:string}[]) {15 const pdfDoc = await PDFDocument.create(); 16 pdfDoc.registerFontkit(fontkit);17 const response = await fetch('./src/assets/font/DotGothic16-Regular.ttf');18 19 const fontByte = await response.arrayBuffer();20 const font = await pdfDoc.embedFont(fontByte);21 22 23 //A424 const page = pdfDoc.addPage([842, 595]);25 const { width, height } = page.getSize();26 const fontSize = 30;27 28 page.drawText(title);29 history.forEach((element,index)=>{30 const yPosition = height - (index + 1) * fontSize; // y座標の位置を計算31 page.drawText(`${element.formula} = ${element.result}`,{32 x: 50,33 y: yPosition,34 size: fontSize,35 font: font,36 })});37 38 39 const pdfBytes = await pdfDoc.save();40 console.log("7"); 41 42 const blob = new Blob([pdfBytes], { type: 'application/pdf' });43 this.pdfCreated.emit(blob);44 45 return blob;46 47 }48 49 async openPDF(history:{formula:string,result:string}[]){50 const blob = await this.createPDF(history);51 const url = URL.createObjectURL(blob);52 window.open(url);53 }54｝
試したこと・調べたこと
上記の詳細・結果
https://github.com/Hopding/pdf-lib/issues/195 より、"esModuleInterop": true もしくは"allowSyntheticDefaultImports": true を tsconfig.jsonの"compilerOptions" section に入れてみましたが両方うまくいきませんでした。
また、そのあとに続く回答のほうも試しましたがErrorは消えませんでした。
補足
特になし
0 コメント