jsPDF
v2.5.2
Perpustakaan untuk menghasilkan PDF dalam JavaScript.
Anda dapat menghubungi saya di twitter: @MrRio atau kunjungi situs web perusahaan saya untuk konsultasi.
jsPDF kini dikelola bersama oleh yWorks - pakar pembuatan diagram.
Direkomendasikan: dapatkan jsPDF dari npm:
npm install jspdf --save
# or
yarn add jspdfAlternatifnya, muat dari CDN:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >Atau selalu dapatkan versi terbaru melalui unpkg
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > Folder dist paket ini berisi berbagai jenis file:
core-js , varian umd bersifat mandiri.Biasanya tidak perlu menentukan file persisnya dalam pernyataan import. Alat build atau Node secara otomatis mencari file yang tepat, jadi mengimpor "jspdf" saja sudah cukup.
Maka Anda siap untuk mulai membuat dokumen Anda:
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" ) ;Jika Anda ingin mengubah ukuran, orientasi, atau satuan kertas, Anda dapat melakukan:
// 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" ) ; Beberapa fungsi jsPDF memerlukan dependensi opsional. Misalnya metode html , yang bergantung pada html2canvas dan, bila disertakan dengan dokumen string HTML, dompurify . JsPDF memuatnya secara dinamis bila diperlukan (menggunakan format modul masing-masing, misalnya impor dinamis). Alat build seperti Webpack akan secara otomatis membuat potongan terpisah untuk setiap dependensi opsional. Jika aplikasi Anda tidak menggunakan dependensi opsional apa pun, Anda dapat mencegah Webpack membuat potongan dengan mendefinisikannya sebagai dependensi eksternal:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; Dalam proyek Vue CLI , eksternal dapat ditentukan melalui properti konfigurasiWebpack atau chainWebpack dari file vue.config.js (pertama-tama, perlu dibuat di proyek baru).
Dalam proyek Angular , eksternal dapat ditentukan menggunakan pembuat webpack khusus.
Dalam proyek React ( create-react-app ), eksternal dapat didefinisikan dengan menggunakan react-app-rewired atau ejecting.
jsPDF dapat diimpor sama seperti perpustakaan pihak ketiga lainnya. Ini berfungsi dengan semua perangkat dan kerangka kerja utama. jsPDF juga menawarkan file pengetikan untuk proyek TypeScript.
import { jsPDF } from "jspdf" ;Anda dapat menambahkan jsPDF ke proyek meteor Anda sebagai berikut:
meteor add jspdf:core
jsPDF memerlukan API browser modern agar dapat berfungsi. Untuk menggunakan jsPDF di browser lama seperti Internet Explorer, diperlukan polyfill. Anda dapat memuat semua polyfill yang diperlukan sebagai berikut:
import "jspdf/dist/polyfills.es.js" ;Alternatifnya, Anda dapat memuat file polyfill yang sudah dipaketkan sebelumnya. Ini tidak disarankan, karena Anda mungkin memuat polyfill beberapa kali. Mungkin masih bagus untuk aplikasi kecil atau POC cepat.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > 14 font standar dalam PDF terbatas pada halaman kode ASCII. Jika Anda ingin menggunakan UTF-8 Anda harus mengintegrasikan font khusus, yang menyediakan mesin terbang yang diperlukan. jsPDF mendukung file .ttf. Jadi, jika Anda ingin memiliki misalnya teks berbahasa Mandarin di pdf Anda, font Anda harus memiliki mesin terbang berbahasa Mandarin yang diperlukan. Jadi, periksa apakah font Anda mendukung mesin terbang yang diinginkan atau font tersebut akan menampilkan karakter yang kacau, bukan teks yang benar.
Untuk menambahkan font ke jsPDF gunakan fontconverter kami di /fontconverter/fontconverter.html. Fontconverter akan membuat file js dengan konten file ttf yang disediakan sebagai string berkode base64 dan kode tambahan untuk jsPDF. Anda hanya perlu menambahkan File js yang dihasilkan ini ke proyek Anda. Anda kemudian siap untuk menggunakan metode setFont dalam kode Anda dan menulis teks yang dikodekan UTF-8.
Alternatifnya, Anda bisa memuat konten file *.ttf sebagai string biner menggunakan fetch atau XMLHttpRequest dan menambahkan font ke file 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" ) ; Sejak penggabungan dengan fork yWorks ada banyak fitur baru. Namun, beberapa di antaranya melanggar API, itulah sebabnya ada peralihan API antara dua mode API:
Anda dapat beralih di antara kedua mode tersebut dengan menelepon
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF akan secara otomatis beralih kembali ke mode API asli setelah panggilan balik dijalankan.
Silakan periksa apakah pertanyaan Anda sudah ditangani di Stackoverflow https://stackoverflow.com/questions/tagged/jspdf. Jangan ragu untuk mengajukan pertanyaan di sana dengan tag jspdf .
Permintaan fitur, laporan bug, dll. sangat diterima sebagai masalah. Perhatikan bahwa laporan bug harus mengikuti pedoman berikut:
jsPDF tidak bisa hidup tanpa bantuan komunitas! Jika menurut Anda ada fitur yang hilang atau Anda menemukan bug, harap pertimbangkan apakah Anda dapat meluangkan waktu satu atau dua jam dan menyiapkan permintaan penarikan. Jika Anda hanya tertarik dengan proyek ini dan ingin membantu, lihatlah isu-isu yang terbuka, terutama yang diberi label "bug".
Anda dapat menemukan informasi tentang pembuatan dan pengujian jsPDF di panduan kontribusi
Hak Cipta (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.
PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK ADA PELANGGARAN. DALAM KEADAAN APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU TANGGUNG JAWAB LAINNYA, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, DARI ATAU SEHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.
