In PDF từ HTML JavaScript

Một dự án cá nhân mà tôi hiện đang thực hiện liên quan đến việc biến cây nút HTML được tạo kiểu thành tài sản PDF có thể in được ở phía máy khách

Tôi đã dành một thời gian dài để tìm kiếm giải pháp dứt điểm và trải qua rất nhiều khó khăn

Tôi sẽ chia sẻ với bạn giải pháp của tôi, giải pháp mà tôi tin là rất dễ sử dụng và tôi sẽ nói về ưu/nhược điểm của các phương pháp khác

Nó sẽ chỉ mất hai phút để thực hiện

Cài đặt

FYI. Tôi làm việc với React nên tôi đang sử dụng npm / yarn để thêm thư viện bằng cách sử dụng câu lệnh ES6 import. Không sử dụng các trình quản lý gói đó, bạn có thể tích hợp các thư viện bằng cách sử dụng thẻ đơn giản

nó sẽ đưa bạn

• Hai thư viện Javascript chạy phía máy khách
• 5 dòng mã thực tế trong Javascript

Nó yêu cầu

• Kiến thức Javascript cơ bản
• jsPDF. yarn add jspdf
• html2canvas. yarn add html2canvas

Đoạn trích

Quá trình này như sau

• Cây nút HTML mà bạn muốn chuyển đổi thành PDF trước tiên được chuyển đổi thành canvas bằng cách sử dụng html2canvas (dòng 4)
• Sau đó, một cấu trúc PDF trống được tạo bằng định dạng A4. Nhân tiện, chúng tôi yêu cầu jsPDF sử dụng mm làm đơn vị cho các hoạt động tiếp theo (dòng 5)
• Gần như hoàn tất, chúng tôi biến canvas thành hình ảnh PNG bằng cách sử dụng canvas.toDataURL('image/png') (dòng 6)
• Hình ảnh PNG này sau đó được dán vào tệp PDF trống tại tọa độ (0,0) , được thay đổi kích thước thành (211,298) (dòng 6). Định dạng A4 rộng 210 mm và cao 297 mm nên tôi sử dụng thêm một milimet khi dán hình ảnh để tránh các dải trắng ở các cạnh
• Cuối cùng, chúng tôi nhắc trình duyệt tải xuống tệp PDF mới được tạo bằng cách sử dụng import0 (dòng 7)

Hàm khác lấy import1 làm tham số bắt đầu từ 1 (chất lượng mặc định) cho phép bạn có được tệp PDF sắc nét hơn nhiều với giao diện SVG

import1 này chỉ là tỷ lệ được sử dụng để lần đầu tiên biến cây nút HTML thành khung vẽ. Nó càng lớn thì PDF sẽ càng sắc nét và nặng hơn (sử dụng import3 trên cấu trúc nút phức tạp của tôi tạo ra 60 MB PDF, trong khi import4 tạo ra 800 KB PDF)

cân nhắc

Kỹ thuật này cho phép bạn in các tệp PDF dựa trên HTML trong vài giây bằng cách sử dụng 5 dòng mã

Nó đã được thử nghiệm trên nhiều trình duyệt và kể từ ngày 1 tháng 8 năm 2018, không có sự cố nào xảy ra khi sử dụng trình duyệt Chrome của tôi

Nhiều trang web có đầy đủ nội dung giáo dục có sẵn trên Internet. Nội dung của các trang web này có thể ở dạng văn bản (văn bản) hoặc dạng tệp chủ yếu ở định dạng PDF (như sách điện tử)

Nếu bạn trực tiếp muốn tải xuống các tệp PDF này từ các trang web này, bạn có thể nhấp vào nút và thực hiện việc đó. Tuy nhiên, các tình huống có thể xảy ra, chẳng hạn như người dùng chỉ muốn in các tệp đó thay vì tải xuống

Đối với điều này, trước tiên bạn phải tải xuống các tệp PDF, mở chúng và sau đó in chúng

Tuy nhiên, nếu người dùng có thể trực tiếp đến màn hình in sau khi nhấp vào một nút thì sao?

Quá trình này có thể đạt được trong JavaScript bằng cách sử dụng thẻ iframe hoặc thư viện JavaScript của bên thứ ba như Print.js

In tệp PDF bằng cách sử dụng thẻ iframe trong JavaScript

Thẻ HTML iframe cho phép chúng tôi nhúng nhiều nội dung khác nhau, chẳng hạn như các trang web và tệp khác vào bên trong trang web của chúng tôi

Thẻ iframe cung cấp nhiều thuộc tính và phương pháp mà bạn có thể sử dụng trong trang web của mình để tận dụng tối đa thẻ này

Hãy xem cách chúng ta có thể sử dụng thẻ này để in các tệp PDF bằng JavaScript

Trong tài liệu HTML của chúng tôi, chúng tôi phải tạo một nút bên trong thẻ

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

1 và sau đó chúng tôi phải liên kết tệp JavaScript của mình bằng thẻ

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

2

Chúng tôi sẽ thêm một sự kiện

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

3, sau đó chúng tôi sẽ chuyển một hàm

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

4 làm giá trị cho sự kiện này. Chúng tôi sẽ xác định

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

4 bên trong JavaScript

Hàm này lấy đường dẫn tệp PDF làm tham số. Đường dẫn đến tệp PDF phải được cung cấp chính xác để mở bên trong khu vực màn hình in

    Print PDF file
    

Chúng tôi có một hàm

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

4 bên trong tệp JavaScript lấy đường dẫn tệp PDF làm đối số. Trong chức năng này, trước tiên chúng ta sẽ tạo một thẻ iframe bằng cách sử dụng phương pháp DOM API

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

8

Hàm

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

4 sẽ chỉ được gọi sau khi nhấp vào nút. Sau khi nhấn vào nút, thẻ iframe sẽ hiển thị một ô hình chữ nhật trên màn hình

Trong trường hợp trang web, nó sẽ nhúng toàn bộ trang web vào trong hộp hình chữ nhật đó, trong khi với trường hợp tệp, nó sẽ chỉ hiển thị một màn hình trống mà chúng tôi không muốn

Do đó, chúng tôi sẽ ẩn iframe bằng cách đặt thuộc tính CSS

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

2 là

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

3 bên trong tệp JavaScript của chúng tôi

Sau đó, chúng tôi sẽ đặt thuộc tính

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

4 của iframe với đường dẫn

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

6, mà chúng tôi phải gửi trong khi gọi hàm

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

7

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

Tiếp theo, chúng ta có thể nối iframe vào phần tử body. Sau đó, chúng tôi sẽ đặt

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

9 của iframe thành

printJS('./test.pdf') // only file path
printJS({printable:'./test-large.pdf', type:'pdf'}) // an entire obj

0 và

printJS('./test.pdf') // only file path
printJS({printable:'./test-large.pdf', type:'pdf'}) // an entire obj

1

Chúng tôi sẽ trực tiếp mở màn hình in ở chế độ lấy nét do các phương pháp này của

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

9

đầu ra

Cuối cùng, sau khi bạn nhấp vào nút chúng tôi đã tạo, bạn sẽ thấy đầu ra ở trên

Nếu bạn không muốn viết nhiều mã như những gì chúng tôi đã viết cho đến nay, bạn cũng có thể sử dụng bên thứ ba như Print.js để có chức năng in PDF bằng JavaScript. Quá trình này là những gì chúng ta sẽ thấy trong phần sắp tới

In tệp PDF bằng Thư viện Print.js trong JavaScript

Print.js là một thư viện PDF nhỏ cho phép bạn mở tệp PDF ở chế độ in. Ưu điểm chính của việc sử dụng thư viện là tiết kiệm thời gian đáng kể

Thay vì tải xuống thư viện trong hướng dẫn này, chúng tôi sẽ sử dụng CDN của nó. Có thể áp dụng nhiều cách khác nhau để tải xuống và sử dụng thư viện Print.js

Để biết thêm thông tin về điều này, hãy truy cập trang In. tài liệu js. Thêm hai liên kết CDN bên dưới vào cuối thẻ

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

1

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

Sau đó, chúng tôi phải tạo một nút tương tự như cách chúng tôi đã tạo trước đó. Trong trường hợp này, bên trong

function printPdf(pdf) {

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = pdf;

    document.body.appendChild(iframe);
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

3, chúng ta phải sử dụng hàm

printJS('./test.pdf') // only file path
printJS({printable:'./test-large.pdf', type:'pdf'}) // an entire obj

9 mà chúng ta lấy được từ thư viện Print.js

Hàm này có thể lấy đường dẫn tệp làm đầu vào hoặc toàn bộ đối tượng

printJS('./test.pdf') // only file path
printJS({printable:'./test-large.pdf', type:'pdf'}) // an entire obj

Bạn có thể chọn bất kỳ một trong những phương pháp này tùy thuộc vào nhu cầu của bạn. Đảm bảo rằng bạn đã thêm tệp PDF bên trong thư mục dự án của mình hoặc trên máy chủ

Nếu không, mã sẽ không hoạt động và có thể cung cấp cho bạn các lỗi liên quan đến PDF

Các tệp PDF phải được phân phối trên cùng một miền nơi trang web của bạn được lưu trữ. Điều này là do Print.js sử dụng nội bộ thẻ iframe và bị giới hạn bởi Chính sách xuất xứ giống nhau

    
        Print PDF
     

    
    

Thư viện này sẽ tạo ra cùng một đầu ra như thẻ iframe, như hình bên dưới. Tuy nhiên, số lượng mã mà chúng tôi đã viết là tương đối ít

Nếu kích thước tệp PDF quá lớn, bạn cũng có thể hiển thị một phương thức để người dùng biết rằng có thể mất một chút thời gian để tải tệp. Quá trình này sẽ cung cấp trải nghiệm người dùng tốt

Phương thức sẽ được hiển thị sau khi người dùng nhấp vào nút và sẽ biến mất khi chế độ in xuất hiện. Đối với điều này, chỉ cần đặt thuộc tính

    
        Print PDF
     

    
    

4 thành

    
        Print PDF
     

    
    

5 như sau

printJS({printable:'./test-large.pdf', type:'pdf', showModal:true})

Phương thức sẽ trông như thế này

Ngay khi chế độ in được tải, nó sẽ hiển thị cho bạn màn hình in tương tự như những gì chúng ta đã thấy trước đây

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

Làm cách nào để in tệp trong JavaScript?

Làm cách nào để chuyển đổi HTML CSS sang PDF bằng JavaScript?

Làm cách nào để chuyển đổi HTML sang PDF bằng nhiều trang JavaScript?