화면 스타일 시트로 인쇄하려면 어떻게합니까?

내가 사용하는 많은 웹 사이트는 인쇄 매체에 대한 스타일 시트가 실제로 좋지 않지만 화면 스타일 시트는 상당히 좋습니다.

브라우저에서 인쇄 스타일 시트를 무시하고 화면 스타일 시트로 인쇄하도록 지시 할 수있는 방법이 있습니까?

또한 고객들에게이 둘의 차이점을 보여주고 싶을 때이 작업을 수행하고 싶습니다.

Chrome 개발자 도구 ( Ctrl+ Shift+ I)를 사용하는 것이 내가 찾은 유일한 방법입니다.

1. media="screen"해당 속성 의 모든 인스턴스를 검색 하고 삭제하십시오.
2. 그런 다음 media="print"전체 링크를 검색 하고 삭제하십시오.
3. 그런 다음 인쇄를 시도하십시오.

이것은 일반적으로 화면 스타일이있는 페이지를 제공합니다.

인쇄 스타일 만 비활성화하려는 경우 웹 개발자 확장을 설치할 수 있습니다 (Firefox 및 Chrome 용 버전이 있다고 생각합니다). 인쇄 스타일을 비활성화하는 버튼이 있습니다. 그러나 인쇄 할 "스크린"스타일을 확장하지 않으므로 대부분 원하는 방식으로 작동하지 않습니다.

다음은 제임스의 생각을 하지만, jQuery를 사용하여 :

$('*[media="screen"],*[media="print"]').attr('media', '')

페이지에 jQuery가 없으면 다음을 삽입하십시오.

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);

개발자 도구에서 미디어 에뮬레이션을 직접 선택하는 새로운 방법이 있습니다 ( https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ 참조).

레오는 거기에 좋은 생각 이 있었지만 제임스가 말한 것을 제대로 수행하지 못했습니다 .

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

힌트 : 다음을 북마크릿으로 저장하여 쉽게 사용할 수 있습니다.

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)

이것은 jQuery를 미리로드하고 완료되기까지 2 초를 기다립니다. 그러나이 대기가 충분하지 않으면 다시 실행하면 jQuery가 그 동안로드되어야합니다.

Chrome 에서 쉽게 할 수있는 방법을 찾았습니다 .

CSS 미디어 에뮬레이션에서 개발자 도구> 렌더링> '화면'을 선택하십시오.

이제 인쇄 해보십시오. Print CSS 대신 화면 CSS를 선택합니다.

1. 아무것도 수행 제임스가 말했다 )

   Chrome 개발자 도구 설정 (오른쪽 하단 모서리)을 여는 출력을 확인하고 "재정의"옵션에서 "CSS 미디어 인쇄 에뮬레이션"-보기를 선택할 수 있습니다. 이 옵션을 전환하면 인쇄 및 화면보기를 비교할 수 있습니다. 즐기세요!

2. 이 애드온을 설치하십시오 : https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

이제 배경 이미지와 색상도 인쇄됩니다.

버그 : CSS 스프라이트에서는 작동하지 않습니다.

편집 : Chrome은 2014 년에 인쇄보기를 변경 했으므로 더 이상 연결된 애드온을 사용할 필요가 없다고 생각합니다.

@media printand를 사용하여 단일 CSS 파일이있는 웹 사이트 에서이 문제에 부딪 쳤 @media screen으므로 별도의 인쇄 CSS 파일을 비활성화하는 솔루션이 작동하지 않았습니다. 페이지를 보면서 CSS를 편집하고 인쇄 블록을 주석 처리 할 수는 있지만 이러한 변경 사항은 인쇄 미리보기로 넘어 가지 않았습니다.

내가 찾은 해결책은 Firefox 및 Chrome 용 인쇄 편집 확장 프로그램이었습니다 . 인쇄 직전에 페이지를 편집 할 수 있으며 페이지에 웹 스타일 ( @media screen) 을 사용하는 간단한 버튼이 포함되어 있습니다 .

브라우저가 대략 16 : 9 인 반면 인쇄면은 약 17:22 비율이므로 페이지의 일부 내용이 가로로 약간 혼잡 해지 기 때문에 인쇄 면적은 약 17:22 비율이므로 약간 씩 인쇄 해야하는 배율을 변경해야했습니다. 또한 배경색과 이미지를 별도로 인쇄해야했습니다.

때때로 웹 사이트는 CSS를 사용하여 화면에 인쇄 할 때 다른 스타일 을 사용하도록 지정합니다 . 이것은 종종 좋지만 혼란스럽고 문제가 될 수도 있습니다. 페이지의 소스 코드를 검사하고 다음과 같은 것을 찾으십시오.

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

이 문제가 일반적인 이유 중 하나는 널리 사용되는 Bootstrap 프레임 워크를 사용 하는 웹 사이트가 위의 CSS 스타일을 포함하는 ubiquitous bootstrap.min.css 파일을 사용하기 때문 입니다.

찾아야 할 핵심은 @media print입니다. 웹 사이트는 종종 복잡한 구조를 가지며 페이지를 로컬에 저장하고 재귀 텍스트 검색 도구를 사용하여 페이지를 검사하는 데 도움이 될 수 있습니다.

CSS 코드에서 해당 지점을 찾았다 고 생각되면 개발자 기능을 사용하여 브라우저에서 직접 페이지를 수정할 수 있습니다. (Chrome에서는 Ctrl+ Shift+ I를 눌러 시작합니다.)

CSS 코드를 검색하고 문제를 일으키는 행을 제거하거나 무효화하십시오. "인쇄 미리보기"를 사용하여 작업이 작동했는지 확인하십시오.

Greasemonkey addon을 설치하고 아래 주어진 스크립트를 사용하십시오.

http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/ 에서 찾은 스크립트를 수정했습니다 .

마지막에 "screen"을 "print"로 변경했습니다 (jQuery에 대해 전혀 몰라서 질문하지 마십시오). 실제로 화면 버전을 프린터로 보냅니다. PDF로 인쇄 할 때 (Foxit 또는 Nitro Pdf 프린터 사용) 가로 모드에서 페이지 유형을 Tabloid Extra로 설정하여 pdf 크기가 화면 크기와 다소 일치하도록합니다. 즐겨! 프로그래밍에 대해 아무것도 몰라서 크레딧은 원저자에게갑니다.

// ==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);

"Print background (colors & images)"옵션 을 활성화 Page Setup하고 어떻게 보이는지 확인하십시오 Print Preview(FF).

제임스와 유사 - 사용은 "소스"크롬 개발자 도구에서 탭을 교체 의 모든 인스턴스 media print와를 media speech. 따라서 탐색시 navbar 숨기기 등의 모든 CSS 변경 사항은 인쇄시 적용되지 않지만 텍스트 음성 변환을 사용할 때는 적용됩니다.

위와 같이 JQuery로 가능할 수 있습니다.

이것은 CSS의 CDN을 사용할 때 유용하므로 사용자 정의가 올바르게 수행됩니다.

Mac에는 훌륭한 도구가 있습니다.

Paparazzi 설치 => URL을 Paparazzi에 복사 => 다른 이름으로 이미지 저장 => PDF

(PDF 내보내기에서 텍스트는 선택할 수 없으며 "이미지"가 아닙니다)

https://derailer.org/paparazzi/screenshots

즐겨 :-)