ایجاد PDF با Node.js — از صفر تا صد

1{
2    "presets": [
3        "@babel/preset-env"
4    ]
5}

1{
2  "development": {
3    "dialect": "sqlite",
4    "storage": "development.db"
5  },
6  "test": {
7    "dialect": "sqlite",
8    "storage": "test.db"
9  },
10  "production": {
11    "dialect": "sqlite",
12    "storage": "production.db"
13  }
14}

1var express = require("express");
2var pdf = require("html-pdf");
3const models = require("../models");
4var multer = require("multer");
5const fs = require("fs");
6var router = express.Router();
7const storage = multer.diskStorage({
8  destination: (req, file, cb) => {
9    cb(null, "./files");
10  },
11  filename: (req, file, cb) => {
12    cb(null, `${file.fieldname}_${+new Date()}.jpg`);
13  }
14});
15const upload = multer({
16  storage
17});
18router.get("/", async (req, res, next) => {
19  const documents = await models.Document.findAll();
20  res.json(documents);
21});
22router.post("/", async (req, res, next) => {
23  const document = await models.Document.create(req.body);
24  res.json(document);
25});
26router.put("/:id", async (req, res, next) => {
27  const id = req.params.id;
28  const { name, document } = req.body;
29  const doc = await models.Document.update(
30    { name, document },
31    { where: { id } }
32  );
33  res.json(doc);
34});
35router.delete("/:id", async (req, res, next) => {
36  const id = req.params.id;
37  await models.Document.destroy({ where: { id } });
38  res.json({});
39});
40router.get("/generatePdf/:id", async (req, res, next) => {
41  const id = req.params.id;
42  const documents = await models.Document.findAll({ where: { id } });
43  const document = documents[0];
44  const stream = await new Promise((resolve, reject) => {
45    pdf.create(document.document).toStream((err, stream) => {
46      if (err) {
47        reject(reject);
48        return;
49      }
50      resolve(stream);
51    });
52  });
53const fileName = `${+new Date()}.pdf`;
54  const pdfPath = `${__dirname}/../files/${fileName}`;
55  stream.pipe(fs.createWriteStream(pdfPath));
56  const doc = await models.Document.update(
57    { pdfPath: fileName },
58    { where: { id } }
59  );
60  res.json(doc);
61});
62router.post("/uploadImage", upload.single('upload'), async (req, res, next) => {
63  res.json({
64    uploaded: true,
65    url: `${process.env.BASE_URL}/${req.file.filename}`
66  });
67});
68module.exports = router;

1var createError = require("http-errors");
2var express = require("express");
3var path = require("path");
4var cookieParser = require("cookie-parser");
5var logger = require("morgan");
6var cors = require("cors");
7var indexRouter = require("./routes/index");
8var pdfRouter = require("./routes/pdf");
9var app = express();
10// view engine setup
11app.set("views", path.join(__dirname, "views"));
12app.set("view engine", "jade");
13app.use(logger("dev"));
14app.use(express.json());
15app.use(express.urlencoded({ extended: false }));
16app.use(cookieParser());
17app.use(express.static(path.join(__dirname, "public")));
18app.use(express.static(path.join(__dirname, "files")));
19app.use(cors());
20app.use("/", indexRouter);
21app.use("/pdf", pdfRouter);
22// catch 404 and forward to error handler
23app.use(function(req, res, next) {
24  next(createError(404));
25});
26// error handler
27app.use(function(err, req, res, next) {
28  // set locals, only providing error in development
29  res.locals.message = err.message;
30  res.locals.error = req.app.get("env") === "development" ? err : {};
31// render the error page
32  res.status(err.status || 500);
33  res.render("error");
34});
35module.exports = app;

1import React from "react";
2import HomePage from "./HomePage";
3import { Router, Route } from "react-router-dom";
4import { createBrowserHistory as createHistory } from "history";
5import TopBar from "./TopBar";
6import { DocumentStore } from "./store";
7import "./App.css";
8const history = createHistory();
9const documentStore = new DocumentStore();
10function App() {
11  return (
12    <div className="App">
13      <Router history={history}>
14        <TopBar />
15        <Route
16          path="/"
17          exact
18          component={props => (
19            <HomePage {...props} documentStore={documentStore} />
20          )}
21        />
22      </Router>
23    </div>
24  );
25}
26export default App;

1.page {
2  padding: 20px;
3}
4.content-invalid-feedback {
5  width: 100%;
6  margin-top: 0.25rem;
7  font-size: 80%;
8  color: #dc3545;
9}
10nav.navbar {
11  background-color: green !important;
12}

1import React from "react";
2import * as yup from "yup";
3import Form from "react-bootstrap/Form";
4import Col from "react-bootstrap/Col";
5import Button from "react-bootstrap/Button";
6import { observer } from "mobx-react";
7import { Formik, Field } from "formik";
8import { addDocument, editDocument, getDocuments, APIURL } from "./request";
9import CKEditor from "@ckeditor/ckeditor5-react";
10import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
11const schema = yup.object({
12  name: yup.string().required("Name is required")
13});
14function DocumentForm({ documentStore, edit, onSave, doc }) {
15  const [content, setContent] = React.useState("");
16  const [dirty, setDirty] = React.useState(false);
17  const handleSubmit = async evt => {
18    const isValid = await schema.validate(evt);
19    if (!isValid || !content) {
20      return;
21    }
22    const data = { ...evt, document: content };
23    if (!edit) {
24      await addDocument(data);
25    } else {
26      await editDocument(data);
27    }
28    getAllDocuments();
29  };
30  const getAllDocuments = async () => {
31    const response = await getDocuments();
32    documentStore.setDocuments(response.data);
33    onSave();
34  };
35  return (
36    <>
37      <Formik
38        validationSchema={schema}
39        onSubmit={handleSubmit}
40        initialValues={edit ? doc : {}}
41      >
42        {({
43          handleSubmit,
44          handleChange,
45          handleBlur,
46          values,
47          touched,
48          isInvalid,
49          errors
50        }) => (
51          <Form noValidate onSubmit={handleSubmit}>
52            <Form.Row>
53              <Form.Group as={Col} md="12" controlId="name">
54                <Form.Label>Name</Form.Label>
55                <Form.Control
56                  type="text"
57                  name="name"
58                  placeholder="Name"
59                  value={values.name || ""}
60                  onChange={handleChange}
61                  isInvalid={touched.name && errors.name}
62                />
63                <Form.Control.Feedback type="invalid">
64                  {errors.name}
65                </Form.Control.Feedback>
66              </Form.Group>
67            </Form.Row>
68            <Form.Row>
69              <Form.Group as={Col} md="12" controlId="content">
70                <Form.Label>Content</Form.Label>
71                <CKEditor
72                  editor={ClassicEditor}
73                  data={content || ""}
74                  onInit={editor => {
75                    if (edit) {
76                      setContent(doc.document);
77                    }
78                  }}
79                  onChange={(event, editor) => {
80                    const data = editor.getData();
81                    setContent(data);
82                    setDirty(true);
83                  }}
84                  config={{
85                    ckfinder: {
86                      uploadUrl:
87                        `${APIURL}/pdf/uploadImage`
88                    }
89                  }}
90                />
91                <div className="content-invalid-feedback">
92                  {dirty && !content ? "Content is required" : null}
93                </div>
94              </Form.Group>
95            </Form.Row>
96            <Button type="submit" style={{ marginRight: 10 }}>
97              Save
98            </Button>
99            <Button type="button">Cancel</Button>
100          </Form>
101        )}
102      </Formik>
103    </>
104  );
105}
106export default observer(DocumentForm);

1setContent(doc.document);

1documentStore.setDocuments(response.data);

1import React, { useState, useEffect } from "react";
2import { withRouter } from "react-router-dom";
3import DocumentForm from "./DocumentForm";
4import Modal from "react-bootstrap/Modal";
5import ButtonToolbar from "react-bootstrap/ButtonToolbar";
6import Button from "react-bootstrap/Button";
7import Table from "react-bootstrap/Table";
8import { observer } from "mobx-react";
9import { getDocuments, deleteDocument, generatePDF, APIURL } from "./request";
10function HomePage({ documentStore, history }) {
11  const [openAddModal, setOpenAddModal] = useState(false);
12  const [openEditModal, setOpenEditModal] = useState(false);
13  const [initialized, setInitialized] = useState(false);
14  const [doc, setDoc] = useState([]);
15  const openAddTemplateModal = () => {
16    setOpenAddModal(true);
17  };
18  const closeAddModal = () => {
19    setOpenAddModal(false);
20    setOpenEditModal(false);
21  };
22  const cancelAddModal = () => {
23    setOpenAddModal(false);
24  };
25  const cancelEditModal = () => {
26    setOpenEditModal(false);
27  };
28  const getAllDocuments = async () => {
29    const response = await getDocuments();
30    documentStore.setDocuments(response.data);
31    setInitialized(true);
32  };
33  const editTemplate = d => {
34    setDoc(d);
35    setOpenEditModal(true);
36  };
37  const onSave = () => {
38    cancelAddModal();
39    cancelEditModal();
40  };
41  const deleteSingleDocument = async id => {
42    await deleteDocument(id);
43    getAllDocuments();
44  };
45  const generateSinglePdf = async id => {
46    await generatePDF(id);
47    alert("PDF Generated");
48    getAllDocuments();
49  };
50  useEffect(() => {
51    if (!initialized) {
52      getAllDocuments();
53    }
54  });
55  return (
56    <div className="page">
57      <h1 className="text-center">Documents</h1>
58      <ButtonToolbar onClick={openAddTemplateModal}>
59        <Button variant="primary">Add Document</Button>
60      </ButtonToolbar>
61      <Modal show={openAddModal} onHide={closeAddModal}>
62        <Modal.Header closeButton>
63          <Modal.Title>Add Document</Modal.Title>
64        </Modal.Header>
65        <Modal.Body>
66          <DocumentForm
67            onSave={onSave.bind(this)}
68            cancelModal={cancelAddModal.bind(this)}
69            documentStore={documentStore}
70          />
71        </Modal.Body>
72      </Modal>
73      <Modal show={openEditModal} onHide={cancelEditModal}>
74        <Modal.Header closeButton>
75          <Modal.Title>Edit Document</Modal.Title>
76        </Modal.Header>
77        <Modal.Body>
78          <DocumentForm
79            edit={true}
80            doc={doc}
81            onSave={onSave.bind(this)}
82            cancelModal={cancelEditModal.bind(this)}
83            documentStore={documentStore}
84          />
85        </Modal.Body>
86      </Modal>
87      <br />
88      <Table striped bordered hover>
89        <thead>
90          <tr>
91            <th>Name</th>
92            <th>PDF</th>
93            <th>Generate PDF</th>
94            <th>Edit</th>
95            <th>Delete</th>
96          </tr>
97        </thead>
98        <tbody>
99          {documentStore.documents.map(d => {
100            return (
101              <tr key={d.id}>
102                <td>{d.name}</td>
103                <td>
104                  <a href={`${APIURL}/${d.pdfPath}`} target="_blank">
105                    Open
106                  </a>
107                </td>
108                <td>
109                  <Button
110                    variant="outline-primary"
111                    onClick={generateSinglePdf.bind(this, d.id)}
112                  >
113                    Generate PDF
114                  </Button>
115                </td>
116                <td>
117                  <Button
118                    variant="outline-primary"
119                    onClick={editTemplate.bind(this, d)}
120                  >
121                    Edit
122                  </Button>
123                </td>
124                <td>
125                  <Button
126                    variant="outline-primary"
127                    onClick={deleteSingleDocument.bind(this, d.id)}
128                  >
129                    Delete
130                  </Button>
131                </td>
132              </tr>
133            );
134          })}
135        </tbody>
136      </Table>
137    </div>
138  );
139}
140export default withRouter(observer(HomePage));

1export const APIURL = "http://localhost:3000";
2const axios = require("axios");
3export const getDocuments = () => axios.get(`${APIURL}/pdf`);
4export const addDocument = data => axios.post(`${APIURL}/pdf`, data);
5export const editDocument = data => axios.put(`${APIURL}/pdf/${data.id}`, data);
6export const deleteDocument = id => axios.delete(`${APIURL}/pdf/${id}`);
7export const generatePDF = id => axios.get(`${APIURL}/pdf/generatePdf/${id}`);

1import { observable, action, decorate } from "mobx";
2class DocumentStore {
3  documents = [];
4setDocuments(documents) {
5    this.documents = documents;
6  }
7}
8DocumentStore = decorate(DocumentStore, {
9  documents: observable,
10  setDocuments: action
11});
12export { DocumentStore };

1DocumentStore = decorate(DocumentStore, {
2  documents: observable,
3  setDocuments: action
4});

1import React from "react";
2import Navbar from "react-bootstrap/Navbar";
3import Nav from "react-bootstrap/Nav";
4import { withRouter } from "react-router-dom";
5function TopBar({ location }) {
6  return (
7    <Navbar bg="primary" expand="lg" variant="dark">
8      <Navbar.Brand href="#home">PDF App</Navbar.Brand>
9      <Navbar.Toggle aria-controls="basic-navbar-nav" />
10      <Navbar.Collapse id="basic-navbar-nav">
11        <Nav className="mr-auto">
12          <Nav.Link href="/" active={location.pathname == "/"}>
13            Home
14          </Nav.Link>
15        </Nav>
16      </Navbar.Collapse>
17    </Navbar>
18  );
19}
20export default withRouter(TopBar);

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <meta name="theme-color" content="#000000" />
8    <meta
9      name="description"
10      content="Web site created using create-react-app"
11    />
12    <link rel="apple-touch-icon" href="logo192.png" />
13    <!--
14      manifest.json provides metadata used when your web app is installed on a
15      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16    -->
17    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18    <!--
19      Notice the use of %PUBLIC_URL% in the tags above.
20      It will be replaced with the URL of the `public` folder during the build.
21      Only files inside the `public` folder can be referenced from the HTML.
22Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23      work correctly both with client-side routing and a non-root public URL.
24      Learn how to configure a non-root public URL by running `npm run build`.
25    -->
26    <title>PDF App</title>
27    <link
28      rel="stylesheet"
29      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
30      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
31      crossorigin="anonymous"
32    />
33  </head>
34  <body>
35    <noscript>You need to enable JavaScript to run this app.</noscript>
36    <div id="root"></div>
37    <!--
38      This HTML file is a template.
39      If you open it directly in the browser, you will see an empty page.
40You can add webfonts, meta tags, or analytics to this file.
41      The build step will place the bundled scripts into the <body> tag.
42To begin the development, run `npm start` or `yarn start`.
43      To create a production bundle, use `npm run build` or `yarn build`.
44    -->
45  </body>
46</html>