2

実現したいこと

現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。
開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。

Cloud Functions(node.js)も利用しているので、node.js側でも解決できないものか調査を進めているのですが、実現方法ございますでしょうか??


調査した情報(ライブラリ)とメモ

2
  • もう、解決しましたでしょうか?
    – shinriyo
    Commented 2019年1月24日 0:59
  • こちらを参考にPDFの表示とダウンロードまではできましたが、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力することはできておりません。medium.com/@shivekkhurana/…
    – oke
    Commented 2019年1月25日 6:53

2 件の回答 2

2

PDFの編集は非常に手間の係る作業になります。既存のPDFをフォーマットに使う場合、その編集は注釈(Annotation)で値を入力して表示するのが一番楽だと思います。その場合でも、各々の値ごとに出力する位置を0.1mm単位で決める必要があります。もし、フォーマットが少しでも変更になれば、位置がずれてしまうため、位置を全部修正する必要があるのでメンテナンスも大変です。

そのため、既存のPDFを使わずに、HTMLで様式を作成してCloud FunctionsでPuppeteerを使ってPDFに変換した方ははるかに楽にできると思います。

それでも、既存のPDFをフォーマットとして使いたいのであれば、英語版の Edit existing PDF in a browser という質問が参考になると思います。自分が使ったことがないので保証はできませんが、そこのコメントに書いてある PDFNetJSを使えば、フロントエンドでPDFの修正ができるのではないでしょうか。

印刷したいだけであれば、pdf.jsとpdf-annotate.jsを使えばできるように思います。

0

@okeさん
React(TypeScript)+pdfmakeのフロントエンドをのみで行う方法を知ってます。
最初、pdfmakeはサーバ必須と思いましたがなくてもなんとかできました。

TypeScriptを使わない場合はやりやすいです。
TypeScriptだと型を自分で作る必要がありました。

node(サーバサイド)があってもできますが、なくてもできます。

Reactのプロジェクトの環境は作るの面倒なので「create-react-app」を使いました。

Reactだけではないですが、PDFのは
http://blog.createfield.com/entry/2015/12/16/052221
これが参考になりました。

PDFを出力とはブラウザで表示させますか?
それともダウンロードのみでしょうか?

ブラウザで表示するときは「react-pdf」を使いました。
名前が似てますが、

×これじゃないです
https://github.com/diegomura/react-pdf

◯こっちです
https://github.com/wojtekmaj/react-pdf

とりあえず、私のやり方と同じで良ければ助けられます。
とりあえずやってみてわからなければ聞いてください。

4
  • ちなみにこちらのメリットとしては、どのブラウザでも同じPDFとなることですね。 フォントも何を使うか決めておいてください。フォントの作り方(JS用)もわかりますよ。
    – shinriyo
    Commented 2019年1月23日 8:40
  • PDFのブラウザの表示とダウンロードはpdf.jsとjspdfにて実現できました。しかし本題の既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力することはできておりません。
    – oke
    Commented 2019年1月25日 6:48
  • @okeさん pdfmakeを使いましたか?今は何にはまってますでしょうか? サンプルが公式にあるのでそれをみてやることをおすすめします。 pdfmake.org/playground.html
    – shinriyo
    Commented 2019年1月25日 7:12
  • 私がハマったのは、Reactで表示するときにimport { pdfjs } from 'react-pdf'; をしたものに ``` const pdfFonts = require('vendor/vfs_fonts.js'); const pdf = pdfMake; pdf.vfs = pdfFonts.pdfMake.vfs; pdf.fonts = { GenShinGothic: { normal: 'GenShinGothic-Normal.ttf', bold: 'GenShinGothic-Bold.ttf' } }; pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js; ``` とかですね。
    – shinriyo
    Commented 2019年1月25日 7:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。