สร้าง PDF ผ่านโอเพ่นซอร์ส JavaScript API

เริ่มต้นใช้งาน JsPDF

วิธีที่แนะนำและง่ายที่สุดในการเริ่มต้นคือวางไลบรารีที่โฮสต์ไว้ของ CDN ลงในเพจของคุณ ด้านล่างนี้คือคำสั่ง

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> 

การสร้างเอกสาร PDF ผ่าน JavaScript Library

JsPDF นำเสนอฟังก์ชันสำหรับการสร้างเอกสาร PDF เช่นเดียวกับการแก้ไขภายในแอปพลิเคชัน JavaScript คุณสามารถสร้างเอกสาร PDF และเพิ่มหน้าใหม่ได้อย่างง่ายดาย คุณสามารถกำหนดการวางแนวเอกสาร หน่วย และรูปแบบหน้าเริ่มต้นในขณะที่สร้างเอกสารใหม่ เมื่อสร้าง PDF แล้ว คุณสามารถเพิ่มหน้าใหม่ แทรกรูปภาพ ฯลฯ ได้อย่างง่ายดาย

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

การแทรกข้อความลงในเอกสาร PDF ผ่าน JavaScript

JsPDF API ช่วยให้นักพัฒนา JavaScript เพิ่มและแสดงข้อความภายในเอกสาร PDF ในการวาดข้อความ คุณต้องกำหนดชื่อแบบอักษร เราสามารถเลือกฟอนต์ที่มีอยู่ได้ นอกจากนี้ยังสามารถเปลี่ยนตระกูลแบบอักษรและรูปแบบตัวอักษรได้อีกด้วย หลังจากนั้น เราสามารถกำหนดขนาดตัวอักษร สีข้อความ และอื่นๆ ได้

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

การเพิ่มกราฟิกลงในเอกสาร PDF ผ่าน JavaScript

ไลบรารี JsPDF ช่วยให้จาวาสคริปต์มืออาชีพสามารถวาดกราฟิกภายในเอกสาร PDF กราฟิกเพิ่มมูลค่าให้กับเนื้อหาเสมอ อันดับแรก เราต้องตั้งค่าการเติมรูปร่างที่วาดและสีเส้นขีด นอกจากนี้เรายังสามารถกำหนดความกว้างของเส้นขีด ทุกฟังก์ชันการวาดรูปร่างใช้พิกัดจุดศูนย์กลางเป็นพารามิเตอร์แรกสองตัว (ยกเว้นรูปสามเหลี่ยม) พวกเขายังใช้รูปแบบการวาดพารามิเตอร์สุดท้าย เราสามารถวาดวงรีได้โดยการส่งผ่านรัศมีหรือวงกลมสองวง โดยผ่านรัศมีเดียวเท่านั้น สามเหลี่ยม โดยผ่านพิกัดของแต่ละมุม และอื่นๆ

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)