In phần cụ thể của trang web javascript

Đoạn mã sau cho biết cách sử dụng 2 tệp CSS khác nhau. một cho màn hình và một cho máy in

Cách sử dụng khá đơn giản, tạo một bản sao của tệp CSS của bạn và xóa tất cả các phần không mong muốn bằng màn hình. không ai; . css"

...

.


.

.

từ chối trách nhiệm. Thông tin trên trang này được cung cấp "nguyên trạng" mà không có bất kỳ hình thức bảo hành nào. Ngoài ra, Arclab Software OHG không đảm bảo, bảo đảm hoặc đưa ra bất kỳ tuyên bố nào về việc sử dụng hoặc kết quả sử dụng về tính đúng đắn, độ chính xác, độ tin cậy, tính hiện tại hoặc các khía cạnh khác. Nhìn thấy. Thỏa thuận cấp phép

Việc in một số phần cụ thể của trang Web có thể hữu ích cho các báo cáo hàng quý, các cuộc họp quản lý kinh doanh và các nỗ lực liên quan. Để làm như vậy cần rất ít thời gian và chỉ cần các kỹ năng máy tính cơ bản. Mặc dù không hoàn toàn cần thiết nhưng một chương trình xử lý văn bản như Microsoft Word hoặc Corel’s WordPerfect có thể hữu ích cho việc định dạng cuối cùng. Nếu không, một trình soạn thảo văn bản đơn giản như NotePad hoặc WordPad sẽ đủ

1. 1

   Mở trình duyệt Web của bạn và nhập URL của trang Web chứa phần dữ liệu mà bạn muốn in

2. 2

   Chọn phần của trang Web mà bạn muốn in bằng cách đánh dấu nó. Đặt con trỏ chuột ở đầu phần bạn muốn in, sau đó nhấn và giữ nút chuột trái và di chuyển con trỏ đến cuối phần bạn muốn in

3. 3

   Đặt con trỏ vào phần được đánh dấu và nhấp chuột phải. Chọn "Sao chép" từ menu xuất hiện

4. 4

   Mở trình soạn thảo văn bản hoặc chương trình xử lý văn bản như Microsoft Word. Nhấp vào lựa chọn “Mới” hoặc nút “Tạo tài liệu mới”

5. 5

   Nhấp chuột phải vào bất kỳ phần nào của trang trống mới và chọn “Dán” từ các lựa chọn hộp thoại được cung cấp. Cài đặt Dán mặc định phù hợp với định dạng đích của trình soạn thảo văn bản, giúp loại bỏ mọi hình ảnh và định dạng khác như in đậm, in nghiêng, cỡ chữ và loại. Nếu bạn đang sử dụng một trình xử lý văn bản chẳng hạn như Microsoft Word và bạn muốn giữ nguyên các cài đặt này, hãy sử dụng công cụ chọn dán xuất hiện ở dưới cùng bên phải của lựa chọn đã dán của bạn và chọn “Giữ định dạng nguồn. ”

6. 6

   Sử dụng trình soạn thảo văn bản để xóa bất kỳ tài liệu nào bạn không muốn đưa vào trang in cuối cùng. Đánh dấu phần không mong muốn và nhấn phím “Xóa” trên bàn phím của bạn. Định dạng phần còn lại của văn bản cho phù hợp với yêu cầu của bạn

7. 7

   In trang bằng cách nhấn "Ctrl-P" ("Command-P" trên máy tính Mac) hoặc chọn "Print" từ menu Tệp

   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 muố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

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

   2 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

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

3 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

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

4 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à

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

5, 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à

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

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

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

7. 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

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

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

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

9

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

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

20 trong hành động. 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 một phần cụ thể của trang JavaScript?

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

Làm cách nào để in một khu vực cụ thể của trang web bằng jQuery?