دسته‌بندی نشده

نحوه ایجاد نمایشگر PDF از طریق جاوا اسکریپت

نحوه ایجاد نمایشگر PDF از طریق جاوا اسکریپت

اسناد قابل حمل یا به طور راحت تر اسناد PDF ، برای به اشتراک گذاری اسنادی که حاوی متون و تصاویر هستند بسیار مفید خواهند بود. مخصوصا اگر نسخه های چاپی و یا نسخه هایی برای مطالعه آفلاین باشند.

PDF.js یک کتابخانه اوپن سورس است که این امکان را به توسعه دهنده می دهد تا صفحات مربوط به PDF را برای کاربر در صفحات وب به نمایش بگذارد. ما در این آموزش نحوه چگونگی استفاده از این کتابخانه را برای ایجاد یک نمایشگر کاملا سفارشی شده  JavaScript PDF را به شما نشان خواهیم داد.

۱٫ ایجاد رابط کاربری

حال کارمان را با ایجاد یک صفحه وب و نوشتن کدهای معمولی HTML5 آغاز می کنیم .

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My PDF Viewer</title>
</head>
<body>
    
</body>
</html>

حال در تگ Body یک عنصر یا تگی به نام div ایجاد کرده که حاوی نمایشگر PDF ما باشد.

<div id="my_pdf_viewer">
</div>

قلب و هسته محیط نمایش JavaScript PDF ما یک تگ به نام <canvas>  خواهد بود. ما میخواهیم صفحات پرونده PDF خود را داخل این تگ ارائه دهیم :

<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>

برای اینکه کارمان را راحت تر کرده و ساده کنیم ، فقط از یک صفحه برای نمایش فایل خود در این چارچوب خواهیم کرد. با این وجود ما امکان تغییر صفحات را از طریق یک دکمه قبل و بعد خواهیم داد. علاوه بر این شماره صفحه کنونی را به نمایش خواهیم گذاشت و یک فیلد ورودی برای اینکه کاربر به هرصفحه ای که در نظر داشت به راحتی برود تعبیه خواهیم کرد.

<div id="navigation_controls">
    <button id="go_previous">Previous</button>
    <input id="current_page" value="1" type="number"/>
    <button id="go_next">Next</button>
</div>

برای پشتیبانی از عمل بزرگنمایی یا زوم بر روی سند ، از دو دکمه استفاده خواهیم کرد : یکی برای بزرگ کردن صفحه و دیگری برای کوچک کردن آن .


<div id="zoom_controls"> 
    <button id="zoom_in">+</button>
    <button id="zoom_out">-</button>
</div>

۲٫ دریافت PDF.js

حال که یک رابط کاربری برای نمایش فایل PDF خود بر روی سند اعمال کردیم ، وقت آن رسیده که فایل PDF.js را به سندمان اضافه کنیم. از آنجایی که آخرین نسخه این کتابخانه در CDNJS موجود است ، می توانیم به راحتی از cdn استفاده کرده و آن را به سندمان اضافه کنیم :

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
</script>

البته اگر می خواهید به شکل لوکال یک کپی از این کتابخانه در سند داشته باشید ، می توانید از طریق  pdfjs-dist آن را دریافت نمائید .

۳٫ بارگیری فایل PDF

قبل از اینکه یک فایل PDF را بارگیری کنیم ، یک شی ساده javascript را برای وضعیت نمایشگر فایل PDF خود ایجاد می کنیم . ۳ آیتم را در داخل آن ایجاد می کنیم : مرجعی برای خود فایل یا پرونده PDF ، فهرست صفحات و میزان بزرگنمایی صفحه .


<script>
    var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }
    // more code here
</script>

در این مرحله ما با فراخوانی متد getDocument() از شی pdfjsLib که به شکل غیر همزمان اجرا می شود ، فایل PDF خود را بارگذاری نمائیم.

pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
    // more code here
});

به این نکته نیز توجه داشته باشید که متد getDocument() در داخل شی XMLHttpRequest برای بارگذاری یا لود فایل PDF استفاده می شود.یعنی باید پرونده PDF ما در داخل سرور برای درخواست های کاربران باشد.پس از بارگیری موفقیت آمیز پرونده PDF ، ما صفت pdf خود را در شی مربوطه بر روز رسانی می کنیم .

myState.pdf = pdf;

در نهایت یک تابع به نام render() را فراخوانی خواهیم کرد تا به شکل خودکار صفحه اول سندمان برای بیننده به نمایش دربیاید. در مرحله بعدی نحوه عملکرد این تابع را بررسی خواهیم کرد.

۴٫ تابع Render و ارائه صفحه PDF

با فراخوانی متد getPage() از شی pdf و انتقال یک صفحه به آن ، می توانیم دیگر به هر صفحه ای از سند PDf مربوطه مراجعه نمائیم. این روش بیش از یک خروجی را برایمان به ارمغان خواهد آورد ، بنابراین باید تابعی بازگشتی داشته باشیم.

بر این اساس تابعی جدید به نام render() که حاوی کد های زیر هستند ایجاد می کنیم :

function render() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
        // more code here
    });
}

خب ، برای نمایش یک صفحه ما با از آبجکت(شی) page متد render()  را فراخوانی کنیم. ما در این روش انتظار داریم که از محتوا و آبجکت PageViewport یک خروجی دو بعدی داشته باشیم ، که با فراخوانی متد getViewport() این امکان میسر خواهد شد. از آنجایی که متد getViewport()  زوم لازم را در هر محله برای ما انجام خواهد داد ، صفت مربوط به بزرگنمایی سندمان را در این وضعیت به آن بدهیم.

var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);

ابعاد صفحه مدنظر به میزان بزرگنمایی و اندازه صفحه اصلی بستگی دارد . برای اینکه مطمئن شویم تمام محتوا در فضای مورد نظر ما دیده خواهد شد ، باید فضای مورد نظر خود را مطابق با سند خود تغییر دهیم .

canvas.width = viewport.width;
canvas.height = viewport.height;

حال به رندر صفحه می رسیم :

page.render({
canvasContext: ctx,
viewport: viewport
});

حال اگر صفحه وب را در یک مرورگر باز کنید ، می توانید فایل PDF را مشاهده نمائید :

نحوه ایجاد نمایشگر PDF از طریق جاوا اسکریپت Screen Shot 2019 01 07 at 10

حتما به این نکته توجه کردید که در حال حاضر فضای سند PDF ما به اندازه صفحه و میزان بزرگنمایی ما بستگی دارد . زیاد ایده آل شاید نباشد که هر صفحه از سند PDF ما یک ابعادی داشته باشد در حالی که کاربر در حال مطالعه سند خودش می باشد.راه حل اینکار دادن عرض و ارتفاع ثابت به تگ div است و دادن خصوصیت overflow که مقدار آن auto خواهد بود. اگر کمی طراحی وب بلد باشید خواهید دانست که این ویژگی اسکرول افقی و عمودی را به سند شما اضافه خواهد کرد.کد زیر را به تگ <head> اضافه نمائید :

<style>
    #canvas_container {
        width: 800px;
        height: 450px;
        overflow: auto;
    }
</style>

می توانید یک سری ویژگی CSS به سند اضافه کنید . البته استفاده از این ویژگی ها اختیاری خواهند بود :

#canvas_container {
background: #333;
text-align: center;
border: solid 3px;
}
نحوه ایجاد نمایشگر PDF از طریق جاوا اسکریپت sdfsdfsdfs46453563864345432

۵٫ تغییرات در صفحه فعلی

در حال حاضر نمایشگر سند PDF ما تنها قابلیت نمایش صفحه اول از هر سندی که ما به آن می دهیم را خواهد داشت. برای اینکه کاربران بتوانند صفحات سند را تغییر بدهند ، ما با رویداد ها(Event) برای دکمه های go_previous و go_next  فراخوانی کنیم .

در داخل رویداد مربوط به دکمه go_previous ، ما باید از صفت currentPage در وضعیت مربوطه کم کنیم تا زمانی که مطمئن شویم از ۱ کمتر نخواهد شد.

علاوه بر این مقدار current_page را در فیلد نمایش شماره صفحه باید بروز رسانی کنیم.

document.getElementById('go_previous')
        .addEventListener('click', (e) => {
            if(myState.pdf == null
               || myState.currentPage == 1) return;
            myState.currentPage -= 1;
            document.getElementById("current_page")
                    .value = myState.currentPage;
            render();
        });

به طور مشابه برای رویداد دکمه go_previous کارهای مشابه بالا را باید انجام دهیم. ضمنا نباید از تعداد صفحات سند PDF تجاوز کرده و این کار را با مشخص کردن صفت numPages در شی(object) به نام _pdfInfo انجام می دهیم.

document.getElementById('go_next')
.addEventListener('click', (e) => {
if(myState.pdf == null
|| myState.currentPage > myState.pdf
._pdfInfo.numPages)
return;
myState.currentPage += 1;
document.getElementById("current_page")
.value = myState.currentPage;
render();
});

در پایان ما باید یک رویداد مربوط به صفحه کلید را برای فیلد current_page اضافه کنیم تا کاربر به هر صفحه ای که تمایل داشت ، مراجعه کند .

document.getElementById('current_page')
.addEventListener('keypress', (e) => {
if(myState.pdf == null) return;
// Get key code
var code = (e.keyCode ? e.keyCode : e.which);
// If key code matches that of the Enter key
if(code == 13) {
var desiredPage =
document.getElementById('current_page')
.valueAsNumber;
if(desiredPage >= ۱
&& desiredPage <= myState.pdf
._pdfInfo.numPages) {
myState.currentPage = desiredPage;
document.getElementById("current_page")
.value = desiredPage;
render();
}
}
});

درک تغییر زوم صفحه را به عنوان تمرینی برای شما دوستان برنامه نویسی قرار خواهیم داد. صرفا به ارائه کدهای مربوط به بزرگنمایی و کوچک کردن صفحه اکتفا می کنیم .

document.getElementById('zoom_in')
.addEventListener('click', (e) => {
if(myState.pdf == null) return;
myState.zoom += 0.5;
render();
});
document.getElementById('zoom_out')
.addEventListener('click', (e) => {
if(myState.pdf == null) return;
myState.zoom -= 0.5;
render();
});

حال شما می دانید که چطور از کتابخانه PDF.js برای ایجاد سند PDF در محیط وب خود استفاده نمائید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

3 × 4 =

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