printDiv (divId) : Một giải pháp tổng quát để in bất kỳ div nào trên bất kỳ trang nào.
Tôi có một vấn đề tương tự nhưng tôi muốn (a) có thể in toàn bộ trang, hoặc (b) in bất kỳ một trong một số khu vực cụ thể. Giải pháp của tôi, nhờ phần lớn những điều trên, cho phép bạn chỉ định bất kỳ đối tượng div nào sẽ được in.
Chìa khóa cho giải pháp này là thêm một quy tắc phù hợp vào biểu định kiểu phương tiện in để div được yêu cầu (và nội dung của nó) sẽ được in.
Đầu tiên, tạo css in cần thiết để triệt tiêu mọi thứ (nhưng không có quy tắc cụ thể để cho phép phần tử bạn muốn in).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Lưu ý rằng tôi đã thêm các quy tắc lớp mới:
- noprintarea cho phép bạn ngăn chặn việc in các phần tử trong div- cả nội dung và khối.
- noprintcontent cho phép bạn ngăn chặn việc in các phần tử trong nội dung của bạn - nội dung bị chặn nhưng khu vực được phân bổ bị bỏ trống.
- in cho phép bạn có các mục hiển thị trong phiên bản in nhưng không có trên trang màn hình. Chúng thường sẽ có "display: none" cho kiểu màn hình.
Sau đó chèn ba hàm JavaScript. Việc đầu tiên chỉ đơn giản là bật và tắt biểu định kiểu phương tiện in.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
Thứ hai thực hiện công việc thực sự và thứ ba làm sạch sau đó. Thứ hai (printDiv) kích hoạt biểu định kiểu phương tiện in, sau đó thêm quy tắc mới để cho phép div mong muốn in, phát hành bản in và sau đó thêm độ trễ trước khi vệ sinh cuối cùng (nếu không thì có thể đặt lại kiểu trước khi thực sự in làm xong.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
Các chức năng cuối cùng xóa quy tắc đã thêm và đặt lại kiểu in thành vô hiệu hóa để toàn bộ trang có thể được in.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
Điều khác duy nhất cần làm là thêm một dòng vào quá trình xử lý tải của bạn để kiểu in ban đầu bị vô hiệu hóa do đó cho phép in toàn bộ trang.
<body onLoad='disableSheet(0,true)'>
Sau đó, từ bất cứ nơi nào trong tài liệu của bạn, bạn có thể in một div. Chỉ cần phát hành printDiv ("thedivid") từ một nút hoặc bất cứ điều gì.
Một điểm cộng lớn cho phương pháp này là nó cung cấp một giải pháp chung để in nội dung được chọn từ trong một trang. Nó cũng cho phép sử dụng các kiểu hiện có cho các thành phần được in - bao gồm cả div chứa.
LƯU Ý: Trong triển khai của tôi, đây phải là biểu định kiểu đầu tiên. Thay đổi các tham chiếu trang tính (0) thành số trang thích hợp nếu bạn cần thực hiện sau trong trình tự trang tính.