Phần tử in JavaScript

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

Chỉ định nội dung HTML sẽ được in

    All the printable content goes here...

In nội dung động bằng JavaScript và PHP

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?

Gần đây, tôi có một nhiệm vụ trong đó tôi phải in động các phần cụ thể của trang web, từ JavaScript. Đây chắc chắn không phải là vấn đề phức tạp nhất trên thế giới. Tuy nhiên, khi tìm kiếm các giải pháp, tôi rất ngạc nhiên khi thấy rằng tất cả các phương pháp phổ biến đều có những cảnh báo mà tôi không muốn áp dụng.

Nếu bạn - như tôi đã làm - tìm kiếm trên StackOverflow cho "in div cụ thể" hoặc một số biểu thức tương tự, bạn sẽ tìm thấy hàng tá câu hỏi và một loạt câu trả lời cho mỗi câu hỏi. Và mọi câu trả lời được bình chọn cao sẽ có một nhận xét được bình chọn cao tương đương với nội dung “điều này không hiệu quả trong các tình huống khi…”

Cảnh báo nhận xét SO về việc sử dụng khả năng hiển thị. không dành cho các khối không in được

Một bình luận SO khác. một cảnh báo công bằng về việc thay thế nội dung tài liệu hiện tại

Và một nhận xét SO khác đề cập đến việc mất kiểu khi tạo phần tử cửa sổ mới để in

Một nhận xét SO khác về những rắc rối khi sử dụng div cố định để in

Tôi tìm thấy hai cách tiếp cận chính cho vấn đề trên. Một là sử dụng biểu định kiểu phương tiện cụ thể và/hoặc định nghĩa CSS. Cách khác là tạo một đối tượng cửa sổ mới, chèn nội dung html của nút đã chọn vào phần thân tài liệu của cửa sổ mới này và gọi

printPageArea('elementID')

9 trên cửa sổ

phong cách phương tiện truyền thông cụ thể

Sử dụng biểu định kiểu phương tiện cụ thể hoặc định nghĩa css phương tiện cụ thể là một giải pháp rõ ràng để xác định chế độ xem in của trang của bạn và không yêu cầu bất kỳ JavaScript nào. Khi người dùng in trang, tất cả các quy tắc

Print

0 sẽ bắt đầu và sẽ xác định trang của bạn sẽ trông như thế nào sau khi được in. Tuy nhiên, bạn sẽ phải biết trước đầu ra bản in mong muốn cho mỗi trang trong ứng dụng web của bạn là gì. Bạn cũng sẽ cần duy trì tất cả các tệp và kiểu CSS dành riêng cho bản in đó cùng với các biểu định kiểu thông thường, không in của bạn. Đó là rất nhiều việc. Và nếu bạn cần có nhiều chế độ xem in của một trang, tùy thuộc vào một số trạng thái ứng dụng hoặc điều kiện khác, thì bạn không gặp may — CSS thuần túy sẽ không giúp được gì cho bạn

Chèn nội dung đã chọn vào đối tượng cửa sổ

Cách tiếp cận này có lợi ích là năng động — bạn có thể gọi nó với bất kỳ nội dung nút HTML nào. Cách đơn giản nhất (đồng thời là cách xâm lấn và rắc rối nhất) là sử dụng lại đối tượng cửa sổ hiện tại như thế này

function printMe(element) {
     var printContent = element.innerHTML;
     var originalContent = window.document.body.innerHTML;
     window.document.body.innerHTML = printContent;
     window.print();
     window.document.body.innerHTML = originalContent;
}

Nhưng xin đừng làm điều này. Xóa sạch và tạo lại

Print

1 của nội dung tài liệu sẽ có tác dụng phụ nghiêm trọng trên hầu hết các trang. Thứ nhất, tất cả các trình xử lý sự kiện được đính kèm động sẽ bị xóa khỏi các nút của bạn

Các biến thể khác tạo một đối tượng cửa sổ mới, sau đó tạo một số bản soạn sẵn phần thân và nội dung có thể in được đưa vào phần thân này. Một cách tiếp cận tốt hơn, nhưng không bảo toàn các kiểu — bạn sẽ cần đưa các biểu định kiểu từ tài liệu gốc sang tài liệu mới. Và cửa sổ in sẽ mở dưới dạng tab hoặc cửa sổ mới, không hấp dẫn

Không tìm được cách giải quyết thỏa đáng, tôi lăn xả. Nó là một mô-đun JavaScript nhỏ (75 dòng mã nguồn) với CSS bổ sung khoảng 10 dòng và hoạt động như thế này

Nó có một chức năng được hiển thị duy nhất có tên là

Print

2, dự kiến ​​​​sẽ có một mảng các Phần tử DOM. Nếu bạn muốn in một nút duy nhất thu được là

Print

3, bạn sẽ gọi hàm là

Print

4. Nếu bạn muốn in tất cả các nút khớp với một tên lớp nhất định, bạn sẽ viết

Print

5, sau đó gọi hàm là

Print

6

Hàm lặp qua các nút đã truyền và đối với mỗi nút, nó sẽ duyệt qua cây DOM cho đến phần tử BODY. Ở mỗi cấp độ, bao gồm cả cấp độ ban đầu (là cấp độ của nút sẽ được in), nó gắn một lớp đánh dấu (

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

0) vào nút hiện tại. Sau đó đính kèm một lớp đánh dấu khác (

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

1) cho tất cả các anh chị em của nút hiện tại, nhưng chỉ khi không có lớp

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

0 trên chúng. Là hành động thứ ba, nó cũng gắn một lớp khác vào các phần tử tổ tiên được bảo tồn

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

3

Giả sử chúng ta có cây tài liệu sau

Ví dụ cây DOM mượn từ http. //www. dự án sách mở. net/tutorials/xuống/css/bài 4. html

Bây giờ nếu chúng tôi chỉ muốn in đoạn thứ hai và thứ ba của phần tử

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

4, chúng tôi sẽ gọi

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

5 với hai phần tử đó. Hàm sẽ đính kèm các lớp sau vào DOM

Các quy tắc css cho các lớp đánh dấu này rất đơn giản.

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

1có một tài sản

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

7, và đó là nó.

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

0 không có định nghĩa kiểu, nó chỉ đóng vai trò là điểm đánh dấu, vì vậy chúng tôi không xóa bất kỳ nút nào đã được giữ nguyên khi duyệt qua cây trong nhiều lượt.

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

3 phức tạp hơn một chút và tôi nghi ngờ rằng không có bộ quy tắc kỳ diệu nào phù hợp với tất cả các trang web. Bạn có thể bỏ qua các định nghĩa kiểu cho lớp này hoàn toàn và kết quả in sẽ tốt hơn so với bất kỳ phương thức nào khác. Nhưng tôi thấy rằng việc đặt lại đường viền tổ tiên, bóng hộp, lề và phần đệm thường mang lại một chút cải tiến bổ sung cho chế độ xem in. Đây là bộ phong cách được đề xuất của tôi cho lớp này

.pe-preserve-ancestor {        
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;    
}

Bạn nên thử nghiệm các kiểu cho lớp này để tìm ra giải pháp tốt nhất cho nhu cầu cụ thể của mình

Và bây giờ, phần thưởng là thời gian để xem qua bài viết (hoặc chỉ cần cuộn xuống nhanh chóng). Kiểm tra hoạt động của

printPageArea('elementID')

90. Bạn sẽ tìm thấy bốn nút trong menu nửa trong suốt trên cùng sẽ in các phần khác nhau của trang. Lưu ý cách chỉ nội dung được yêu cầu sẽ được in và cách tất cả các kiểu được giữ nguyên. Ngoài ra kiểm tra mã nguồn. Hãy cho tôi biết nếu nó hoạt động cho các trường hợp sử dụng cụ thể của bạn

Làm cách nào để in phần tử trong JavaScript?

Làm cách nào để in một phần trang bằng JavaScript?

Làm cách nào để in phần tử theo id trong JavaScript?