ปรับปรุง : 2566-11-09 (ปรับข้อมูลใหม่)

jsPDF คืออะไร

jsPDF คือ Library สำหรับสร้างแฟ้ม pdf ด้วย Javascript ที่สามารถกำหนดขนาดหน้ากระดาษ แทรกภาพ ตัวอักษร ภาพเวกเตอร์ โหลดฟอนต์ภายนอก ทำงานร่วมกับ Library อื่น เช่น เขียนตาราง ค้นเพิ่มเติมได้ใน github.com ของ MrRio

การติดตั้ง และใช้ jsPDF Library

jsPDF คือ Library สำหรับสร้างแฟ้ม pdf ด้วย Javascript ที่สามารถกำหนดขนาดหน้ากระดาษ แทรกภาพ ตัวอักษร ภาพเวกเตอร์ โหลดฟอนต์ภายนอก ทำงานร่วมกับ Library อื่น เช่น เขียนตาราง ค้นเพิ่มเติมได้ใน github.com ของ MrRio หรือดูตัวอย่างเต็ม (Full example) ที่ githack.com/MrRio/jsPDF
การติดตั้งและใช้งานมีหลายวิธี
1. npm install jspdf --save
2. yarn add jspdf
3. โหลดมาลงใน localhost หรือใน folder
4. อ้างอิงออนไลน์ จาก CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
หรือ
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

* Library นี้สามารถทำงานได้บน folder ใด ซึ่งไม่ต้องเป็น server
เตรียม xampp บน localhost
- สั่ง start apache บน xampp
- chrome - https://github.com/MrRio/jsPDF
- ดาวน์โหลด code ได้ jsPDF-master.zip 12,680 KB
- ทำการ Extract here แล้วย้ายห้อง jsPDF-master ไปไว้ใน xampp/htdocs
- ถ้าใช้ library รุ่นเก่า ไม่ต้องมี window.jsPDF = window.jspdf.jsPDF; ก็ได้

1. สร้างแฟ้ม a4.htm

<script src="/jsPDF-master/dist/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");
</script>

2. ตัวอย่างด้วย node.js
เช่น สร้าง code 4 บรรทัดด้วย c:\>copy con a4.js
แล้วสั่งประมวลผลด้วย c:\>node a4.js

const { jsPDF } = require("jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");

ผลคือ ได้แฟ้ม a4.pdf ขนาด 3,164 bytes ใน folder

3. ตัวอย่างด้วย Node REPL
พิมพ์ทีละบรรทัด จะพบ undefined ตามปกติ
หลังออกจาก Node ด้วย .exit
ผลคือ ได้แฟ้ม a4.pdf ขนาด 3,164 bytes ใน folder
4. ตัวอย่างด้วย Typescript (3rd party library)
อ่านเพิ่มที่ npmjs.com/package/jspdf
d:\> npm install typescript --save-dev
d:\> tsc -v (Version 4.3.5 is compiler)
d:\> tsc a4.ts ผลการ compile ที่ได้คือ a4.js
d:\> node a4.js ผลคือ a4.pdf

// a4.ts คือ source code
import jsPDF from 'jspdf'; // หรือ import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");
// a4.js คือ ผลการ compile
var jspdf_1 = require("jspdf");
var doc = new jspdf_1.jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");

การสร้างแฟ้ม pdf ด้วย javascript ผ่าน JSPDF

ตัวอย่างฟังก์ชันสร้าง pdf (ทำงานได้ทั้ง Server และ C:)
1. Hello world 1
2. Hello world 2
3. Hello world + Thailand
4. User input
5. Thai font
..
10. Draw line - Landscape
11. write pdf from html
12. write pdf from jspdf-autotable
13. html textbox textarea
14. textbox และ album

jspdf1.htm
ตัวอย่าง THSarabunNew ที่ github.../Fonts.zip
ตัวอย่างที่ github.io/jsPDF/examples
เอกสารที่ github.io/jsPDF/docs
บริการเปิดอ่าน PDF ด้วย PDF.JS

<!DOCTYPE html><html><head><title>jspdf.htm</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
function f1() {
    var pdf = new jsPDF();
    source = "Hello world";
    margins = { top: 10, bottom: 10, left: 10, width: 300 };
    pdf.fromHTML( source, margins.left, margins.top, { 'width': margins.width },
    function (dispose) { pdf.save('Test.pdf'); }, margins);
}
</script>
</head><body>
<a href="javascript:f1()" class="button">Hello world</a>
</body></html>

Node.js
ชุดโปรแกรมสำหรับสั่งให้โปรแกรมจาวาสคริ๊ปที่เขียนขึ้นทำงานได้ ส่วน NPM คือ ตัวจัดการ Node Package

React Native
JS Framework สำหรับพัฒนา Mobile App แบบ Cross-platform ที่เขียนครั้งเดียว ใช้ได้ทั้งบน Android และ iOS

PDF.JS
ชุดโปรแกรมเพื่อแสดงแฟ้มข้อมูลแบบ PDF บนเว็บบราวเซอร์สำหรับทุกอุปกรณ์ จึงไม่จำเป็นต้องมีแอพอื่น

Laravel
เฟรมเวิร์คภาษาพีเอชพี ในแบบ MVC ช่วยพัฒนาระบบได้อย่างรวดเร็ว แทนการพัฒนาตามหลักโปรแกรมโครงสร้าง

Javascript
คล้ายภาษาซี ใช้ร่วมกับเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลบนบราวเซอร์ นำเสนอข้อมูลแบบโต้ตอบ

Java
พัฒนาโดย Sun ขายให้ Oracle ใช้เขียนโปรแกรมเชิงวัตถุประกอบด้วย Method มี State, Identity, Behavior

Bootstrap
ฟอนท์เอ็นเฟรมเวิร์คที่รวมเอาแฟ้มจาวาสคริ๊ปและซีเอสเอสที่ประมวลมาแล้วว่าดี เรียกใช้ง่าย จึงพัฒนาได้เร็ว

CSS
สไตล์ชีต ภาษากำหนดรูปแบบในเอชทีเอ็มแอล กำหนดเลย์เอาท์ สีอักษร สีพื้น ตัวอักษร การจัดวาง เส้นขอบ

ต.ย. ส่งเอกสาร ปพ.1 ออกเป็น pdf

ตัวอย่าง การใช้ jsPDF Library เพื่อส่งภาพหน้าจอเว็บเพจ ออกไปเป็น image หรือ pdf ได้ทดสอบหลายแบบแยกตัวอย่างไว้แบบละแฟ้ม กับ เอกสารประเมินผลตามหลักสูตรการศึกษาขั้นพื้นฐาน หรือ ระเบียนแสดงผลการเรียน(ปพ.1) มัธยมศึกษาตอนต้น หรือ ระเบียนแสดงผลการเรียนหลักสูตรแกนกลางการศึกษาขั้นพื้นฐาน ระดับมัธยมศึกษาตอนต้น ที่มีปุ่ม export ออกมาไปเป็น pdf หรือ png ด้วย jsPDF Library หลายรุ่น ซึ่งผลการทดสอบพบว่า ต้องเปลี่ยนวิธีการเขียน Javascript ไปใช้แบบ await html2canvas(data2).then((canvas) => { .. } แทนแบบ html2canvas($('#page1'), { onrendered: function(canvas) { .. }});
ต.ย. แบบที่ 1 : ใช้ await หรือ promise ที่แสดงภาพได้ปกติ
ต.ย. แบบที่ 2 : ใช้ 2.5.1 onrendered ไม่สามารถแสดงภาพ
ต.ย. แบบที่ 3 : ใช้ 2.5.1 doc.html(.., ..) มีตราครุฑ ? แต่ไทยไม่ปรากฎ
ต.ย. แบบที่ 4 : ใช้ 1.4.1 onrendered มีภาพ ? แต่มีปัญหาสระ
ต.ย. แบบที่ 5 : ปรับแบบที่ 1 ปพ.1 มาครบ

<!-- Filename : export_to_png_pdf.htm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="sample" style="margin-left:auto;margin-right:auto;width:min-content;">
<fieldset><legend>Sample 1</legend>
Content of sample 1
</fieldset>  
</div>
<img src="icon_photo.png" onclick="exportdivtopng('sample')" />
<img src="icon_pdf.png" onclick="exportdivtopdf('sample','1.0')" />
<script>
function exportdivtopng(fld) {
  html2canvas(document.querySelector('#' + fld)).then((canvas) => {
    const fname = fld;
    let img = canvas.toDataURL('image/png');
    downloadImage(img, `${fname}`);
  });
}
function downloadImage(blob, fileName) {
    const tmpLink = window.document.createElement('a');
    tmpLink.style = 'display:none;';
    tmpLink.download = fileName;
    tmpLink.href = blob;
    document.body.appendChild(tmpLink);
    tmpLink.click();
    document.body.removeChild(tmpLink);
    tmpLink.remove();
}
function exportdivtopdf(fld,scale) {
    (async() => {
    var data1 = document.getElementById(fld);
    await html2canvas(data1).then((canvas) => {
        var pdf = new jsPDF('portrait', 'pt','a4');
        const contentDataURL = canvas.toDataURL('image/png');
        pdf.addImage(contentDataURL, 'PNG', 10, 10, canvas.width - 20, canvas.height  - 20);
        pdf.save(fld + '.pdf');
    });
    })()
}
</script>

☸ export_to_pdf.htm : ส่งข้อมูลใน webpage ออกไปเป็น PDF
☸ export_to_png.htm: ส่งข้อมูลใน webpage ออกไปเป็น PNG
☸ export_to_png_pdf.htm: ส่งข้อมูลใน webpage ออกไปเป็น PNG และ PDF

ส่งข้อมูลออกเป็น ส่งออก: image

Export to PDF

อธิบายโค้ด JavaScript สำหรับ Export Div เป็น PDF โค้ดนี้ใช้สำหรับแปลงเนื้อหาภายใน <div> ที่มี id เป็น "sample_pdf" ให้กลายเป็นไฟล์ PDF โดยใช้ไลบรารี jsPDF และ html2canvas พร้อมปุ่ม (รูปภาพ) สำหรับสั่ง export [.pp.] หรือ โค้ดนี้ใช้ไลบรารี jspdf และ html2canvas เพื่อแปลงองค์ประกอบ HTML ที่กำหนดให้เป็นรูปภาพ (โดยใช้ html2canvas) จากนั้นจึงฝังรูปภาพนั้นลงในเอกสาร PDF (โดยใช้ jspdf) และบันทึกไฟล์ PDF [.gm.]

<!-- Filename : export_to_pdf.htm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="sample_pdf" style="margin-left:auto;margin-right:auto;width:min-content;">
<fieldset><legend>Sample 2</legend>
Content of sample 2
</fieldset>  
</div>
<img src="icon_pdf.png" onclick="exportdivtopdf('sample_pdf','1.0')" />
<script>
function exportdivtopdf(fld,scale) {
    (async() => {
    var data1 = document.getElementById(fld);
    await html2canvas(data1).then((canvas) => {
        var pdf = new jsPDF('portrait', 'pt','a4');
        const contentDataURL = canvas.toDataURL('image/png');
        pdf.addImage(contentDataURL, 'PNG', 10, 10, canvas.width - 20, canvas.height  - 20);
        pdf.save(fld + '.pdf');
    });
    })()
}
</script>

Export to PNG

อธิบายโค้ด JavaScript สำหรับ Export Div เป็น PNG โค้ดนี้ใช้สำหรับแปลงเนื้อหาภายใน <div> ที่มี id เป็น "sample_png" ให้กลายเป็นไฟล์รูปภาพ PNG โดยใช้ไลบรารี html2canvas พร้อมปุ่ม (รูปภาพ) สำหรับสั่ง export [.pp.] หรือ โค้ดที่คุณให้มาเป็นโค้ด HTML และ JavaScript ที่ใช้สำหรับแปลงเนื้อหา HTML บางส่วนให้เป็นรูปภาพ PNG และดาวน์โหลดรูปภาพนั้น [.gm.]

<!-- Filename : export_to_png.htm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="sample_png" style="margin-left:auto;margin-right:auto;width:min-content;">
<fieldset><legend>Sample 3</legend>
Content of sample 3
</fieldset>  
</div>
<img src="icon_photo.png" onclick="exportdivtopng('sample_png')" />
<script>
function exportdivtopng(fld) {
  html2canvas(document.querySelector('#' + fld)).then((canvas) => {
    const fname = fld;
    let img = canvas.toDataURL('image/png');
    downloadImage(img, `${fname}`);
  });
}
function downloadImage(blob, fileName) {
    const tmpLink = window.document.createElement('a');
    tmpLink.style = 'display:none;';
    tmpLink.download = fileName;
    tmpLink.href = blob;
    document.body.appendChild(tmpLink);
    tmpLink.click();
    document.body.removeChild(tmpLink);
    tmpLink.remove();
}
</script>

ใช้เวลาโหลดเว็บเพจ: 163 มิลลิวินาที สูง: 4244 จุด กว้าง: 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net