Menghasilkan file PDF dengan JavaScript

268

Saya mencoba mengubah data XML menjadi file PDF dari halaman web dan saya berharap bisa melakukan ini sepenuhnya dalam JavaScript. Saya harus bisa menggambar teks, gambar, dan bentuk sederhana. Saya ingin sekali dapat melakukan ini sepenuhnya di browser.

amuba
sumber

Jawaban:

446

Saya baru saja menulis perpustakaan bernama jsPDF yang menghasilkan PDF menggunakan Javascript saja. Ini masih sangat muda, dan saya akan segera menambahkan fitur dan perbaikan bug. Juga mendapat beberapa ide untuk penyelesaian masalah di browser yang tidak mendukung URI Data. Ini dilisensikan di bawah lisensi MIT liberal.

Saya menemukan pertanyaan ini sebelum mulai menulis dan berpikir saya akan kembali dan memberi tahu Anda :)

Hasilkan PDF dalam Javascript

Contoh membuat file PDF "Hello World".

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

James Hall
sumber
10
Apakah saya menginspirasi sebagian jsPDF? Saya belajar tentang jsPDF pada hari Anda mengumumkannya. Tampak hebat sejauh ini. Saya akhirnya menggunakan Prawn karena dengan mudah perpustakaan generasi PDF terbaik di sana untuk kebutuhan saya. Saya masih ingin melakukan semua pekerjaan saya di browser karena saya tidak yakin saya akan mendapatkan Ruby pada sistem yang saya gunakan. Saya menonton jsPDF sangat dekat. Saya ingin membantu tetapi waktu saya sangat terbatas. Itu mungkin berubah di masa depan.
Amoeba
7
Anda memang menginspirasi itu :), saya mencari-cari di internet untuk melihat apakah sudah ada dan melihat bahwa beberapa orang akan merasa berguna. Beri tahu saya jika Anda ingin membantu. Saya @Rrio di twitter.
James Hall
23
Masih sangat hidup. 0.9.0rc2 Dirilis hari ini.
James Hall
87
@ James Hall, saya ingin mengucapkan terima kasih atas semua pekerjaan yang harus dilakukan untuk menulis ini, dan untuk lisensi MIT untuk membuat dunia menjadi tempat yang lebih baik ketika Anda bisa mengusahakannya untuk keuntungan Anda sendiri.
Charles Burns
16
Bisakah para downvoters menawarkan kepada kami ide atau solusi "yang lebih baik"? Ini adalah upaya yang sangat baik.
Onur Yıldırım
138

Pustaka javascript lain yang layak disebut adalah pdfmake .

Dukungan peramban tampaknya tidak sekuat jsPDF, juga tampaknya tidak ada opsi untuk bentuk, tetapi opsi untuk memformat teks lebih maju daripada opsi yang saat ini tersedia di jsPDF.

mg1075
sumber
7
Jawaban ini harus ditingkatkan lebih banyak, pdfmake jauh lebih kuat daripada jspdf. Namun hanya sebagai catatan, itu adalah pembungkus perpustakaan PDFKit.
vittore
2
catatan lain, jspdf tidak memiliki dukungan utf-8 dan pdfmake hanya memiliki dukungan utf-8 untuk font default.
Leo
"pdfmake.min.js - 0.1.22 - 9 jam yang lalu" Tidak mati, diperbarui hari ini.
zenbeni
Dari membandingkan dua taman bermain, bagi saya nampaknya jsPDF lebih ditargetkan pada pembuatan "grafik" PDF, sedangkan pdfmake lebih ditujukan untuk menghasilkan dokumen "biasa" yang diformat dengan baik, tampaknya memiliki lebih banyak opsi untuk pemformatan teks umum.
cslotty
Apakah ini ramah IE?
Wildhammer
59

Saya memelihara PDFKit , yang juga mendukung pdfmake (sudah disebutkan di sini). Ia bekerja di Node dan browser, dan mendukung banyak hal yang tidak dimiliki perpustakaan lain:

  • Menyematkan font yang terdaftar, dengan dukungan unicode.
  • Banyak hal tata letak teks canggih (kolom, pemecah halaman, pemecah baris unicode penuh, teks kaya dasar, dll.).
  • Mengerjakan lebih banyak lagi font untuk tipografi tingkat lanjut (pengikat OpenType / AAT, substitusi kontekstual, dll.). Segera hadir: lihat cabang fontkit jika Anda tertarik.
  • Lebih banyak barang grafis: gradien, dll.
  • Dibangun dengan alat modern seperti browserify dan stream. Dapat digunakan di browser dan node.

Lihatlah http://pdfkit.org/ untuk tutorial lengkap untuk melihat sendiri apa yang dapat dilakukan PDFKit. Dan untuk contoh jenis dokumen apa yang dapat diproduksi, lihat dokumen sebagai PDF yang dihasilkan dari beberapa file Markdown menggunakan PDFKit itu sendiri: http://pdfkit.org/docs/guide.pdf .

Anda juga dapat mencobanya secara interaktif di browser di sini: http://pdfkit.org/demo/browser.html .

devongovett
sumber
Bukankah ini perpustakaan sisi server? Saya pikir diskusi ada di perpustakaan js sisi klien.
Ash Catchem
10
PDFKit berfungsi di Node dan browser seperti yang disebutkan dalam jawaban. Lihat tautan ke demo browser.
devongovett
Apakah ini memampatkan gambar? Saya sedang mengerjakan aplikasi web yang fungsinya mirip dengan Camscanner dan saya mencari kreasi PDF melalui javascript untuk meningkatkan kompresi dan format multi halaman.
Trevor
@devongovett, bisakah Anda melihat pertanyaan saya tentang perpustakaan Anda?
ninbit
8

Proyek menarik lainnya adalah texlive.js .

Hal ini memungkinkan Anda untuk mengkompilasi (La) TeX ke PDF di browser.

Kpym
sumber
Contoh hello world diterjemahkan dengan baik tetapi membutuhkan sekitar 30-an untuk diselesaikan.
Sam Sippe
2

Anda dapat menggunakan layanan gratis ini dengan menambahkan tautan yang membuat pdf dari url apa pun (mis. Http://www.phys.org ):

http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en

boateng
sumber
1
Pembaruan: Ketika saya pergi untuk memeriksa layanan freehtmltopdf.com ini dikatakan tidak lagi tersedia. Kedengarannya seperti itu luar biasa!
Mark Duiker
diperiksa sekarang - berfungsi. dan itu luar biasa, saya menggunakan layanan di mana saya membayar untuk setiap pdf, dan perlu kode, ini adalah pemecah masalah.
Sergey Sob
-29

Bahkan jika Anda dapat menghasilkan memori dalam PDF dalam JavaScript, Anda masih akan memiliki masalah tentang cara mentransfer data tersebut ke pengguna. Sulit bagi JavaScript untuk hanya mendorong file ke pengguna.

Untuk mendapatkan file kepada pengguna, Anda ingin melakukan pengiriman server untuk mendapatkan browser untuk membuka dialog simpan.

Dengan itu, sebenarnya tidak terlalu sulit untuk menghasilkan PDF. Baca saja speknya.

Frank Krueger
sumber
1
Sama sekali tidak sulit, misalnya bekerja dengan Data-URIs en.wikipedia.org/wiki/Data_URI_scheme (Saya sudah pernah melakukannya tetapi saya tidak ingat apakah saya menggunakan Data-URI).
Björn
58
Anda dapat dengan mudah membuat file dalam JavaScript hari ini. (Saya dari masa depan)
Derek 朕 會 功夫
5
Sangat sederhana saat ini .. periksa ini misalnya: github.com/ChenWenBrian/FileSaver.js
roy riojas
9
@FrankKrueger jika Anda menghapus jawaban Anda, Anda akan mendapatkan 6 poin: P
Kamil Kiełczewski
8
@ FrankKreuger, "Pergi baca spesifikasi" hampir tidak pernah jawaban yang tepat pada SO.
Krishnan Venkiteswaran