تولید PDF با Express & node.js

در این مقاله یک آموزش کوچک سرگرم کننده در مورد نحوه ایجاد فایل PDF با استفاده از فرم وب پیدا خواهید کرد. اکسپرس وت pdfkitبشر برای شروع کار از Generator Express استفاده می کنید و پس از تکمیل آن یک فرم وب ساده خواهید داشت که یک فایل PDF ایجاد می کند 📄 اگر کاربر روی دکمه ایجاد PDF کلیک کند.
📌 پروژه خود را تنظیم کنید
- نصب کردن اکسپرس ژنراتور:
npm install -g express-generator
- جدید ایجاد کنید برنامه اکسپرس با PUG:
express --view=pug pdf-app
- حرکت به پروژه و وابستگی ها را نصب کنید:
cd pdf-app
npm install
- نصب وابستگی pdfkit:
npm install pdfkit
اکنون می توانید برنامه خود را شروع کنید ، با استفاده از:
npm start
سپس به http: // localhost: 3000 در مرورگر خود بروید. شما باید چیزی مانند: “خوش آمدید به بیان”بشر
بعد می خواهیم HTML خود را با استفاده از موتور قالب بندی اضافه کنیم میناکاری (قبلاً به عنوان شناخته می شد جید). پرونده را باز کنید views/index.pug
و کد موجود را با موارد زیر جایگزین کنید:
extends layout
block content
.row
.col-md-8
h1="Create a PDF"
form.form-horizontal.well(method="post", action="/pdf")
.form-group
label.col-md-2.control-label File Name
.col-md-10
.input-group
input.form-control(type="text", name="filename", placeholder="File Name")
.input-group-addon=".pdf"
.form-group
label.col-md-2.control-label Text
.col-md-10
textarea.form-control(name="content", placeholder="Write some text for on your PDF!")
.form-group
.col-sm-offset-2.col-sm-10
input.btn.btn-default(type="submit", value="Create PDF")
ما همچنین می خواهیم با استفاده از یک ظاهر طراحی شده اضافه کنیم بوت استرپ و یک موضوع از bootswatch. در Views/Layout.pug پیوند زیر را مستقیماً بالای لینک موجود اضافه کنید style.css:
doctype html
html
head
title= title
//link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css")
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
حال اگر برنامه خود را مجدداً راه اندازی کنید و به http: // localhost: 3000 مراجعه کنید ، باید فرم HTML با فرمت زیبا را ببینید. بعد می خواهیم مسیر ایجاد فایلهای PDF را اضافه کنیم. پرونده را ایجاد کنید routes/pdf
و کد زیر را اضافه کنید:
const express = require('express')
const router = express.Router()
const PDFDocument = require('pdfkit')
router.post('/', (req, res) => {
const doc = new PDFDocument()
let filename = req.body.filename
// Stripping special characters
filename = encodeURIComponent(filename) + '.pdf'
// Setting response to 'attachment' (download).
// If you use 'inline' here it will automatically open the PDF
res.setHeader('Content-disposition', 'attachment; filename="' + filename + '"')
res.setHeader('Content-type', 'application/pdf')
const content = req.body.content
doc.y = 300
doc.text(content, 50, 50)
doc.pipe(res)
doc.end()
})
module.exports = router
سپس App.js را باز کنید و به فایل مسیر PDF جدید درست در زیر مسیرهای موجود نیاز داشته باشید و آن را به عنوان یک مسیر اضافه کنید:
...
var index = require('./routes/index');
var users = require('./routes/users');
var pdf = require('./routes/pdf'); // <-- add this line
...
app.use('/', index);
app.use('/users', users);
app.use('/pdf', pdf); // <-- add this line
...
برنامه PDF Rendering Express شما اکنون آماده استفاده است! آن را با:
npm start
امیدوارم که از این آموزش لذت ببرید و احساس راحتی کنید که از من سؤال کنید.
با تشکر از سامر بونا برای بررسی این موضوع!