تبدیل فرم HTML به PDF توسط jsPDF

در این مقاله شما میتوانید اطلاعات مربوط به فرم HTML یک صفحه وب را با کمک کتابخانه jspdf به یک فایل PDF تبدیل کنید .

با سلام

نحوه استفاده از این کتابخانه بسیار آسان می باشد . کافی ست فایل jQuery و فایل jspdf را به صفحه خود اضافه کنید و از متدها کتابخانه jspdf در صفحه مورد نظر یا یک فایل js جداگانه استفاده کنید . در ادامه چند متد اصلی این کتابخانه را برای شما توضیح خواهیم داد.

چاپ متن : در متد پایین موقعیت x و y صفحه و متن دلخواه را وارد کنید.

doc.text(x, y, 'string');

ذخیره فایل PDF : متد زیر جهت ذیره فایل به صورت فایل PDF است ، کافی ست نام فایل را وارد کنید .

doc.save('filename.pdf');

ایجاد صفحه جدید

doc.addPage();

تغییر style فونت : توسط این متد شما می توانید style فونت را تغییر دهید (italic یا bold)

doc.setFontType('stylename');

تعیین فونت : برای تعیین فونت مورد نظر خود کافی ست نام فونت را داخل متد زیر وارد کنید. (Times New Roman, Comic, Arial و ...)

doc.setFont('fontfaceName');

کد HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>نمونه تبدیل فرم به PDF توسط jsPDF</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="jspdf.debug.js"></script>
    <script type="text/javascript" src="basic.js"></script>

    <style type="text/css">
        .auto-style1 {
            width: 100%;
            text-align: center;
        }        
    </style>

</head>

<body>
    <center>
        <h1>نمونه تبدیل فرم به PDF توسط jsPDF</h1>

        <table class="auto-style1">
            <tr>
                <td>
                    <img src="html.jpg" align="left" alt="HTML" height="100px" /></td>
                <td>
                    <img src="download.jpg" align="left" alt="Download" height="100px" /></td>
                <td>
                    <img src="pdf.png" align="left" alt="PDF" height="100px" /></td>
            </tr>
        </table>
        <br />        
        <div>
            <b>
                <label style="color: blue">First Name</label></b>
            <input type="text" id="fname" style="margin-left: 24px" /><br />
            <br />
            <b>
                <label style="color: blue">Last Name</label></b>
            <input type="text" id="lname" style="margin-left: 27px" /><br />
            <br />
            <b>
                <label style="color: blue">Email</label></b>
            <input type="text" id="email" style="margin-left: 60px" /><br />
            <br />

            <button onclick="demoPDF()">تبدیل به فایل PDF</button>
        </div>

        <h2><a href="http://www.barnamenevisan.org" title="برنامه نویسان">برنامه نویسان</a></h2>
    </center>
</body>
</html>

کد JavaScript :

function demoPDF() {
    var doc = new jsPDF();
    doc.text(10, 10, 'Hello everybody');
    doc.text(10, 20, 'My name is');
    
    doc.text(10, 60, 'Contact me at');
    
    doc.text(10, 50, 'I have just created a simple pdf using jspdf');


    doc.setFont("times");
	
    doc.setFontType("italic");
   
    doc.text(50, 60, document.getElementById("email").value);	//append email id in pdf
    			
    doc.setFontType("bold");
    doc.setTextColor(255,0,0);  //set font color to red
    doc.text(10, 30, document.getElementById("fname").value); 	//append first name in pdf
    doc.text(10, 40, document.getElementById("lname").value);	//append last name in pdf

   
    

    doc.addPage(); // add new page in pdf
    
    doc.setTextColor(165,0,0);
    doc.text(10, 20, 'extra page to write');

    doc.save(document.getElementById("email").value); // Save the PDF with name "Email Address"...

در انتها پروژه بالا ضمیمه مقاله شده است. امیدوارم استفاده لازم را برده باشید . موفق و سر بلند باشید.

فایل های ضمیمه

jspdf.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

تبدیل فرم HTML به PDF توسط jsPDF

فایل های ضمیمه

سجاد باقرزاده

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید