웹 브라우저에서 WYSIWYP (표시된 내용 인쇄)를 얻는 방법?

브라우저에서 웹 페이지를 인쇄 할 때 브라우저에서보고있는 내용과 정확히 일치하는 종이를 얻을 것으로 예상됩니다. 정확히 말하면 : 브라우저는 높이가 무한한 캔버스를 제외하고 동일한 페이지 내용을 동일한 방식으로 렌더링 한 다음 인쇄 용지 방식으로 실제 용지 페이지에 결과를 배포하는 방법을 결정합니다.

그러나 그것은 많은 웹 사이트에서 일어나는 일이 아닙니다. 완전히 다른 것을 인쇄 할 수 있습니다. 나는 브라우저에게 이것을 요구하지 않았으며 그것을 원하지 않습니다.

스크린 샷을 찍고 열심히 잘라내어 붙여 넣은 다음 결과 이미지를 인쇄하는 것 외에 원하는 것을 얻을 수있는 방법이 있습니까? 내가 사용하는 웹 브라우저 (Firefox, Chrome, Safari, IE 또는 Opera)에 알리는 방법이 있습니까? "이 페이지를 임의로 높은 브라우저 창에 렌더링 할 때이 페이지를 인쇄하십시오"?

(PS : 참조 : 화면 CSS를 사용하여 브라우저에서 인쇄 ?)

Chrome에는 개발자 도구에이 기능이 내장되어 있지만 명확하지 않은 위치에 있습니다.

• 개발자 도구를 엽니 다 (Windows : F12또는 Ctrl+ Shift+ I, Mac : Cmd+ Opt+ I)
• 클릭 사용자 정의 및 제어 DevTools로의 햄버거 메뉴 버튼을 선택합니다 설정을 렌더링> 더보기를 (또는 렌더링 최신 버전에서).
• 체크 에뮬레이션 인쇄 용지 상기 체크 박스 렌더링 탭과 선택 화면 용지 종류를.

이 답변 에서 주로 인용했습니다 . 차이점은 아래를 참조하십시오.

이제 인쇄하면 인쇄물이 정확하게 표시됩니다. 인쇄 할 때까지 개발자 도구를 열어 두십시오. 개발자 도구를 닫으면 렌더링 설정이 다시 정상으로 재설정됩니다.

참고 :이 답변에 대한 영감은 https://superuser.com/a/568847/176146 에서 나왔습니다 . 그러나이 답변의 실제 텍스트는 lmeurs 의 답변 에서 온 것 입니다. 거의 똑같지 만 우리는 정답과 정반대로 노력하고 있으므로 재정의를 인쇄 로 설정하는 대신 화면 으로 설정합니다 .

웹 페이지가 브라우저에 표시되는 내용을 인쇄하지 않는 이유는 무엇입니까?

일부 웹 페이지가 다르게 인쇄되는 이유는 인쇄 스타일 시트 가 있기 때문 입니다.

인쇄 스타일 시트 란 무엇입니까?

인쇄 스타일 시트는 웹 페이지의 형식을 지정하므로 인쇄시 사용자에게 친숙한 형식으로 자동 인쇄됩니다. 인쇄 스타일 시트는 여러 해 동안 사용되어 왔으며 많이 쓰여졌습니다. 그러나 웹 사이트를 구현하는 웹 사이트는 거의 없으므로 종이에 제대로 인쇄되지 않는 웹 페이지가 남아 있습니다.

인쇄 스타일 시트를 다음과 같이 사용하는 웹 사이트는 거의 없습니다.

• 인쇄 스타일 시트는 특히 내용이 많은 페이지 (예 : 이와 같은)에서 유용성을 크게 향상시킵니다.
• 그들은 엄청나게 빠르고 쉽게 설정할 수 있습니다.

일부 웹 사이트는 인쇄용 페이지 버전에 대한 링크를 제공하지만 물론 설정 및 유지 관리해야합니다. 또한 사용자가 화면에서이 링크를 확인한 다음 정기적으로 페이지를 인쇄하는 방식 (예 : 화면 상단의 인쇄 버튼 선택)보다 먼저 사용해야합니다. 그러나 인쇄용 버전은 여러 웹 페이지에 걸쳐있는 기사와 같이 여러 웹 페이지를 동시에 인쇄 할 때 유용합니다.

웹 사이트를 인쇄 할 때 소스 인쇄 스타일 시트 (CSS) 비활성화

인쇄 스타일 시트를 비활성화하는 방법

최근에 화면에 표시된 그대로 웹 사이트의 스냅 샷을 만들어야했습니다. 즉, 배경색을 원했고 광고를 원했고 전체 레이아웃을 원했습니다.

한 가지 옵션은 페이지를 아래로 스크롤 할 때 순차적 스크린 샷을 만든 다음 Photoshop에서 다시 조각화하는 것입니다. 시간이 오래 걸리고 저해상도 (72dpi) 이미지가 남습니다.

다른 방법은 페이지를 인쇄 한 다음 실제로 인쇄하는 대신 PDF로 "저장"하는 것입니다. 이것은 페이지를 인쇄하는 것과 페이지를 인쇄하기 위해 다른 레이아웃을 정의하지 않은 페이지에 매우 효과적입니다.

안타깝게도 사용자가 웹 사이트를 인쇄하려고 할 때 새 페이지 스타일을 정의하는 "인쇄"스타일 시트를 웹 사이트에 포함시키는 것이 점점 더 대중화되었습니다. 이것은 헤더에 정의되어 있으며 다음과 같습니다.

Chris Pederick이 개발 한 "웹 개발자"추가 기능 / 확장 기능 : 내 요구를 진정으로 충족시키는 옵션은 하나만 발견했습니다 .

이 플러그인을 사용하면 모든 스타일, 기본 스타일, 인라인 스타일, 내장 스타일 및 인쇄 스타일을 쉽게 비활성화 할 수 있습니다!

현재 Firefox 및 Chrome에서 사용할 수 있습니다. 나는 주로 Safari를 사용하므로 Safari 확장 기능이 언젠가 올 것으로 기대합니다. Safari에서 찾은 유일한 옵션은 모든 스타일을 비활성화하는 것입니다. 기본적으로 최신 버전의 브라우저 (5.0.3)와 함께 제공되는 기능입니다. 이 기능은 개발 중에 텍스트 전용 브라우저에서 사이트를 보는 방법을 확인하지만 사용하지 않는 스타일을 선택할 수있는 기능이 없어 유틸리티가 제한되어 있습니다.

Firefox에서 위의 확장자로 인쇄 스타일을 비활성화하는 예는 다음과 같습니다.

소스 인쇄 스타일 시트-확실한 안내서

Firefox 용 플러그인 없음 솔루션 : 기본 개발자 도구 (기어 아이콘)에서 웹 개발자 도구를 엽니 다. "전체 페이지의 스크린 샷을 찍습니다." 이 부분은 한 번만 수행하면됩니다.

그런 다음 개발자 도구에서 카메라 아이콘을 클릭하십시오. 전체 페이지가 .png로 저장됩니다. 여기에서 인쇄하거나 PDF로 변환하는 등의 작업을 수행 할 수 있습니다.

Chrome 확장 프로그램 : Webpage screenshot을 사용하고 있습니다. 두 번의 클릭으로 전체 웹 페이지가 jpg 또는 pdf로 변환됩니다. 스크린 샷을 더 이상 붙일 필요가 없습니다. 이 페이지는 다음과 같습니다.

나는 비슷한 문제에 직면했다. 현재 Chrome 용 인쇄용 및 PDF 확장을 사용 하고 있습니다.

가장 좋은 기능은 인쇄 / PDF에서 원하지 않는 항목을 수동으로 삭제할 수 있다는 것입니다.

OpenScreenShoot 라는 또 다른 것이 있습니다. GitHub에서 사용할 수있는 오픈 소스이기 때문에 매우 좋아 하며 WebpageScreenShot 과 같은 다른 대안이 실패한 매우 긴 웹 페이지에서 저에게 효과적이었습니다 .

(이를 일련의 소프트웨어 권장 사항 답변 으로 바꿀 위험이 있지만 지금까지 브라우저 확장 프로그램 X를 설치하고 사용 하는 것이 실제로 작동하는 유일한 유형 인 것 같습니다.)

최근 에이 목적으로 Open Screenshot Chrome 확장 프로그램을 사용하고 있으며 매우 만족합니다. 긴 Quora 페이지 에는 아무런 문제가 없었습니다 .

업데이트 (2017 년 11 월) : 더 이상 최선의 옵션이 아닙니다. Firefox 및 Chrome은 이제 개발자 도구 에서 전체 페이지 스크린 샷 찍기를 지원 합니다.

현재 Firefox에서 다음과 같이 할 수 있습니다 (현재 65.0.2를 사용하고 있습니다).

1. F12를 누르십시오. 개발자 도구 창이 나타납니다.
2. 오른쪽 상단 모서리에는 카메라 아이콘이 있습니다. 전체 페이지의 스크린 샷을 만들려면 클릭하십시오.

에서 설정 , 당신은 약간의 동작을 사용자 정의 할 수 있습니다 (에 액세스하기 위해, 카메라 아이콘의 오른쪽에있는 세 개의 점을 클릭) 기본적으로 스크린 샷은 Firefox 다운로드 폴더에 저장됩니다.

카메라 아이콘이 없으면 먼저 설정 에서 카메라 아이콘을 활성화해야 합니다 .