HTML را به صورت PDF در React دانلود کنید

برای خواندن مقالات بیشتر از این قبیل به وبلاگ من مراجعه کنید

دانلود PDF یک مورد استفاده رایج در برنامه های کاربردی پیشرفته مدرن است. اما ساخت PDF در سمت مشتری می تواند دردناک باشد. در React ما چندین کتابخانه عالی مانند react-pdf/renderer داریم که به ما کمک می کنند.

مشکلات کتابخانه های سنتی

react-pdf/renderer یک کتابخانه عالی است و سفارشی سازی های زیادی را ارائه می دهد. اما هزینه خودش را دارد. مثلا

• شما باید یک جزء جداگانه برای سند PDF خود طراحی کنید

• گاهی اوقات رندر با شکست مواجه می شود اگر شما به درستی از edge-cases استفاده نکنید

• شما باید جداگانه و با توجه به مشخصات آنها استایل کنید.

اگر می‌خواهید یک پی‌دی‌اف با حجم بالا و سفارشی‌سازی شده بسازید، همه این‌ها مشکلی ندارند. اما اگر چیز ساده تری می خواهید چه؟

اگر بخواهید کامپوننتی را که در حال رندر کردن است همانطور که هست چاپ کنید چه؟

بیایید ببینیم چگونه می‌توانیم با استفاده از یک ترفند ساده و دانش جاوا اسکریپت، هر مؤلفه را به‌عنوان PDF دانلود کنیم.

بررسی اجمالی

فرآیندی که می خواهیم دنبال کنیم تبدیل عنصر HTML به یک تصویر و سپس قرار دادن تصویر در یک کتابخانه PDF قدرتمند دیگر است.

سند HTML -> تصویر -> PDF

برای این کار به دو کتابخانه نیاز داریم.

1. html2canvas -> سند HTML ما را به تصویر تبدیل می کند

2. jspdf -> تصویر تولید شده را در یک فایل PDF قرار می دهد

کد کامل در پایین است. اگر فقط به آن علاقه دارید مستقیماً به آنجا بروید. وگرنه تحمل کن خیلی طول نمیکشه

مرحله 1. Dependencies را نصب کنید

ابتدا وابستگی های مورد نیاز را نصب کنید.

yarn add jspdf html2canvas

مرحله 2: تابع Downloader را اضافه کنید

حالا یا یک کامپوننت جداگانه برای خود ایجاد کنید GenericPdfdownloader یا کد زیر را داخل کامپوننتی که می خواهید دانلود کنید قرار دهید.

const downloadPdfDocument = (rootElementId) => {
  const input = document.getElementById(rootElementId);
  html2canvas(input)
    .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        pdf.save("download.pdf");
    })
}

کاری که کد انجام می دهد

• Input -> این تابع طول می کشد rootElementId به عنوان ورودی این شناسه کامپوننت قابل دانلود خواهد بود. می توانیم شناسه هر عنصری را مانند شکل زیر تعریف کنیم

return <div id="divToDownload">  

  // YOUR OTHER COMPONENT CODE GOES HERE

</div>

بنابراین اگر بخواهیم کامپوننت را در داخل دانلود کنیم div با id=”divToDownload” سپس ما باید عبور کنیم ”divToDownload” به تابع

1. Getting the HTML Element

در مرحله بعد، عنصر HTML را با شناسه ارسال شده دریافت می کنیم.

const input = document.getElementById(rootElementId);

2. Converting HTML to Image

در مرحله بعد، عنصر را به قسمت منتقل می کنیم html2canvas که تصویری را به ما برمی گرداند

html2canvas(input)
    .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
    })

3. Putting The Image into PDF

بعد، یک سند PDF جدید ایجاد می کنیم و تصویر را داخل آن قرار می دهیم.

const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");

در اینجا دو صفر هستند padding برای سند PDF تولید شده شما می توانید آنها را همانطور که می خواهید تغییر دهید.

همچنین می توانید نام فایل دانلودی را تغییر دهید.

کد کامل

در اینجا کد کامل یک دانلود کننده PDF سفارشی است که دو آرگومان دارد:

1. عناصر ریشه به عنوان شناسه هستند rootElementId

2. نام فایل را دانلود کنید downloadFileName

import React from 'react';
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";

const GenericPdfDownloader = ({rootElementId , downloadFileName}) => {

    const downloadPdfDocument = () => {
        const input = document.getElementById(rootElementId);
        html2canvas(input)
            .then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF();
                pdf.addImage(imgData, 'JPEG', 0, 0);
                pdf.save(`${downloadFileName}.pdf`);
            })
    }

    return <button onClick={downloadPdfDocument}>Download Pdf</button>

}

export default GenericPdfDownloader;

اکنون می توانید این کامپوننت را در هر جایی از پروژه خود مانند موارد زیر قرار دهید:

import React from'react';
import GenericPdfDownloader from "./views/GenericPdfDownloader";

function App() {
  return (
    <>
        <GenericPdfDownloader 
          downloadFileName="CustomPdf" 
          rootElementId="testId" 
        />

        <div id="testId"> 
            This is A Downloadable Component 
        </div>
    </>
  );
}

صادرات برنامه پیش فرض.

نتیجه

شما بروید! اکنون دانلود کننده PDF سفارشی خود را دارید که می تواند در هر نقطه از پروژه خود استفاده شود. با تشکر از شما برای خواندن!

چیزی برای گفتن داری؟

از طریق لینکدین یا وب سایت شخصی من با من در تماس باشید.