مقدمه:
در این مقاله، ما قصد داریم یک دکمه دانلود PDF با زبان فارسی ایجاد کنیم که به کمک کتابخانه html2pdf.js و با استفاده از فونت فارسی، متن‌ها به درستی در فایل PDF نمایش داده شوند.
مراحل اصلی:
آماده‌سازی محیط:
– افزودن html2pdf.js به صفحه HTML.
– افزودن فونت فارسی به صفحه HTML.
“`html
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=B Nazanin&display=swap”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js”></script>
“`
استایل‌دهی به قسمت مورد نظر:
– استفاده از فونت فارسی برای نمایش متون به زبان فارسی.
“`css
#pdfDownloadArea {
font-family: ‘B Nazanin’, Arial, sans-serif;
/ سایر استایل‌ها /
}
“`
اضافه کردن دکمه دانلود:
– اضافه کردن دکمه و تابعی که بر روی کلیک آن دکمه، فایل PDF ایجاد می‌شود.
“`html
<div id=”pdfDownloadArea”>
<!– محتوایی که قرار است به PDF تبدیل شود –>
<h2>عنوان PDF</h2>
<p>متن قابل دانلود به PDF…</p>
<button onclick=”downloadPDF()”>دانلود PDF</button>
</div>
“`
تابع ایجاد فایل PDF:
– تعریف تابعی که با کلیک بر روی دکمه، فایل PDF ایجاد می‌شود.
“`javascript
function downloadPDF() {
var element = document.getElementById(“pdfDownloadArea”);
html2pdf(element, {
margin: 10,
filename: “محتوای-دانلودی.pdf”,
image: { type: ‘jpeg’, quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: ‘mm’, format: ‘a4’, orientation: ‘portrait’ }
});
}
“`
نتیجه:
با انجام این مراحل، یک دکمه دانلود PDF با زبان فارسی ایجاد شده و محتوای مورد نظر به صورت صحیح در فایل PDF نمایش داده می‌شود.
خلاصه:
در این مقاله، با استفاده از کتابخانه html2pdf.js و افزودن فونت فارسی، یک دکمه دانلود PDF با زبان فارسی ایجاد کردیم. این روش به شما این امکان را می‌دهد تا محتواهای خود را با فرمت PDF دریافت کرده و درصورت نیاز به دیگران ارسال کنید.
