Chuyển đổi html sang pdf javascript

html2pdf. js chuyển đổi bất kỳ trang web hoặc thành phần nào thành PDF có thể in hoàn toàn ở phía máy khách bằng cách sử dụng html2canvas và jsPDF

Nội dung chính Show

Mục lục
Bắt đầu
Cách sử dụng
Sử dụng nâng cao
Tùy chọn
ngắt trang
Loại và chất lượng hình ảnh
theo dõi tiến độ
phụ thuộc
Đóng góp
Vấn đề
bài kiểm tra
Yêu cầu kéo
Làm cách nào để chuyển đổi HTML thành PDF bằng jsPDF?
Làm cách nào để tạo PDF bằng JavaScript?
Làm cách nào để lưu trang web dưới dạng PDF bằng JavaScript?
Làm cách nào để chuyển đổi HTML sang PDF bằng React js?

Mục lục

Bắt đầu
- HTML
- NPM
- người cúi đầu
- Bảng điều khiển
Cách sử dụng
- Sử dụng nâng cao
  - quy trình làm việc
  - API công nhân
Tùy chọn
- ngắt trang
  - Cài đặt ngắt trang
  - Chế độ ngắt trang
  - Ví dụ sử dụng
- Loại và chất lượng hình ảnh
theo dõi tiến độ
phụ thuộc
Đóng góp
- Vấn đề
- bài kiểm tra
- Yêu cầu kéo
Tín dụng
Giấy phép

Bắt đầu

HTML

Cách đơn giản nhất để sử dụng html2pdf. js là tải xuống

var element = document.getElementById('element-to-print');
html2pdf(element);

5 vào thư mục dự án của bạn và đưa nó vào HTML của bạn với

<script src="html2pdf.bundle.min.js"></script>

Ghi chú. Nhấp vào đây để biết thêm thông tin về cách sử dụng phiên bản chưa được đóng gói

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

NPM

Cài đặt html2pdf. js và các phần phụ thuộc của nó bằng cách sử dụng NPM với

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

1 (đảm bảo bao gồm

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

2 trong tên gói)

Ghi chú. Bạn có thể sử dụng NPM để tạo dự án của mình, nhưng html2pdf. js sẽ không chạy trong Node. js, nó phải chạy trên trình duyệt

người cúi đầu

Cài đặt html2pdf. js và các phần phụ thuộc của nó bằng cách sử dụng Bower với

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

3 (đảm bảo bao gồm

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

2 trong tên gói)

Bảng điều khiển

Nếu bạn đang truy cập trang web mà bạn không thể sửa đổi trực tiếp và muốn sử dụng html2pdf. js để chụp ảnh màn hình, bạn có thể làm theo các bước sau

Mở bảng điều khiển trình duyệt của bạn (hướng dẫn cho các trình duyệt khác nhau tại đây)

Dán vào mã này

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Bây giờ bạn có thể thực thi html2pdf. js lệnh trực tiếp từ bàn điều khiển. Để chụp một tệp PDF mặc định của toàn bộ trang, hãy sử dụng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Cách sử dụng

Sau khi cài đặt, html2pdf. js đã sẵn sàng để sử dụng. Lệnh sau sẽ tạo tệp PDF của

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

6 và nhắc người dùng lưu kết quả

var element = document.getElementById('element-to-print');
html2pdf(element);

Sử dụng nâng cao

Mỗi bước của html2pdf. js có thể định cấu hình, sử dụng API dựa trên Promise mới của nó. Nếu html2pdf. js được gọi mà không có đối số, nó sẽ trả về một đối tượng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Công nhân này có các phương thức có thể được xâu chuỗi tuần tự, khi mỗi Lời hứa giải quyết và cho phép chèn các chức năng trung gian của riêng bạn giữa các bước. Hệ thống điều kiện tiên quyết cho phép bạn bỏ qua các bước bắt buộc (như tạo canvas) mà không gặp bất kỳ sự cố nào

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

quy trình làm việc

Quy trình làm việc cơ bản của html2pdf. js (được thực thi bởi hệ thống prereq) là

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

API công nhân

MethodArgumentsDescriptionfromsrc, typeĐặt nguồn (chuỗi HTML hoặc thành phần) cho PDF.

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

8 tùy chọn chỉ định các nguồn khác.

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

var element = document.getElementById('element-to-print');
html2pdf(element);

var element = document.getElementById('element-to-print');
html2pdf(element);

1, hoặc

var element = document.getElementById('element-to-print');
html2pdf(element);

2. totargetChuyển đổi nguồn thành mục tiêu đã chỉ định (_______93,

var element = document.getElementById('element-to-print');
html2pdf(element);

var element = document.getElementById('element-to-print');
html2pdf(element);

2 hoặc

var element = document.getElementById('element-to-print');
html2pdf(element);

6). Mỗi mục tiêu cũng có phương thức

var element = document.getElementById('element-to-print');
html2pdf(element);

7 riêng có thể được gọi trực tiếp.

var element = document.getElementById('element-to-print');
html2pdf(element);

var element = document.getElementById('element-to-print');
html2pdf(element);

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

10 và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

11. outputtype, options, srcRoutes sang phương thức

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

12 hoặc

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

13 thích hợp dựa trên

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

14 đã chỉ định (

var element = document.getElementById('element-to-print');
html2pdf(element);

6 (mặc định) hoặc

var element = document.getElementById('element-to-print');
html2pdf(element);

2). outputPdftype, optionsGửi

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

8 và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

18 tới phương thức

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

19 của đối tượng jsPDF và trả về kết quả dưới dạng Lời hứa (sử dụng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

20 để truy cập). Xem mã nguồn jsPDF để biết thêm thông tin. outputImgtype, optionsTrả về kiểu dữ liệu được chỉ định cho hình ảnh dưới dạng Lời hứa (sử dụng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

20 để truy cập). Các loại được hỗ trợ.

var element = document.getElementById('element-to-print');
html2pdf(element);

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

23/

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

24, và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

25/

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

26. savefilenameLưu đối tượng PDF với tên tệp tùy chọn (tạo lời nhắc tải xuống của người dùng). setoptĐặt các thuộc tính đã chỉ định. Xem Tùy chọn bên dưới để biết thêm chi tiết. getkey, cbkTrả lại thuộc tính được chỉ định trong

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

27, dưới dạng Lời hứa (sử dụng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

20 để truy cập) hoặc bằng cách gọi

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

29 nếu được cung cấp. thenonFulfilled, phương thức onRejectedStandard Promise, với _____130 được liên kết lại với Công nhân và có thêm tính năng theo dõi tiến độ (xem Tiến độ bên dưới). Lưu ý rằng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

20 trả về một

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

7, là một phân lớp của Promise. thenCoreonFulFilled, phương thức onRejectedStandard Promise, với liên kết lại

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

30 với Worker (không theo dõi tiến độ). Lưu ý rằng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

34 trả về một

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

7, là một phân lớp của Promise. thenExternalonFulfills, phương thức onRejectedTrue Promise. Sử dụng 'thoát' chuỗi Worker này - bạn sẽ không thể tiếp tục xâu chuỗi các phương thức Worker sau

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

36. bắt, bắtExternalonRejectedStandard Promise phương thức.

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

37 thoát khỏi Chuỗi công nhân - bạn sẽ không thể tiếp tục xâu chuỗi các phương thức của Công nhân sau khi

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

38. errormsgGửi lỗi trong chuỗi Worker's Promise

Một vài bí danh cũng được cung cấp để thuận tiện

MethodAliassavesaveAssetusingoutputexportthenrun

Tùy chọn

html2pdf. js có thể được định cấu hình bằng tham số

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

39 tùy chọn

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Tham số

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

39 có các trường tùy chọn sau

NameTypeDefaultDescriptionmarginnumber hoặc array

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

61PDF margin (theo đơn vị jsPDF). Có thể là một số duy nhất,

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

62 hoặc

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

63. filenamestring_______564Tên tệp mặc định của tệp PDF đã xuất. đối tượng ngắt trang

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

65 Kiểm soát hành vi ngắt trang trên trang. Xem Ngắt trang bên dưới. imageobject

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

66Loại hình ảnh và chất lượng được sử dụng để tạo PDF. Xem Loại và chất lượng hình ảnh bên dưới. enableLink boolean

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

67Nếu được bật, các siêu liên kết PDF sẽ tự động được thêm vào đầu tất cả các thẻ neo. html2canvasobject_______568Các tùy chọn cấu hình được gửi trực tiếp tới

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

69 (xem tại đây để biết cách sử dụng). jsPDFobject_______568Các tùy chọn cấu hình được gửi trực tiếp tới

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

81 (xem tại đây để biết cách sử dụng)

ngắt trang

html2pdf. js có khả năng tự động thêm ngắt trang để dọn sạch tài liệu của bạn. Ngắt trang có thể được thêm theo kiểu CSS, đặt trên các phần tử riêng lẻ bằng cách sử dụng bộ chọn hoặc tránh ngắt bên trong tất cả các phần tử (chế độ

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

82)

Theo mặc định, html2pdf. js sẽ tôn trọng hầu hết các quy tắc CSS

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

83,

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

84 và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

85, đồng thời thêm dấu ngắt trang sau bất kỳ phần tử nào có lớp

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

86 (dành cho mục đích kế thừa)

Cài đặt ngắt trang

SettingTypeDefaultDescriptionmodestring hoặc array

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

87(Các) chế độ để tự động thêm dấu ngắt trang. Một hoặc nhiều

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

88,

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

89 và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

70. beforestring hoặc array

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

71Bộ chọn CSS để thêm dấu ngắt trang trước mỗi phần tử. Có thể là một phần tử cụ thể có ID (

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

72), tất cả các phần tử thuộc một loại (e. g.

var element = document.getElementById('element-to-print');
html2pdf(element);

2), tất cả của một lớp (

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

74) hoặc thậm chí

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

75 để khớp với mọi phần tử. chuỗi sau hoặc mảng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

71Giống như 'trước', nhưng thêm dấu ngắt trang ngay sau phần tử. chuỗi tránh hoặc mảng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

71Giống như 'trước', nhưng tránh ngắt trang trên các phần tử này. Bạn có thể bật tính năng này trên mọi phần tử bằng chế độ 'tránh tất cả'

Chế độ ngắt trang

ModeDescriptionavoid-all Tự động thêm ngắt trang để tránh chia tách các phần tử trên các trang. cssThêm ngắt trang theo các thuộc tính CSS

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

83,

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

84 và

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

85. Chỉ nhận dạng

var element = document.getElementById('element-to-print');
html2pdf(element);

51 cho trước/sau và

var element = document.getElementById('element-to-print');
html2pdf(element);

52 cho bên trong. LegacyThêm ngắt trang sau các phần tử có lớp

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

86. Tính năng này có thể bị xóa trong tương lai

Ví dụ sử dụng

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Loại và chất lượng hình ảnh

Bạn có thể tùy chỉnh loại hình ảnh và chất lượng được xuất từ canvas bằng cách đặt tùy chọn

var element = document.getElementById('element-to-print');
html2pdf(element);

54. Đây phải là một đối tượng có các trường sau

NameTypeDefaultDescriptiontypestring'jpeg'Loại hình ảnh. HTMLCanvasElement chỉ hỗ trợ 'png', 'jpeg' và 'webp' (trên Chrome). số lượng0. 95Chất lượng hình ảnh, từ 0 đến 1. Cài đặt này chỉ được sử dụng cho jpeg/webp (không phải png)

Các tùy chọn này được giới hạn trong các cài đặt có sẵn cho HTMLCanvasElement. toDataURL(), bỏ qua cài đặt chất lượng cho hình ảnh 'png'. Để bật tính năng nén hình ảnh png, hãy thử sử dụng miếng đệm nén canvas-png, đây sẽ là giải pháp tại chỗ để bật tính năng nén png thông qua tùy chọn

var element = document.getElementById('element-to-print');
html2pdf(element);

theo dõi tiến độ

Đối tượng Worker được trả về bởi

var element = document.getElementById('element-to-print');
html2pdf(element);

56 có cơ chế theo dõi tiến trình được tích hợp sẵn. Nó sẽ được cập nhật để cho phép gọi lại tiến trình sẽ được gọi với mỗi lần cập nhật, tuy nhiên, nó hiện đang được tiến hành

phụ thuộc

html2pdf. js phụ thuộc vào các gói bên ngoài html2canvas, jsPDF và es6-promise. Các phụ thuộc này được tải tự động khi sử dụng NPM hoặc gói đi kèm

Nếu sử dụng

var element = document.getElementById('element-to-print');
html2pdf(element);

57 chưa được nhóm (hoặc phiên bản chưa được rút gọn của nó), bạn cũng phải bao gồm từng phần phụ thuộc. Thứ tự rất quan trọng, nếu không html2canvas sẽ bị ghi đè bởi triển khai nội bộ của chính jsPDF

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Đóng góp

Vấn đề

Khi gửi một vấn đề, vui lòng cung cấp mã có thể sao chép làm nổi bật vấn đề, tốt nhất là bằng cách tạo một nhánh của mẫu jsFiddle này (có html2pdf. js đã được tải). Hãy nhớ rằng html2pdf. js sử dụng html2canvas và jsPDF làm phụ thuộc, vì vậy, bạn nên kiểm tra từng trình theo dõi vấn đề của các kho lưu trữ đó để xem vấn đề của bạn đã được giải quyết chưa

Các vấn đề đã biết

kết xuất. Công cụ kết xuất html2canvas không hoàn hảo (mặc dù nó khá tốt. ). Nếu html2canvas không hiển thị chính xác nội dung của bạn thì tôi không thể sửa lỗi đó
- Bạn có thể kiểm tra điều này bằng thứ gì đó giống như câu đố này, để xem liệu có vấn đề gì trong quá trình tạo canvas không
Nhân bản nút (CSS, v.v.). Cách html2pdf. js sao chép nội dung của bạn trước khi gửi tới html2canvas bị lỗi. Bản sửa lỗi hiện đang được phát triển - hãy dùng thử
- tập tin trực tiếp. Chuyển đến html2pdf. js/bugfix/clone-nodes-BUILD và thay thế các tệp trong dự án của bạn bằng các tệp có liên quan (e. g.
```
var element = document.getElementById('element-to-print');
html2pdf(element);
```
  58)
- npm.
```
var element = document.getElementById('element-to-print');
html2pdf(element);
```
  59
- dự án liên quan. Vá lỗi. các nút nhân bản
Thay đổi kích thước. Hiện tại, html2pdf. js thay đổi kích thước phần tử gốc để vừa với trang PDF (khiến nội dung bên trong bị "chỉnh lại dòng")
- Đây thường là hành vi mong muốn, nhưng không phải lúc nào
- Có kế hoạch thêm hành vi thay thế (e. g. "shrink-to-page"), nhưng chưa có gì sẵn sàng để thử nghiệm
- dự án liên quan. Tính năng. PDF một trang
Kết xuất dưới dạng hình ảnh. html2pdf. js hiển thị tất cả nội dung thành một hình ảnh, sau đó đặt hình ảnh đó vào PDF
- Điều này có nghĩa là văn bản không thể chọn hoặc tìm kiếm được và gây ra kích thước tệp lớn
- Điều này hiện không thể tránh khỏi, tuy nhiên những cải tiến gần đây trong jsPDF có nghĩa là có thể sớm hiển thị trực tiếp thành đồ họa vector
- dự án liên quan. Tính năng. trình kết xuất mới
Cuộc đụng độ hứa hẹn. html2pdf. js dựa trên hành vi Promise cụ thể và có thể không thành công khi được sử dụng với các thư viện Promise tùy chỉnh
- Trong bản phát hành tiếp theo, Lời hứa sẽ được đóng hộp cát trong html2pdf. js để loại bỏ vấn đề này
- dự án liên quan. Vá lỗi. Lời hứa trong hộp cát
Kích thước tối đa. Canvas HTML5 có chiều cao/chiều rộng tối đa. Mọi thứ lớn hơn sẽ không hiển thị được
- Đây là một hạn chế của chính HTML5 và dẫn đến các tệp PDF lớn hiển thị hoàn toàn trống trong html2pdf. js
- Trình kết xuất canvas jsPDF (được đề cập trong Sự cố đã biết #4) có thể khắc phục sự cố này
- dự án liên quan. Vá lỗi. Kích thước canvas tối đa

bài kiểm tra

html2pdf. js hiện đang rất thiếu trong các bài kiểm tra đơn vị. Mọi đóng góp hoặc đề xuất về các bài kiểm tra tự động (hoặc thủ công) đều được hoan nghênh. Đây là cao trong danh sách việc cần làm cho dự án này

Yêu cầu kéo

Nếu bạn muốn tạo một tính năng mới hoặc sửa lỗi, vui lòng rẽ nhánh và gửi yêu cầu kéo. Tạo một rẽ nhánh, rẽ nhánh của

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

00 và thực hiện các thay đổi đối với các tệp

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

01 (thay vì trực tiếp tới

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

02). Bạn có thể kiểm tra các thay đổi của mình bằng cách xây dựng lại với

function addScript(url) {
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = url;
    document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Làm cách nào để chuyển đổi HTML thành PDF bằng jsPDF?

$('. cmd'). nhấp (hàm () {

var pdf = jsPDF mới();

var specialElementHandlers = {

'#biên tập viên'. chức năng (phần tử, trình kết xuất) {

trả về đúng;

var $addr = $(cái này). gần nhất('. độ phân giải'). tìm thấy('. Nội dung');

Làm cách nào để tạo PDF bằng JavaScript?

Cách tạo PDF bằng Javascript .

var doc = jsPDF mới();

tài liệu. văn bản (10, 10, 'Xin chào thế giới. ');

tài liệu. lưu ('xin chào thế giới. pdf');

Làm cách nào để lưu trang web dưới dạng PDF bằng JavaScript?

Nếu bạn muốn cài đặt trang của pdf, gọi hàm set() trên hàm from() và chuyển đối tượng opt và cuối cùng chúng ta phải gọi hàm save( . Trong hàm generatePDF() của chúng tôi, dòng 102 có thể đơn giản là html2pdf(). từ (phần tử). . In our generatePDF() function line 102 can be simply html2pdf(). from(element).