برنامه نویسی

تولید 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
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

امیدوارم که از این آموزش لذت ببرید و احساس راحتی کنید که از من سؤال کنید.

با تشکر از سامر بونا برای بررسی این موضوع!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا