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

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

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

با سلام

نحوه استفاده از این کتابخانه بسیار آسان می باشد . کافی ست فایل 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"...

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

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