49942


## 実現したいこと

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

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

* * *

## 調査した情報（ライブラリ）とメモ

  * React-PDF  
<https://github.com/diegomura/react-pdf>

  * PDFkit  
<https://github.com/foliojs/pdfkit>

  * pdf-image  
<https://github.com/mooz/node-pdf-image>

  * pdfmake  
<http://cly7796.net/wp/javascript/started-with-pdfmake/>  
<https://qiita.com/maecho/items/071abbb60dcbeabef7a6>


CC BY-SA 4.0
2018-11-02T02:12:08.443
49879
2019-01-23T08:26:39.367
2020-06-17T08:14:45.997
-1
30806
question
node.js reactjs pdf
ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい


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

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

それでも、既存のPDFをフォーマットとして使いたいのであれば、英語版の [Edit _existing_ PDF in a
browser](https://stackoverflow.com/questions/44073718)
という質問が参考になると思います。自分が使ったことがないので保証はできませんが、そこのコメントに書いてある
[PDFNetJS](https://www.pdftron.com/blog/webviewer/pdfnetjs-html5-pdf-viewer-
and-editor/)を使えば、フロントエンドでPDFの修正ができるのではないでしょうか。

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


CC BY-SA 4.0
2018-11-04T00:16:12.660
49942
2018-11-04T04:26:08.907
2018-11-04T04:26:08.907
15171
15171
49879
answer


@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>

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


CC BY-SA 4.0
2019-01-23T08:26:39.367
52251
2019-01-23T08:26:39.367
7934
49879
answer