Nói chung, tùy chọn in của trình duyệt được sử dụng để in nội dung trang web. Trong trường hợp này, toàn bộ nội dung trang được chọn để in trên trình duyệt. Hộp thoại in của trình duyệt không cho phép chọn một phần cụ thể của trang web để in. Chúng tôi cần sự trợ giúp của mã phía máy khách hoặc phía máy chủ để in các khu vực cụ thể của trang web
Tính năng in trong ứng dụng web cho phép người dùng in nội dung của trang web để sử dụng ngoại tuyến. Có nhiều plugin jQuery khác nhau có sẵn để in nội dung trang web. Nếu bạn không muốn sử dụng bất kỳ plugin của bên thứ ba nào, chức năng này có thể được triển khai dễ dàng bằng JavaScript. Bạn có thể in nội dung HTML toàn trang hoặc khu vực cụ thể bằng JavaScript
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách in nội dung div cụ thể hoặc nội dung toàn trang bằng JavaScript. Để có khả năng sử dụng tốt hơn và làm cho quy trình trở nên thân thiện với người dùng, chúng tôi sẽ tạo một hàm JavaScript tùy chỉnh để in nội dung div, khu vực trang và toàn bộ nội dung trang web
In nội dung HTML bằng JavaScript
Hàm
printPageArea['elementID']6 chứa một số mã JavaScript giúp bạn triển khai tính năng in dễ dàng trên trang web. Nó sẽ cung cấp cách đơn giản nhất để in các khu vực cụ thể của trang web
Mã JavaScript.
Hàm
printPageArea['elementID']6 sẽ mở cửa sổ hộp thoại in với nội dung trang web và tùy chọn in dựa trên ID thành phần được cung cấp. Bạn có thể sử dụng chức năng này để in một khu vực cụ thể của trang web hoặc toàn bộ nội dung trang web.
function printPageArea[areaID]{ var printContent = document.getElementById[areaID].innerHTML; var originalContent = document.body.innerHTML; document.body.innerHTML = printContent; window.print[]; document.body.innerHTML = originalContent; }
Sử dụng hàm printPageArea[] trong sự kiện
printPageArea['elementID']8 của phần tử nút in và cung cấp ID div của khu vực nội dung mà bạn muốn in
printPageArea['elementID']
Mã HTML
Xác định phần tử nút HTML sẽ kích hoạt hàm code>printPageArea[] để khởi tạo mã in trong JavaScript
Print.