تبدیل html به pdf با جاوااسکریپت و پشتیبانی زبان فارسی

دانلود اسکریپت برای تبدیل جدول فارسی به فایل PDF در جاوا اسکریپت

در دنیای امروز، نیاز به تولید و ثبت اسناد دیجیتال، به‌خصوص برای گزارش‌ها، جداول و داده‌های مهم، روز به روز در حال افزایش است. یکی از چالش‌های اصلی، تبدیل جداول حاوی متن‌های فارسی به فایل‌های PDF است، زیرا زبان فارسی با پیچیدگی‌های خاص خود، نیازمند روش‌های مخصوص است. در این مقاله، به طور کامل و جامع، فرآیند توسعه و دانلود اسکریپتی در زبان جاوا اسکریپت برای تبدیل جداول فارسی به فایل PDF را بررسی می‌کنیم.
چرا نیاز به اسکریپت برای تبدیل جدول فارسی به PDF داریم؟
در واقع، بسیاری از برنامه‌های وب و اپلیکیشن‌ها، نیاز دارند تا داده‌های جداول خود را به صورت فایل‌های PDF درآورند، تا بتوانند در قالب گزارش‌ها، فاکتورها، یا مستندات دیگر، به راحتی مشارکت کنند. اما مشکل اصلی، در پشتیبانی از زبان‌های راست به چپ، مخصوصاً فارسی، است. زبان فارسی، با ساختار و فونت‌های خاص، نیازمند کتابخانه‌های مخصوص و تنظیمات دقیق است، در غیر این صورت، خروجی PDF ممکن است به هم ریخته یا ناخوانا باشد.
در این راستا، ابزارها و کتابخانه‌های مختلفی توسعه یافته‌اند، اما یکی از محبوب‌ترین و قدرتمند‌ترین ابزارهای جاوا اسکریپت، کتابخانه jsPDF است. این کتابخانه، امکانات فراوانی برای تولید فایل PDF را فراهم می‌کند و به راحتی قابل تنظیم است تا متن‌های فارسی را پشتیبانی کند، البته با چند تنظیمات و افزودنی‌های خاص.
نحوه نصب و راه‌اندازی کتابخانه jsPDF
قبل از شروع، باید این کتابخانه را در پروژه خود وارد کنید. چند روش برای این کار وجود دارد:
1. استفاده از CDN: بهترین گزینه برای نمونه‌ها و پروژه‌های کوچک است. کافی است کد زیر را در بخش `<head>` یا قبل از بسته شدن `<body>` قرار دهید:

html  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

2. نصب با npm: اگر پروژه شما با Node.js توسعه یافته است، می‌توانید این کتابخانه را با دستور زیر نصب کنید:

bash  

npm install jspdf

در هر صورت، پس از نصب یا وارد کردن کتابخانه، حالا آماده‌اید تا کدهای مورد نیاز برای تبدیل جدول فارسی به PDF را بنویسید.
مراحل توسعه اسکریپت برای تبدیل جدول فارسی به PDF
در ادامه، مراحل اصلی توسعه این اسکریپت را بررسی می‌کنیم:
1. آماده‌سازی ساختار جدول HTML
ابتدا باید یک جدول HTML داشته باشید، که شامل داده‌های فارسی است. برای مثال، می‌توانید یک جدول ساده با چند ردیف و ستون داشته باشید:

html  

<table id="myTable">

  <tr>

    <th>نام</th>

    <th>سن</th>

    <th>شهر</th>

  </tr>

  <tr>

    <td>علی</td>

    <td>۲۵</td>

    <td>تهران</td>

  </tr>

  <tr>

    <td>سمیرا</td>

    <td>۳۰</td>

    <td>مشهد</td>

  </tr>

</table>

2. گرفتن داده‌های جدول
برای تبدیل این جدول به PDF، باید داده‌های آن را استخراج کنیم. این کار را می‌توان با استفاده از جاوا اسکریپت و DOM انجام داد:

javascript  

const table = document.getElementById('myTable');

const rows = Array.from(table.rows);

3. تنظیم فونت و پشتیبانی از متن فارسی
بسیاری از فونت‌های پیش‌فرض در jsPDF، پشتیبانی از حروف فارسی را ندارند. بنابراین، باید از فونت‌های پشتیبانی‌کننده از زبان فارسی، مانند "Vazir" یا "IranSans" استفاده کنید. برای این کار، نیاز دارید تا فونت مورد نظر را به پروژه اضافه کنید و آن را در jsPDF ثبت کنید.
برای نمونه، می‌توانید از فونت Vazir استفاده کنید. کافی است فایل TTF آن را در پروژه قرار دهید، سپس آن را در jsPDF ثبت کنید:

javascript  

import { jsPDF } from "jspdf";

import vazirFont from "./Vazir.ttf";
jsPDF.API.events.push(function () {

  this.addFileToVFS("Vazir.ttf", vazirFont);

  this.addFont("Vazir.ttf", "Vazir", "normal");

});

در صورت استفاده از CDN، باید فونت را به صورت Base64 در آورد و در پروژه قرار دهید.
4. افزودن داده‌های جدول به PDF
حالا می‌توانیم با استفاده از jsPDF، متن‌های فارسی را به PDF اضافه کنیم. در این حالت، می‌خواهیم جدول را به صورت متن ساخت یافته در PDF نمایش دهیم.
یک نمونه کد برای افزودن داده‌ها:

javascript  

const { jsPDF } = window.jspdf;

const doc = new jsPDF();
// تنظیم فونت فارسی  

doc.setFont("Vazir");

doc.setFontSize(12);
// شروع مختصات  

let startX = 10;

let startY = 20;

const rowHeight = 10;
// افزودن سرصفحه  

const headers = Array.from(rows[0].cells).map(cell => cell.innerText);

headers.forEach((header, index) => {

  doc.text(header, startX + index * 50, startY);

});
// افزودن ردیف‌های داده  

for (let i = 1; i < rows.length; i++) {

  const cells = Array.from(rows[i].cells);

  cells.forEach((cell, index) => {

    doc.text(cell.innerText, startX + index * 50, startY + i * rowHeight);

  });

}
// ذخیره فایل PDF  

doc.save("جدول-فارسی.pdf");

5. مدیریت موانع و افزودن استایل
در این مرحله، باید به مواردی مانند حاشیه‌بندی، رنگ‌بندی، و تنظیمات دیگر توجه کنید. برای نمونه، می‌توانید خطوط جدول، پس‌زمینه، و برش‌های خاص را اضافه کنید. این کار با قابلیت‌های بیشتر jsPDF و یا افزودن کتابخانه‌های کمکی امکان‌پذیر است.
چالش‌های رایج و راه‌حل‌ها
در مسیر توسعه این اسکریپت، چند چالش رایج وجود دارد:
- پشتیبانی کامل فونت‌های فارسی: باید فونت‌هایی انتخاب کنید که دقیقا حروف فارسی را پشتیبانی کنند و در فایل‌های PDF به صورت صحیح نمایش داده شوند.
- مشکل راست به چپ بودن متن: باید حتماً جهت متن را راست به چپ تنظیم کنید، که در jsPDF با استفاده از تنظیمات خاص امکان‌پذیر است.
- طراحی جدول در PDF: برای داشتن جداول زیبا و منظم، باید خطوط، فضاها و استایل‌های مناسب را تعریف کنید. این کار نیازمند تنظیم موقعیت‌های دقیق و طراحی قالب است.
نتیجه‌گیری
در این مقاله، سعی کردیم مسیر کامل و جامع توسعه اسکریپتی در زبان جاوا اسکریپت برای تبدیل جدول فارسی به فایل PDF را شرح دهیم. از نصب کتابخانه jsPDF، تنظیم فونت‌های فارسی، استخراج داده‌های جدول، و در نهایت، افزودن داده‌ها و استایل‌ها به PDF، مراحل مهم و اساسی بودند. اگر به درستی انجام شود، می‌تواند به صورت خودکار و سریع، جداول فارسی را به فایل‌های PDF قابل استفاده و قابل اشتراک تبدیل کند، که این امر در بسیاری از پروژه‌های تجاری و اداری بسیار کاربردی است.
در نهایت، توجه داشته باشید که برای بهترین نتیجه، باید فونت‌های مناسب و تنظیمات صحیح را در پروژه خود اعمال کنید. با تمرین و آزمایش، می‌توانید این اسکریپت را بهینه‌تر و زیباتر طراحی کنید و قابلیت‌های پیشرفته‌تر را به آن بیفزایید.

مارکت