├── client
├── .gitignore
├── src
│ ├── index.js
│ ├── App.css
│ └── App.js
├── public
│ └── index.html
├── package.json
└── README.md
├── server
├── .gitignore
├── result.pdf
├── package.json
├── index.js
├── documents
│ └── index.js
└── package-lock.json
└── README.md
/client/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/server/result.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adrianhajdin/tutorial_pdf_generation/HEAD/server/result.pdf
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './App';
5 |
6 | ReactDOM.render(React App
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | }
9 |
10 | .App-header {
11 | background-color: #282c34;
12 | min-height: 100vh;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | font-size: calc(10px + 2vmin);
18 | color: white;
19 | }
20 |
21 | .App-link {
22 | color: #61dafb;
23 | }
24 |
25 | @keyframes App-logo-spin {
26 | from {
27 | transform: rotate(0deg);
28 | }
29 | to {
30 | transform: rotate(360deg);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "proxy": "http://localhost:5000/",
6 | "dependencies": {
7 | "axios": "^0.18.0",
8 | "file-saver": "^2.0.0",
9 | "react": "^16.7.0",
10 | "react-dom": "^16.7.0",
11 | "react-scripts": "2.1.3"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test",
17 | "eject": "react-scripts eject"
18 | },
19 | "eslintConfig": {
20 | "extends": "react-app"
21 | },
22 | "browserslist": [
23 | ">0.2%",
24 | "not dead",
25 | "not ie <= 11",
26 | "not op_mini all"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const bodyParser = require('body-parser');
3 | const pdf = require('html-pdf');
4 | const cors = require('cors');
5 |
6 | const pdfTemplate = require('./documents');
7 |
8 | const app = express();
9 |
10 | const port = process.env.PORT || 5000;
11 |
12 | app.use(cors());
13 | app.use(bodyParser.urlencoded({extended: true}));
14 | app.use(bodyParser.json());
15 |
16 | app.post('/create-pdf', (req, res) => {
17 | pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err) => {
18 | if(err) {
19 | res.send(Promise.reject());
20 | }
21 |
22 | res.send(Promise.resolve());
23 | });
24 | });
25 |
26 | app.get('/fetch-pdf', (req, res) => {
27 | res.sendFile(`${__dirname}/result.pdf`)
28 | })
29 |
30 | app.listen(port, () => console.log(`Listening on port ${port}`));
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Generate Dynamic PDFs Using React and NodeJS
2 |
3 | ## Currency Converter Tutorial
4 |
5 | This is a code repository for the corresponding [article](https://medium.freecodecamp.org/how-to-generate-dynamic-pdfs-using-react-and-nodejs-eac9e9cb4dde) on Medium.
6 |
7 | In this tutorial, you will learn how to generate dynamic PDFs using HTML code as a template.
8 |
9 | ## Project Setup
10 |
11 | 1. Create a new directory
12 | ```mkdir pdfGenerator && cd pdfGenerator```
13 | 2. Create a new React App with ```create-react-app client``` and then move into newly created directory and install dependencies ```cd client && npm i -S axios file-saver```
14 | 3. Create an Express server with ```mkdir server && cd server && touch index.js && npm init``` press enter a couple of times to initialize package.json and then run ```npm i -S express body-parser cors html-pdf ``` to save all the necessary dependencies.
15 | 4. Add proxy inside of client/package.json, above the dependencies, simply add ```“proxy”: “http://localhost:5000/"```, so you can call the localhost from the client.
16 | 5. Open two different terminals:
17 | First one: go into the client directory and ```run npm start```
18 | Second one: go into the server directory and ```run nodemon index.js```
19 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | import { saveAs } from 'file-saver';
4 |
5 | import './App.css';
6 |
7 | class App extends Component {
8 | state = {
9 | name: '',
10 | receiptId: 0,
11 | price1: 0,
12 | price2: 0,
13 | }
14 |
15 | handleChange = ({ target: { value, name }}) => this.setState({ [name]: value })
16 |
17 | createAndDownloadPdf = () => {
18 | axios.post('/create-pdf', this.state)
19 | .then(() => axios.get('fetch-pdf', { responseType: 'blob' }))
20 | .then((res) => {
21 | const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
22 |
23 | saveAs(pdfBlob, 'newPdf.pdf');
24 | })
25 | }
26 |
27 | render() {
28 | return (
29 |
30 | Download PDF
35 |
36 | );
37 | }
38 | }
39 |
40 | export default App;
41 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.PDF Result Template
9 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
92 | Datum: ${`${today.getDate()}. ${today.getMonth() + 1}. ${today.getFullYear()}.`}
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | Customer name: ${name}
104 |
105 |
106 | Receipt number: ${receiptId}
107 |
108 |
109 |
110 |
111 |
112 |
113 | Bought items:
114 | Price
115 |
116 |
117 | First item:
118 | ${price1}$
119 |
120 |
121 | Second item:
122 | ${price2}$
123 |
124 |
125 |
126 |
Total price: ${parseInt(price1) + parseInt(price2)}$
127 |
