یکی از امکانات جالبی که وب‌سایت‌های مختلف به‌خصوص وب‌سایت‌های آموزشی می‌توانند از آن استفاده کنند، قابلیت دانلود صفحه سایت در قالب یک pdf است. یعنی کاربر بتواند به راحتی با یک کلیک تبدیل صفحه‌ی وب‌سایت به PDF را انجام دهد و کل صفحه وب‌سایت شما را دانلود کند تا بعدها بدون نیاز اینترنت یا مراجعه مجدد به وب‌سایت بتواند به آن مطالب دسترسی داشته باشد.
خب در این آموزش همراه ادمین‌سایت باشید تا با نحوه تبدیل صفحه‌ی وب‌سایت به PDF آشنا شوید. در مقالات قبلی نحوه پرینت گرفتن از وب‌سایت و درج دکمه‌ی پرینت در وب‌سایت را گفته بودیم که پیشنهاد می‌کنم از این مقاله هم بازدید کنید.
نحوه افزودن دانلود صفحه‌ی وب‌سایت در فرمت PDF
برای این کار ما از یک کتابخانه‌ی جی‌کوئری به نام html2pdf استفاده می‌کنیم. کافیست این کتابخانه را از طریق لینک زیر یا گیت‌هاب دانلود کنید. سپس مراحل زیر رابه ترتیب انجام دهید.
کتابخانه را از طریق لینک بالا دانلود کنید و از حالت فشرده zip خارج نمایید. فایل داخلی که html2pdf.bundle.min.js نام دارد را داخل قالب وب‌سایت خود قرار دهید.
گام دوم – فراخوانی کتابخانه
کدهای زیر را در صفحه‌ای که قصد افزودن دکمه دانلود دارید، اضافه کنید. برای مثال ما قصد داریم در صفحات داخلی سایت از یک دکمه دانلود صفحه استفاده کنیم. بنابراین این کد را آخر فایل single.php در قالب ودرپرس قرار می‌دهیم. اگر می‌خواهید این دکمه را در تمام صفحات داشته باشید (حتی صفحه اصلی) میتوانید آن را در فایل footer.php قرار دهید.
توجه کنید که این کد ارتباطی به وردپرس ندارد بنابراین در همه‌ی وب‌سایت‌ها قابل استفاده است.
1
2
3
4
5
6
7
8
9
10
11
12
<script src="html2pdf.bundle.min.js"></script>
<script>
functiongeneratePDF(){
// Choose the element that our invoice is rendered in.
constelement=document.getElementById("main");
// Choose the element and save the PDF for our user.
html2pdf()
.from(element)
.save();
}
</script>
تنها نکاتی که باید به آن توجه کنید این است که در اسکریپت اول آدرس کتابخانه دانلود شده را بدهید. اگر آن را درون مسیر اصلی قالب قرار داده‌اید کد بالا کار می‌کند اما اگر در پوشه‌ای قرار گرفته نام پوشه هم به بخش src اضافه کنید. (مربوط به خط اول)
در بخش const element در خط ۶ هم باید آیدی بخشی که قرار است قابل دانلود باشد را وارد کنید. برای مثال من می‌خواهم فقط بخش محتوایی سایت قابل درج در pdf باشد بنابراین به تگ این قسمت یک “id=”main اضافه می‌کنم.شما هم آیدی بخشی از صفحه وب‌سایت خود را وارد کنید.
گام سوم- قرار دادن دکمه دانلود صفحه با فرمت pdf
اکنون فقط یک کار کوچک دیگر باقی مانده و آن هم ساخت دکمه‌ی دانلود Pdf است.
این دکمه اضافه کردیم مرسی از پست بسیار عالیتون ولی یه مشکلی هست میخواییم فایل خروجی pdf مرتبش کنیم چجوری میتونیم به pdf استایل بدیم
برخی از استایلهای صفحه منتقل میشود برای نوشتن استایلهای بیشتر لازمه کدهایی css رو به کمک jqueryدر صفحه پرینت لود کنید یا cssهای اینلاین بنویسید.