인쇄 미리보기 CSS, 브라우저에 있지만

Question

TLDR; dev 도구를 사용하지 않고 브라우저에서 인쇄 CSS를 표시 할 수 있어야합니다.

이것은 이상한 일이지만, 나는 빨대를 쥐고 ​​있습니다.

전체 시스템을 설명하지 않고 웹 기반 편집을위한 텍스트 메커니즘을 템플릿에 넣은 다음 HTML2PDF 작업을 통해 PDF로 렌더링합니다. 각 페이지에 정적 머리글/바닥 글과 같은 요구 사항이 있지만 페이지간에 흐르는 텍스트 등이 있습니다.

출력 결과가 어떻게 표시 될지 실시간 또는 거의 실시간으로 미리 볼 수 있어야합니다. 그것의 PDF 때,하지만 난 그냥 각 변경에 PDF를 다시 렌더링하고 싶지 않아요. 필자는 인쇄 CSS를 사용하는 "인쇄 미리보기"를 기본 브라우저 창이나 iframe 내에서 보거나 일반 인쇄 미리보기를 사용하지 않고 chrome/firefox의 웹 도구를 사용하지 않고 표시 할 수 있기를 정말로 바랍니다.

인쇄 CSS로 렌더링하도록 브라우저에 알리는 메시지가 있습니까? 아니면 내가 그것을 시뮬레이트 할 수없는 JS 라이브러리가 있을까요?

Answer 1

여기에 스택 오버플로 작업에 대한 채용 정보 프로필 기능 적용에 대한 설명과 비슷한 것을 작성했습니다. 일부 HTML에 일부 CSS를 적용하는 것보다 훨씬 어려운 작업입니다.

필자는이 PDF가 여러 페이지 일 수 있으며 기본적으로 모든 인쇄 미리보기의 인쇄 미리보기 기능과 같은 개별 페이지를 표시하려고한다고 가정합니다.

사용중인 HTML2PDF 변환기는 페이지 높이와 너비를 픽셀 단위로 정의합니다 (실제로 그 크기를 알아 내려고 실험해야 할 수도 있음). 일반적으로 페이지 채우기도 픽셀로 찾을 수 있습니다. 이것을 사용하면 HTML에 단일 페이지 래퍼를 만들고 일부 CSS를 사용하여 패딩과 일치시키고 멋진 페이지 테두리를 만들 수 있습니다.

<div class="pdf-page"></div> 

거기에 pdf에서 원하는 html의 모든 내용을 덤프하십시오.

이제 PDF의 실제 내용이 픽셀 단위로 얼마나 큰 지 알아 내야합니다. 이것을하기위한 가장 쉬운 방법은 브라우저의 컨테이너에 실제로 컨테이너를 놓은 다음 몇 가지 자바 스크립트를 사용하여 컨테이너의 높이를 계산하는 것입니다. 화면에 실제로 표시하지 않고도이 작업을 수행 할 수 있지만 계산 된 값은 현재 브라우저의 그래픽 엔진을 기반으로하며 HTML2PDF 변환기에서 사용하는 값과 다를 수 있으므로 결과가 다를 수 있습니다. 일관된 문제가 발생하는 경우 브라우저의 페이지 당 계산에 약간의 패딩을 추가하여 문제를 해결할 수도 있지만 그 범위를 벗어납니다.

전체 문서의 한 페이지와 높이가 있으면 필요한 페이지 수를 파악할 수 있으며 미리보기 페이지에 여러 번 표시된 모든 HTML 콘텐츠가 포함 된 위의 전체 pdf-page을 복사 할 수 있습니다. 그런 다음 각 페이지에 대해 음의 여백을 설정하여 내용을 위로 스크롤합니다. 첫 번째 페이지는 -0이고 두 번째 페이지는 -1 * pageHeightInPixels이고 세 번째 페이지는 -2 * pageHeightInPixels입니다. 문서가 짧으면 큰 효과를냅니다. 지나치게 길면 실패 할 수 있습니다.

이제 원하는대로 스타일을 지정할 수 있습니다. 내가 이런 짓을하면

---

는, 그것을 달성의 새로운 방법을 찾아하지 않은 7 년 전처럼,하지만 우리는 이후 우리가 PDF 파일 미리보기가 실제로 실제 PDF 파일을 생성 할 방법이 변경되었습니다.