Một số trang web mà tôi sử dụng có biểu định kiểu thực sự xấu cho phương tiện in, nhưng biểu định kiểu màn hình của chúng khá tốt.
Có cách nào để bảo trình duyệt của tôi bỏ qua biểu định kiểu in và chỉ in bằng biểu định kiểu màn hình không?
Tôi cũng muốn làm điều này khi tôi muốn cho khách hàng thấy sự khác biệt giữa hai người.
Câu trả lời:
Sử dụng Chrome Developer Tools ( Ctrl+ Shift+ I) là điều duy nhất tôi thấy có hiệu quả.
media="screen"và xóa thuộc tính đó.media="print"và xóa toàn bộ liên kết đó.Điều này thường cho tôi các trang với kiểu dáng màn hình.
Nếu bạn thực sự chỉ muốn tắt các kiểu in, bạn có thể cài đặt tiện ích mở rộng Web Developer (Tôi nghĩ rằng có một phiên bản cho Firefox và Chrome). Nó có một nút để vô hiệu hóa các kiểu in. Tuy nhiên, nó không mở rộng kiểu "màn hình" để in, vì vậy hầu hết thời gian nó không hoạt động theo cách bạn hy vọng.
Theo ý tưởng của James nhưng sử dụng jQuery:
$('*[media="screen"],*[media="print"]').attr('media', '')
Nếu trang không có jQuery, hãy thêm nó vào:
var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
Có một phương pháp mới để chọn trực tiếp mô phỏng phương tiện trong Công cụ dành cho nhà phát triển, xem https://stackoverflow.com/questions/9540990/USE-chromes-element-inspector-in-print-preview-mode/
Leo có một ý tưởng hay ở đó, nhưng nó không hoàn toàn làm theo những gì James nói : nó nên
$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();
Gợi ý: lưu các mục sau dưới dạng bookmarklet để dễ sử dụng:
javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)
Điều này tải trước jQuery và đợi 2 giây để nó kết thúc, nhưng nếu chờ đợi này là không đủ, chỉ cần chạy lại nó, jQuery sẽ được tải trong thời gian đó.
Tôi đã tìm thấy một cách dễ dàng để làm điều đó trong Chrome .
Mở Công cụ dành cho nhà phát triển> Kết xuất> Chọn 'màn hình' trong Mô phỏng phương tiện CSS.
Bây giờ hãy thử in. Nó sẽ chọn CSS màn hình thay vì In CSS.
Làm bất cứ điều gì James nói ;)
Bạn có thể kiểm tra đầu ra mở cài đặt Công cụ dành cho nhà phát triển Chrome (góc dưới cùng bên phải) và chọn trong "Ghi đè" tùy chọn "Giả lập bản in phương tiện CSS" -view. Bằng cách bật tùy chọn này, bạn có thể so sánh chế độ xem và in màn hình. Chúc vui vẻ!
Cài đặt tiện ích bổ sung này: https://chrom.google.com.vn/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk
Bây giờ hình nền và màu sắc cũng được in.
Bug: Không hoạt động với CSS spites.
EDIT: Chrome đã thay đổi chế độ xem in vào năm 2014 Tôi nghĩ vậy nên bạn không cần phải sử dụng addon được liên kết nữa.
Tôi vừa gặp vấn đề này với một trang web có một tệp CSS sử dụng @media printvà @media screenvì vậy giải pháp vô hiệu hóa tệp CSS in riêng biệt không hiệu quả với tôi. Mặc dù tôi chắc chắn có thể chỉnh sửa CSS và nhận xét khối in trong khi xem trang, những thay đổi đó không được chuyển sang bản xem trước in.
Giải pháp tôi tìm thấy là tiện ích mở rộng In Chỉnh sửa cho Firefox và Chrome . Nó cho phép bạn chỉnh sửa trang ngay lập tức trước khi in và bao gồm một nút đơn giản để sử dụng Kiểu Web ( @media screen) cho trang.
Tôi đã phải thay đổi tỷ lệ tôi đang in một chút, vì bề mặt in có tỷ lệ 17:22 trong khi trình duyệt của tôi là khoảng 16: 9, vì vậy một số nội dung trên trang bị hơi đông theo chiều ngang. Tôi cũng phải kích hoạt in riêng màu nền & hình ảnh
Đôi khi các trang web sử dụng CSS để chỉ định rằng các kiểu khác nhau nên được sử dụng trên màn hình và khi in. Điều này thường tốt, nhưng nó cũng có thể gây nhầm lẫn và có vấn đề. Kiểm tra mã nguồn của trang và tìm kiếm một cái gì đó như:
@media print {
*:after {
color: #000 !important;
background: transparent !important;
}
Một lý do phổ biến là vấn đề này là các trang web sử dụng khung Bootstrap phổ biến sử dụng tệp bootstrap.min.css phổ biến , có chứa kiểu CSS ở trên.
Điều quan trọng để tìm kiếm là @media print. Các trang web thường có cấu trúc phức tạp và nó có thể giúp lưu trang cục bộ và kiểm tra nó bằng một công cụ tìm kiếm văn bản đệ quy.
Khi bạn nghĩ rằng bạn đã tìm thấy vị trí trong mã CSS, bạn có thể sửa đổi trang trực tiếp trong trình duyệt của mình bằng cách sử dụng các tính năng dành cho nhà phát triển. (Trong Chrome, bạn nhấn Ctrl+ Shift+ Iđể khởi chạy chúng.)
Tìm kiếm mã CSS và chỉ cần loại bỏ hoặc làm mất hiệu lực các hàng gây ra sự cố. Xác minh rằng hoạt động đã hoạt động bằng cách sử dụng "In xem trước".
Cài đặt addon Greasemonkey và sử dụng tập lệnh được đưa ra dưới đây.
Tôi đã sửa đổi một tập lệnh tôi tìm thấy ở đây http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/
Cuối cùng tôi đã thay đổi "màn hình" thành "in" (Tôi không biết gì về jQuery, vì vậy đừng hỏi tôi bất kỳ câu hỏi nào) để nó có hiệu lực gửi phiên bản màn hình tới máy in. Khi in thành pdf, (sử dụng máy in Foxit hoặc Nitro Pdf), tôi đặt loại trang thành Tabloid Extra ở chế độ ngang để kích thước pdf phù hợp với kích thước màn hình nhiều hay ít. Thưởng thức! Hãy nhớ rằng, tôi không biết gì về lập trình, vì vậy khoản tín dụng dành cho tác giả ban đầu.
// ==UserScript==
// @name Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace netsi
// @match http://*/*
// @author Sten Hougaard
// @description Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
script.addEventListener('load', function () {
var script = document.createElement("script");
script.textContent = "(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
// the guts of this userscript
function main() {
var bPrint = (window.location.toString().indexOf('#print')!=-1);
if (bPrint) {
// The user wants to print this page
jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
jQuery('link[media*="print"]').remove(); // remove any styling related to print
}
}
// load jQuery and execute the main function
addJQuery(main);
Tương tự như James - sử dụng tab "Nguồn" trong công cụ Nhà phát triển Chrome và thay thế tất cả các phiên bản media printbằng media speech. Do đó, tất cả các thay đổi css để ẩn điều hướng vv sẽ không được áp dụng khi in (nhưng sẽ được áp dụng khi sử dụng văn bản thành giọng nói)
Điều này có thể thực hiện được với JQuery như trên.
Điều này rất hữu ích vì tôi đang sử dụng CDN của css nên việc tùy chỉnh là đúng
Có một công cụ tuyệt vời cho điều đó trên Mac.
Cài đặt Paparazzi => sao chép URL vào Paparazzi => Lưu hình ảnh dưới dạng => PDF
(trong xuất PDF, ngay cả Văn bản ist có thể chọn, nó không chỉ là "hình ảnh")
https://derailer.org/paparazzi/sc Greensshots
thưởng thức :-)
Delete This Node.