Tạo tệp PDF bằng JavaScript


268

Tôi đang cố gắng chuyển đổi dữ liệu XML thành các tệp PDF từ một trang web và tôi hy vọng tôi có thể làm điều này hoàn toàn trong JavaScript. Tôi cần để có thể vẽ văn bản, hình ảnh và hình dạng đơn giản. Tôi rất thích có thể làm điều này hoàn toàn trong trình duyệt.

Câu trả lời:


446

Tôi vừa mới viết một thư viện có tên jsPDF để tạo các tệp PDF chỉ bằng Javascript. Nó vẫn còn rất trẻ và tôi sẽ sớm thêm các tính năng và sửa lỗi. Cũng có một vài ý tưởng cho cách giải quyết trong các trình duyệt không hỗ trợ URI dữ liệu. Nó được cấp phép theo giấy phép MIT tự do.

Tôi đã xem qua câu hỏi này trước khi tôi bắt đầu viết nó và nghĩ rằng tôi sẽ quay lại và cho bạn biết :)

Tạo tệp PDF trong Javascript

Ví dụ tạo tệp 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>


10
Tôi đã truyền cảm hứng một phần cho jsPDF? Tôi đã học về jsPDF vào ngày bạn công bố nó. Nhìn tuyệt vời cho đến nay. Cuối cùng tôi đã đến với Prawn vì đây dễ dàng là thư viện thế hệ PDF tốt nhất hiện có cho các yêu cầu của tôi. Tôi vẫn thích làm tất cả công việc của mình trên trình duyệt vì tôi không tích cực Tôi sẽ nhận được Ruby trên hệ thống mà tôi đang triển khai. Tôi đang xem jsPDF rất chặt chẽ. Tôi rất muốn giúp đỡ nhưng thời gian của tôi rất hạn chế. Điều đó có thể thay đổi trong tương lai.
amip

7
Bạn đã truyền cảm hứng cho nó phần nào :), tôi đã tìm kiếm trên internet để xem nó đã tồn tại chưa và thấy rằng một số người sẽ thấy nó hữu ích. Hãy cho tôi biết nếu bạn muốn giúp đỡ. Tôi là @MrRio trên twitter.
Hội trường James

23
Nó vẫn còn sống rất nhiều. 0.9.0rc2 Phát hành ngày hôm nay.
Hội trường James

87
@JamesHall, tôi muốn cảm ơn bạn vì tất cả công việc cần phải viết, và để MIT cấp phép nó để biến thế giới thành một nơi tốt hơn khi bạn có thể thương mại hóa nó vì lợi ích của riêng bạn.
Charles Burns

16
Downvoters có thể cung cấp cho chúng tôi ý tưởng hoặc giải pháp "tốt hơn" của họ không? Đây là một nỗ lực tuyệt vời.
Onur Yıldırım

138

Một thư viện javascript đáng nói đến là pdfmake .

Hỗ trợ trình duyệt dường như không mạnh bằng jsPDF, dường như cũng không có tùy chọn nào cho hình dạng, nhưng các tùy chọn định dạng văn bản nâng cao hơn các tùy chọn hiện có trong jsPDF.


7
Câu trả lời này nên được nâng cao hơn rất nhiều, pdfmake mạnh hơn rất nhiều so với jspdf. Tuy nhiên, chỉ là một ghi chú bên lề, nó là trình bao bọc xung quanh thư viện PDFKit.
vittore

2
một lưu ý phụ khác, jspdf không có hỗ trợ utf-8 và pdfmake chỉ hỗ trợ utf-8 cho các phông chữ mặc định.
Leo

"Pdfmake.min.js - 0.1.22 - 9 giờ trước" Nó không chết, được cập nhật vào ngày này.
zenbeni

Từ việc so sánh hai sân chơi, đối với tôi, dường như jsPDF nhắm mục tiêu nhiều hơn vào việc tạo PDF "đồ họa", trong khi pdfmake được nhắm mục tiêu nhiều hơn trong việc tạo ra các tài liệu "đơn giản" được định dạng tốt, có vẻ như có nhiều tùy chọn hơn cho định dạng văn bản chung.
cslotty 17/12/17

IE này có thân thiện không?
Wildhammer

59

Tôi duy trì PDFKit , cũng hỗ trợ pdfmake (đã được đề cập ở đây). Nó hoạt động trong cả Node và trình duyệt và hỗ trợ rất nhiều thứ mà các thư viện khác không có:

  • Nhúng phông chữ phụ, với sự hỗ trợ cho unicode.
  • Rất nhiều công cụ bố cục văn bản nâng cao (cột, ngắt trang, ngắt dòng unicode đầy đủ, văn bản phong phú cơ bản, v.v.).
  • Làm việc trên nhiều công cụ phông chữ hơn cho kiểu chữ nâng cao (chữ ghép OpenType / AAT, thay thế theo ngữ cảnh, v.v.). Sắp có: xem chi nhánh fontkit nếu bạn quan tâm.
  • Thêm công cụ đồ họa: độ dốc, v.v.
  • Được xây dựng với các công cụ hiện đại như browserify và stream. Có thể sử dụng cả trong trình duyệt và nút.

Hãy xem http://pdfkit.org/ để có hướng dẫn đầy đủ để tự mình xem PDFKit có thể làm gì. Và để biết ví dụ về loại tài liệu nào có thể được tạo ra, hãy xem tài liệu dưới dạng PDF được tạo từ một số tệp Markdown bằng chính PDFKit: http://pdfkit.org/docs/guide.pdf .

Bạn cũng có thể dùng thử tương tác trong trình duyệt tại đây: http://pdfkit.org/demo/browser.html .


Đây không phải là một thư viện phía máy chủ? Tôi nghĩ rằng các cuộc thảo luận là trên thư viện js phía khách hàng.
Ash Catchem

10
PDFKit hoạt động trong cả Node và trình duyệt như được đề cập trong câu trả lời. Xem liên kết đến bản demo trình duyệt.
devongovett 17/03/2015

Điều này có nén hình ảnh không? Tôi đang làm việc trên một ứng dụng web có chức năng tương tự như camscanner và tôi đang tìm kiếm việc tạo PDF thông qua javascript để tận dụng định dạng nén và nhiều trang.
Trevor

@devongovett bạn có thể xem câu hỏi của tôi về thư viện của bạn không?
ninbit 15/03/19

8

Một dự án thú vị khác là texlive.js .

Nó cho phép bạn biên dịch (La) TeX thành PDF trong trình duyệt.


Ví dụ về thế giới xin chào hiển thị độc đáo nhưng mất khoảng 30 giây để hoàn thành.
Sam Sippe

2

Bạn có thể sử dụng dịch vụ miễn phí này bằng cách thêm một liên kết tạo pdf từ bất kỳ url nào (ví dụ: http://www.phys.org ):

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


1
Cập nhật: Khi tôi đi kiểm tra dịch vụ freehtmltopdf.com này, nó nói nó không còn khả dụng. Âm thanh như nó là tuyệt vời mặc dù!
Mark Duiker

kiểm tra ngay - công trình. và thật tuyệt vời, tôi sử dụng một dịch vụ mà tôi trả tiền cho mỗi pdf và cần mã hóa, đây là một cách giải quyết vấn đề như vậy.
Serge Sob

-29

Ngay cả khi bạn có thể tạo tệp PDF trong bộ nhớ trong JavaScript, bạn vẫn sẽ gặp vấn đề về cách chuyển dữ liệu đó cho người dùng. Thật khó để JavaScript chỉ đẩy một tệp vào người dùng.

Để nhận tệp cho người dùng, bạn muốn gửi máy chủ để trình duyệt hiển thị hộp thoại lưu.

Như đã nói, thực sự không quá khó để tạo tệp PDF. Chỉ cần đọc thông số kỹ thuật.


1
Chẳng có gì khó khăn cả, ví dụ, nó dường như hoạt động với Data-URI en.wikipedia.org/wiki/Data_URI_scheme (Tôi đã làm điều đó trước đây nhưng tôi không nhớ nếu tôi đã sử dụng Data-URI).
Bjorn

58
Bạn có thể dễ dàng tạo các tệp trong JavaScript những ngày này. (Tôi đến từ tương lai)
Derek 會 功夫

5
Ngày nay thực sự đơn giản .. hãy kiểm tra ví dụ này: github.com/ChenWenBrian/FileSaver.js
roy riojas

9
@FrankKrueger nếu bạn xóa câu trả lời của mình, bạn sẽ kiếm được 6 điểm: P
Kamil Kiełczewski

8
@FrankKreuger, "Đi đọc thông số kỹ thuật" gần như không bao giờ là câu trả lời đúng trên SO.
thần Venkiteswaran
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.