Làm cách nào để có WYSIWYP (in những gì bạn thấy) trong trình duyệt web?

Khi tôi in một trang web từ trình duyệt của mình, tôi hy vọng sẽ có được trên giấy chính xác nội dung tôi đang xem trong trình duyệt. Nói chính xác: Tôi hy vọng trình duyệt hiển thị cùng một nội dung trang theo cùng một cách, ngoại trừ trên một khung vẽ có chiều cao vô hạn, sau đó quyết định một cách cụ thể về cách in để phân phối kết quả trên các trang giấy.

Tuy nhiên, đó không phải là tất cả những gì đang xảy ra trên nhiều trang web. Họ có thể in một cái gì đó hoàn toàn khác nhau. Tôi chưa bao giờ yêu cầu trình duyệt làm điều này và tôi không muốn nó xảy ra.

Có cách nào để có được những gì tôi muốn (ngoài việc chụp ảnh màn hình, cắt và dán chúng một cách tỉ mỉ và in các hình ảnh thu được) không? Có cách nào để nói với trình duyệt web tôi sử dụng (Firefox, Chrome, Safari, IE hoặc Opera): "in trang này như bạn sẽ hiển thị trên cửa sổ trình duyệt cao tùy ý"?

(PS: xem thêm: In từ trình duyệt bằng CSS màn hình ?)

Chrome có tính năng này được tích hợp trong Công cụ dành cho nhà phát triển, nhưng ở một vị trí không rõ ràng.

• Mở Công cụ dành cho nhà phát triển (Windows: F12hoặc Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Nhấp vào Customize và DevTools kiểm soát nút bánh hamburger menu và chọn Công cụ khác> Rendering thiết lập (hoặc Rendering trong các phiên bản mới hơn).
• Kiểm tra các phương tiện in Emulate hộp kiểm tại Rendering tab và chọn Screen loại phương tiện truyền thông.

Trích dẫn chủ yếu từ câu trả lời này . Xem dưới đây cho sự khác biệt.

Bây giờ khi bạn in, bản in ra sẽ chính xác như những gì bạn thấy. Đảm bảo giữ các công cụ dành cho nhà phát triển mở cho đến khi bạn in. Khi bạn đóng các công cụ dành cho nhà phát triển, cài đặt Kết xuất sẽ được đặt lại về bình thường.

Lưu ý: Cảm hứng cho câu trả lời này đến từ https://superuser.com/a/568847/176146 . Tuy nhiên, văn bản thực tế của câu trả lời này là từ lmeurs ' câu trả lời . Nó gần như giống hệt nhau, nhưng chúng tôi đang cố gắng thực hiện ngược lại với câu trả lời của họ, vì vậy thay vì đặt ghi đè thành In, nó được đặt thành Màn hình .

Tại sao các trang web của tôi không in những gì tôi thấy trong trình duyệt của mình?

Lý do một số trang web của bạn in khác nhau là vì chúng có biểu định kiểu in .

Biểu định kiểu in là gì?

Biểu định kiểu in định dạng một trang web để khi được in, nó sẽ tự động in ở định dạng thân thiện với người dùng. Các bảng định kiểu in đã xuất hiện trong một số năm và đã được viết về rất nhiều. Tuy nhiên, rất ít trang web triển khai chúng, có nghĩa là chúng tôi còn lại các trang web bực bội không in đúng ra giấy.

Điều đáng chú ý là rất ít trang web sử dụng bảng định kiểu in như:

• Các bảng định kiểu in cải thiện đáng kể khả năng sử dụng, đặc biệt là đối với các trang có nhiều nội dung (chẳng hạn như trang này!)
• Chúng nhanh chóng và dễ dàng để thiết lập

Một số trang web cung cấp một liên kết đến phiên bản thân thiện với trang in, nhưng điều này tất nhiên cần phải được thiết lập và duy trì. Nó cũng yêu cầu người dùng chú ý liên kết này trên màn hình, và sau đó sử dụng nó trước cách thông thường mà họ in các trang (ví dụ: bằng cách chọn nút in ở đầu màn hình). Tuy nhiên, các phiên bản thân thiện với in rất hữu ích khi in một số trang web cùng lúc, chẳng hạn như một bài viết kéo dài đến một số trang web.

Nguồn Vô hiệu hóa Bảng định kiểu in (CSS) khi in trang web

Làm cách nào để vô hiệu hóa biểu định kiểu in?

Gần đây tôi cần có một ảnh chụp nhanh của một trang web chính xác như nó được hiển thị trên màn hình của tôi. Đó là, tôi muốn màu nền, tôi muốn quảng cáo, tôi muốn bố cục đầy đủ.

Một tùy chọn là chụp ảnh màn hình liên tiếp khi bạn cuộn trang xuống, sau đó ghép chúng lại với nhau trong Photoshop. Điều này gây tốn thời gian và để lại cho bạn hình ảnh có độ phân giải thấp (72dpi).

Một cách khác để làm điều này là In trang, sau đó "lưu dưới dạng" PDF thay vì thực sự in. Điều này hoạt động khá tốt đối với các trang không xác định bố cục khác để in trang so với xem trang.

Thật không may cho tôi, nó đã trở nên ngày càng phổ biến để bao gồm một biểu định kiểu "in" trên một trang web, định nghĩa các kiểu trang mới khi người dùng cố gắng in trang web. Điều này được định nghĩa trong tiêu đề và trông giống như thế này:

Tôi chỉ tìm thấy một tùy chọn thực sự đáp ứng nhu cầu của mình: Tiện ích bổ sung / tiện ích mở rộng "Nhà phát triển web" được phát triển bởi Chris Pederick.

Với plugin này, bạn có thể dễ dàng vô hiệu hóa TẤT CẢ các kiểu, Kiểu mặc định, kiểu nội tuyến, kiểu được nhúng và, bạn đoán nó, kiểu in!

Nó hiện có sẵn cho Firefox và Chrome. Tôi thực sự hy vọng một phần mở rộng Safari sẽ đến vào một ngày nào đó, vì tôi chủ yếu sử dụng Safari. Tùy chọn duy nhất tôi tìm thấy cho Safari là tắt TẤT CẢ các kiểu - một tính năng mặc định đi kèm với phiên bản mới nhất (5.0.3) của trình duyệt. Điều này hữu ích trong quá trình phát triển để xem trang web của bạn sẽ được xem như thế nào trên trình duyệt chỉ có văn bản nhưng không có khả năng chọn kiểu bạn đang vô hiệu hóa, nó có tiện ích hạn chế.

Dưới đây là một ví dụ về việc vô hiệu hóa các kiểu in với phần mở rộng ở trên trong Firefox:

Biểu định kiểu nguồn in - hướng dẫn dứt khoát

Giải pháp không bổ trợ cho Firefox: Mở Công cụ dành cho nhà phát triển web, trong Công cụ dành cho nhà phát triển mặc định (biểu tượng bánh răng) đánh dấu "Chụp ảnh màn hình của toàn bộ trang." Bạn chỉ cần làm phần này một lần.

Sau đó, trong Công cụ dành cho nhà phát triển, nhấp vào biểu tượng camera. Toàn bộ trang sẽ được lưu dưới dạng .png. Từ đây bạn có thể in nó, chuyển đổi sang pdf, v.v.

Tôi đang sử dụng tiện ích mở rộng Chrome: Ảnh chụp màn hình trang web . Với hai lần nhấp, trang web hoàn chỉnh được chuyển đổi thành jpg hoặc pdf. Không cần phải dán các ảnh chụp màn hình với nhau nữa. Trang này trông như thế này:

Tôi cũng đã phải đối mặt với vấn đề tương tự. Hiện tại tôi đang sử dụng Print Friendly và PDF Extenstion cho Chrome .

Tính năng tốt nhất là tôi có thể xóa thủ công các mục mà tôi không muốn trong In / PDF của mình.

Đây là một cái khác gọi là OpenScreenShoot . Tôi thích nó bởi vì nó là Nguồn mở, có sẵn tại GitHub và nó hoạt động với tôi cho một trang web rất dài mà trên đó, các lựa chọn thay thế khác như WebpageScreenShot đã thất bại.

(Có nguy cơ biến câu trả lời này thành một bộ câu trả lời Đề xuất phần mềm , nhưng cho đến nay, cài đặt và sử dụng tiện ích mở rộng trình duyệt X dường như là loại câu trả lời duy nhất thực sự hoạt động :)

Gần đây tôi đã sử dụng tiện ích mở rộng Chrome Ảnh chụp màn hình cho mục đích này và tôi rất hài lòng với nó. Nó không có vấn đề với một trang Quora dài .

Cập nhật (tháng 11 năm 2017): đây không còn là tùy chọn tốt nhất: Firefox và Chrome hiện hỗ trợ chụp ảnh màn hình toàn trang trong Công cụ dành cho nhà phát triển của họ .

Ngày nay, điều này có thể được thực hiện trong Firefox (tôi đang sử dụng 65.0.2 ngay bây giờ) như sau:

1. Nhấn F12. Cửa sổ Công cụ dành cho nhà phát triển sẽ hiển thị.
2. Gần góc trên bên phải, có một biểu tượng camera. Để chụp ảnh màn hình của toàn bộ trang, nhấp vào nó.

Trong Cài đặt (để truy cập chúng, nhấp vào ba dấu chấm ở bên phải biểu tượng camera), bạn có thể tùy chỉnh một chút hành vi của nó; theo mặc định, nó sẽ lưu ảnh chụp màn hình vào thư mục tải xuống Firefox của bạn.

Nếu biểu tượng camera bị thiếu, trước tiên bạn cần bật nó trong Cài đặt .