วิธีการเพิ่มเลขหน้าในไฟล์ PDF ด้วย JavaScript

สวัสดีทุกท่าน หลังจากที่ไม่ได้ update เวปมานาน ตอนนี้มาขยับเมาส์เพื่อปั่นบทความบันเทิงกันบ้าง ตอนนี้ งานหลักๆของทางผม จะเป็นการสร้างเอกสาร ประกอบใบเสนอราคา ซึ่งมันจะมีหมวดหนึ่ง ที่ใช้คน คนหนึ่งเพื่อ ติดเลขหน้า ไปกับ ไฟล์ pdf ที่ระบุสเป๊คของสินค้าเอาไว้ อ้างอิง ซึ่งเป็นงานที่ใช้เวลาสูงมาก จริงๆ หลายชั่วโมงกว่าจะทำเสร็จ และ ปัญหาก็คือ ถ้ามีการปรับเปลี่ยน เอาไฟล์ pdf ออก ต้องมาทำเรียงกันใหม่ด้วย สำหรับ จิตวิญญาณการเป็นโปรแกรมเมอร์ ของผมแล้ว ขอเสนอวิธีการที่ดีกว่า และ สนุกกว่า

การจัดการกับไฟล์ PDF เป็นเรื่องที่พบได้บ่อยในหลายๆ งาน ไม่ว่าจะเป็นการแปลงไฟล์ การเพิ่มข้อมูล หรือแม้กระทั่งการเพิ่มเลขหน้าให้กับไฟล์ PDF ซึ่งเอาเข้าจริง ผมว่า น่าจะมีโปรแกรมทำได้ล่ะ แต่ สำหรับผมแล้ว จะโหลดมาทำไมล่ะ เดี่ยวนี้ เขียนเองง่ายจะตาย ฉะนั้นในบทความนี้ เราจะสอนคุณในการใช้ JavaScript ร่วมกับ pdf-lib เพื่อเพิ่มเลขหน้าในไฟล์ PDF และ สร้างไฟล์ exe เอาไปรันกันเลย

สำหรับบทความนี้ เราจะใช้ NodeJs และ NPM ในการทำโปรเจค เพราะว่า เป็น tool ที่มีในเครื่องอยู่แล้ว อย่างไง อย่างลืมติดตั้งกันด้วยล่ะครับ

ขั้นตอนที่ 1: ตั้งค่าโปรเจกต์

1. สร้างไดเรกทอรีใหม่สำหรับโปรเจกต์

เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่สำหรับโปรเจกต์ของคุณ และเข้าสู่ไดเรกทอรีนั้น:

mkdir pdf-page-numbering
cd pdf-page-numbering

2. รันคำสั่ง npm init

สร้างไฟล์ package.json โดยใช้คำสั่ง npm init (คุณสามารถใช้ -y เพื่อยอมรับค่าเริ่มต้นทั้งหมด):

npm init -y

3. ติดตั้ง dependencies ที่จำเป็น

ติดตั้ง pdf-lib และ pkg ซึ่งเป็นเครื่องมือสำหรับสร้างไฟล์ปฏิบัติการ:

npm install pdf-lib @pdf-lib/fontkit
npm install -g pkg

4. ดาวน์โหลดฟอนต์ไทย

ดาวน์โหลดฟอนต์ ttf ที่คุณต้องการใช้ เช่น THSarabunNew.ttf และวางในโฟลเดอร์โปรเจกต์ของคุณ โดยโปรเจคนี้จะฝั่งไฟล์ ที่คุณชอบเข้าไปใน ไฟล์ EXE เลย

โดยโครงสร้างของโปรเจคของเราจะเป็นแบบนี้

pdf-page-numbering/
├── node_modules/
├── THSarabunNew.ttf
├── index.js
├── package.json

ขั้นตอนที่ 2: เขียนโค้ด JavaScript

สร้างไฟล์ index.js ในไดเรกทอรีโปรเจกต์ของคุณและใส่โค้ดต่อไปนี้:

const { PDFDocument, rgb } = require('pdf-lib');
const fs = require('fs');
const path = require('path');
const fontkit = require('@pdf-lib/fontkit');

async function addPageNumbers(inputPdfPath, outputPdfPath, fontPath) {
    const existingPdfBytes = fs.readFileSync(inputPdfPath);
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);

    const fontBytes = fs.readFileSync(fontPath);
    const customFont = await pdfDoc.embedFont(fontBytes);

    const pages = pdfDoc.getPages();
    const { width, height } = pages[0].getSize();

    for (let i = 0; i < pages.length; i++) {
        const page = pages[i];
        page.drawText(`หน้า ${i + 1}`, {
            x: width - 50,
            y: 10,
            size: 12,
            font: customFont,
            color: rgb(0, 0, 0),
        });
    }

    const pdfBytes = await pdfDoc.save();
    fs.writeFileSync(outputPdfPath, pdfBytes);
}

const inputPdfPath = process.argv[2];
const outputPdfPath = process.argv[3];
const fontPath = path.join(__dirname, 'THSarabunNew.ttf');

if (!inputPdfPath || !outputPdfPath) {
    console.log('plaese input a paramater inpPdf outpPdf');
    process.exit(1);
}

addPageNumbers(inputPdfPath, outputPdfPath, fontPath);

ขั้นตอนที่ 3: แก้ไข package.json

เปิดไฟล์ package.json และเพิ่มฟิลด์ bin เพื่อกำหนด entry point ของโปรเจกต์:

{
  "name": "pdf-page-numbering",
  "version": "1.0.0",
  "description": "Add page numbers to PDF files",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "pdf-lib": "^1.17.1",
    "@pdf-lib/fontkit": "^1.0.0"
  },
  "bin": {
    "pdf-page-numbering": "./index.js"
  },
  "pkg": {
    "assets": [
      "THSarabunNew.ttf",
      "node_modules/@pdf-lib/fontkit/**/*"
    ]
  }
}

ขั้นตอนที่ 4: สร้างไฟล์ EXE

การใช้ไฟล์ EXE สำหรับ nodejs เราจะใช้ pkg

รันคำสั่ง pkg เพื่อสร้างไฟล์ EXE:

pkg . --targets node16-win-x64,node16-macos-x64,node16-linux-x64

คำสั่งนี้จะสร้างไฟล์ปฏิบัติการสำหรับ Windows, MacOS, และ Linux ในไดเรกทอรีเดียวกับสคริปต์

สำหรับคนที่ใช้กับ Windows อย่างเดียว จะตัด node16-macos-x64,node16-linux-x64 ออกก็ได้

ขั้นตอนที่ 5: ทดสอบ

ตอนนี้คุณสามารถรันไฟล์ปฏิบัติการได้โดยระบุเส้นทางไฟล์ PDF อินพุตและเอาต์พุตจากบรรทัดคำสั่ง:

./pdf-page-numbering input.pdf output.pdf  # สำหรับ Unix-based systems
pdf-page-numbering.exe input.pdf output.pdf  # สำหรับ Windows

เมื่อคุณทำตามขั้นตอนทั้งหมดนี้แล้ว คุณจะมีไฟล์ปฏิบัติการที่สามารถใช้เพิ่มเลขหน้าในไฟล์ PDF ได้โดยง่าย

สรุป

เราสามารถใช้ Nodejs ,Javascript และ pdf-lib เพื่อจัดการกับไฟล์ PDF ได้ เป็นวิธีที่สะดวกและยืดหยุ่น  เพราะว่า หลังจากนี้ เราอาจจะเพิ่มหมวด หรือ ข้อความอื่นๆได้ นอกจากนี้ เรายังนำเสนอวิธีการเอา ใช้ Nodejs เพื่อ สร้างไฟล์ EXE ที่คุณเอารันตรงไหนก็ได้ ส่งให้เพื่อนก็ได้ ยังช่วยให้การใช้งานง่ายขึ้นสำหรับผู้ใช้งานที่ไม่ต้องการติดตั้ง Node.js และ dependencies ต่างๆ หวังว่าบทความนี้จะเป็นประโยชน์และช่วยให้คุณสามารถเพิ่มเลขหน้าในไฟล์ PDF ได้อย่างง่ายดาย แล้ว พบการใหม่ Comment แล้วมาเล่าให้ฟังกันบ้าง เจอปัญหาอะไร กับการจัดการเอกสารกันบ้าง ขอตัวไปคิดใบเสนอราคาต่อล่ะครับ บาย