jsPDF
v2.5.2
ไลบรารีสำหรับสร้าง PDF ใน JavaScript
คุณสามารถติดตามฉันได้ทาง Twitter: @MrRio หรือไปที่เว็บไซต์ของบริษัทของฉันเพื่อขอคำปรึกษา
ขณะนี้ jsPDF ได้รับการดูแลร่วมกันโดย yWorks ซึ่งเป็นผู้เชี่ยวชาญด้านการสร้างไดอะแกรม
แนะนำ: รับ jsPDF จาก npm:
npm install jspdf --save
# or
yarn add jspdfหรือโหลดจาก CDN:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >หรือรับเวอร์ชันล่าสุดผ่าน unpkg เสมอ
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > โฟลเดอร์ dist ของแพ็คเกจนี้ประกอบด้วยไฟล์ประเภทต่างๆ:
core-js ตัวแปร umd นั้นมีอยู่ในตัวเองโดยปกติแล้ว ไม่จำเป็นต้องระบุไฟล์ให้ตรงกันทุกประการในคำสั่งนำเข้า เครื่องมือสร้างหรือโหนดจะค้นหาไฟล์ที่ถูกต้องโดยอัตโนมัติ ดังนั้นการนำเข้า "jspdf" ก็เพียงพอแล้ว
จากนั้นคุณก็พร้อมที่จะเริ่มสร้างเอกสารของคุณแล้ว:
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" ) ;หากคุณต้องการเปลี่ยนขนาดกระดาษ การวางแนว หรือหน่วย คุณสามารถทำได้:
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ; const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ; const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; ฟังก์ชันบางอย่างของ jsPDF จำเป็นต้องมีการพึ่งพาเพิ่มเติม เช่น วิธี html ซึ่งขึ้นอยู่กับ html2canvas และเมื่อมาพร้อมกับเอกสาร HTML สตริง dompurify JsPDF โหลดแบบไดนามิกเมื่อจำเป็น (โดยใช้รูปแบบโมดูลที่เกี่ยวข้อง เช่น การนำเข้าแบบไดนามิก) เครื่องมือสร้างเช่น Webpack จะสร้างชิ้นส่วนแยกกันโดยอัตโนมัติสำหรับการขึ้นต่อกันที่เป็นทางเลือกแต่ละรายการ หากแอปพลิเคชันของคุณไม่ได้ใช้การขึ้นต่อกันที่เป็นทางเลือกใดๆ คุณสามารถป้องกันไม่ให้ Webpack สร้างชิ้นส่วนได้โดยกำหนดให้เป็นการขึ้นต่อกันภายนอก:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; ในโปรเจ็กต์ Vue CLI สามารถกำหนด externals ผ่านคุณสมบัติ configurationWebpack หรือ chainWebpack ของไฟล์ vue.config.js (ต้องสร้างก่อนในโปรเจ็กต์ใหม่)
ในโปรเจ็กต์ เชิงมุม สามารถกำหนดภายนอกได้โดยใช้ตัวสร้าง webpack แบบกำหนดเอง
ในโปรเจ็กต์ React ( create-react-app ) ภายนอกสามารถกำหนดได้โดยใช้ react-app-rewired หรือดีดออก
jsPDF สามารถนำเข้าได้เช่นเดียวกับไลบรารีบุคคลที่สามอื่นๆ สิ่งนี้ใช้ได้กับชุดเครื่องมือและกรอบงานหลักทั้งหมด jsPDF ยังมีไฟล์การพิมพ์สำหรับโปรเจ็กต์ TypeScript
import { jsPDF } from "jspdf" ;คุณสามารถเพิ่ม jsPDF ให้กับ meteor-project ของคุณได้ดังนี้:
meteor add jspdf:core
jsPDF ต้องการ API ของเบราว์เซอร์ที่ทันสมัยเพื่อให้สามารถทำงานได้ หากต้องการใช้ jsPDF ในเบราว์เซอร์รุ่นเก่า เช่น Internet Explorer จำเป็นต้องมีโพลีฟิล คุณสามารถโหลดโพลีฟิลที่จำเป็นทั้งหมดได้ดังนี้:
import "jspdf/dist/polyfills.es.js" ;หรือคุณสามารถโหลดไฟล์โพลีฟิลที่รวมกลุ่มไว้ล่วงหน้าได้ ไม่แนะนำให้ทำเช่นนี้ เนื่องจากคุณอาจต้องโหลดโพลีฟิลหลายครั้ง อาจยังดีสำหรับแอปพลิเคชันขนาดเล็กหรือ POC ที่รวดเร็ว
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > ฟอนต์มาตรฐานทั้ง 14 ฟอนต์ในรูปแบบ PDF นั้นจำกัดอยู่ที่โค้ดเพจ ASCII หากคุณต้องการใช้ UTF-8 คุณต้องรวมแบบอักษรที่กำหนดเองซึ่งมีสัญลักษณ์ที่จำเป็น jsPDF รองรับไฟล์ .ttf ดังนั้น หากคุณต้องการมีข้อความภาษาจีนตัวอย่างใน pdf ของคุณ แบบอักษรของคุณจะต้องมีสัญลักษณ์ภาษาจีนที่จำเป็น ดังนั้นตรวจสอบว่าแบบอักษรของคุณรองรับร่ายมนตร์ที่ต้องการหรือไม่ ไม่เช่นนั้นจะแสดงอักขระที่อ่านไม่ออกแทนที่จะเป็นข้อความที่ถูกต้อง
หากต้องการเพิ่มฟอนต์ให้กับ jsPDF ให้ใช้ฟอนต์คอนเวอร์เตอร์ของเราใน /fontconverter/fontconverter.html ตัวแปลงแบบอักษรจะสร้างไฟล์ js โดยมีเนื้อหาของไฟล์ ttf ที่ระบุเป็นสตริงที่เข้ารหัส base64 และโค้ดเพิ่มเติมสำหรับ jsPDF คุณเพียงแค่ต้องเพิ่มไฟล์ js-File ที่สร้างขึ้นนี้ให้กับโครงการของคุณ จากนั้นคุณก็พร้อมที่จะใช้ setFont-method ในโค้ดของคุณและเขียนข้อความที่เข้ารหัส UTF-8
หรือคุณสามารถโหลดเนื้อหาของไฟล์ *.ttf เป็นสตริงไบนารี่โดยใช้ fetch หรือ XMLHttpRequest และเพิ่มแบบอักษรลงในไฟล์ PDF:
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ; นับตั้งแต่รวมเข้ากับ yWorks fork ก็มีคุณสมบัติใหม่มากมาย อย่างไรก็ตาม บางส่วน API ขัดข้อง ซึ่งเป็นสาเหตุที่ทำให้มีการสลับ API ระหว่างโหมด API สองโหมด:
คุณสามารถสลับระหว่างสองโหมดได้โดยการโทร
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF จะเปลี่ยนกลับไปเป็นโหมด API ดั้งเดิมโดยอัตโนมัติหลังจากเรียกใช้การโทรกลับ
โปรดตรวจสอบว่าคำถามของคุณได้รับการจัดการแล้วที่ Stackoverflow https://stackoverflow.com/questions/tagged/jspdf หรือไม่ อย่าลังเลที่จะถามคำถามด้วยแท็ก jspdf
คำขอคุณลักษณะ รายงานข้อบกพร่อง ฯลฯ ถือเป็นปัญหาที่ยินดีอย่างยิ่ง โปรดทราบว่ารายงานข้อผิดพลาดควรเป็นไปตามหลักเกณฑ์เหล่านี้:
jsPDF ไม่สามารถอยู่ได้โดยปราศจากความช่วยเหลือจากชุมชน! หากคุณคิดว่าคุณสมบัติขาดหายไปหรือพบข้อบกพร่อง โปรดพิจารณาว่าคุณสามารถสละเวลาหนึ่งหรือสองชั่วโมงและเตรียมคำขอดึงได้หรือไม่ หากคุณเพียงสนใจในโครงการนี้และต้องการความช่วยเหลือ โปรดดูปัญหาที่เปิดอยู่ โดยเฉพาะปัญหาที่มีป้ายกำกับว่า "ข้อบกพร่อง"
คุณสามารถค้นหาข้อมูลเกี่ยวกับการสร้างและการทดสอบ jsPDF ได้ในคู่มือการสนับสนุน
ลิขสิทธิ์ (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
อนุญาตให้บุคคลใดก็ตามที่ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") อนุญาตโดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:
ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์นี้มีให้ "ตามที่เป็น" โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการค้าขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.
