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[];
}
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[];
}
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[];
}
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[];
}
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[];
}
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[];
}
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[];
}
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[];
}
iframe sẽ hiển thị một ô hình chữ nhật trên màn hìnhTrong 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
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
Sau đó, chúng tôi sẽ đặt thuộc tính
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
iframe với đường dẫn //printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
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 thêm iframe vào phần tử body. Sau đó, chúng tôi sẽ đặt
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
printJS['./test.pdf'] // only file path
printJS[{printable:'./test-large.pdf', type:'pdf'}] // an entire obj
printJS['./test.pdf'] // only file path
printJS[{printable:'./test-large.pdf', type:'pdf'}] // an entire obj
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
//printjs-4de6.kxcdn.com/print.min.js
//printjs-4de6.kxcdn.com/print.min.css
đầ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[];
}
//printjs-4de6.kxcdn.com/print.min.js
//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[];
}
printJS['./test.pdf'] // only file path
printJS[{printable:'./test-large.pdf', type:'pdf'}] // an entire obj
Print.jsHà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
Print PDF
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