Google 크롬 인쇄 페이지 나누기
페이지 나누기를 할 수 있도록 Google 크롬을 얻으려고합니다.
나는 page-break-after: always;크롬에서 유효한 많은 웹 사이트를 통해 들었지만 아주 간단한 예제로도 작동하지 않는 것 같습니다. 크롬으로 인쇄 할 때 강제로 페이지를 나누는 방법이 있습니까?
Chrome을 포함한 모든 주요 브라우저에서 다음 접근 방식을 성공적으로 사용했습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
이것은 단순화 된 예입니다. 실제 코드에서 각 페이지 div에는 더 많은 요소가 포함됩니다.
실제로 (Phil Ross에서) 수락 된 것으로 선택된 답변에서 하나의 세부 사항이 누락되었습니다 ....
그것은 합니까 크롬에서 일을하고, 해결책은 정말 바보 !
페이지 구분을 제어하려는 부모와 요소는 모두 다음과 같이 선언되어야합니다.
position: relative
이 바이올린을 확인하십시오 : http://jsfiddle.net/petersphilo/QCvA5/5/show/
다음의 경우에 해당됩니다.
page-break-before
page-break-after
page-break-inside
그러나 Safari에서 페이지 나누기 내부 제어가 작동하지 않습니다 (최소한 5.1.7에서).
이게 도움이 되길 바란다!!!
추신 : 아래의 질문은 최신 버전의 Chrome이 더 이상이를 존중하지 않는다는 사실을 제기했습니다. 장난. 그러나 그들은 다음을 존중하는 것 같습니다.
-webkit-region-break-inside: avoid;
이 바이올린 참조 : http://jsfiddle.net/petersphilo/QCvA5/23/show
그래서 지금 추가해야 할 것 같아요 ...
도움이 되었기를 바랍니다!
Chrome은 플로팅 된 div의 page-break- * css 설정도 무시한다는 점에 유의하고 싶었습니다.
나는 CSS 사양 어딘가에 이것에 대한 타당한 정당성이 있다고 생각하지만 언젠가 누군가에게 도움이 될 것이라고 생각했습니다 ;-)
또 다른 참고 사항 : IE7은 이전 블록 요소에 대한 명시적인 높이없이 페이지 나누기 설정을 인식 할 수 없습니다.
이와 비슷한 문제가 있었지만 결국 해결책을 찾았습니다. 나는 overflow-x : 숨김; <html> 태그에 적용되었으므로 DOM에서 아래에서 무엇을하든 페이지 나누기를 허용하지 않습니다. overflow-x 로 되 돌리면 : visible; 잘 작동했습니다.
바라건대 이것은 누군가를 도울 것입니다.
이 문제를 직접 겪고 있습니다. 내 페이지 나누기는 Chrome을 제외한 모든 브라우저에서 작동하며 테이블 셀 내부에있는 페이지 나누기 이후 요소로 격리 할 수있었습니다. (CMS의 이전, 상속 된 템플릿)
Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Beware of CSS : display:inline-block when printing.
None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block
For example, the following doesn't work :
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
But the following work :
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
I faced this issue on chrome before and the cause for it is that there was a div has min-height set to a value. The solution was to reset min-height while printing as follows:
@media print {
.wizard-content{
min-height: 0;
}
}
2016 update:
Well, I got this problem, when I had
overflow:hidden
on my div.
After I made
@media print {
div {
overflow:initial !important
}
}
everything became just fine and perfect
If you are using Chrome with Bootstrap Css the classes that control the grid layout eg col-xs-12 etc use "float: left" which, as others have pointed out, wrecks the page breaks. Remove these from your page for printing. It worked for me. (On Chrome version = 49.0.2623.87)
Have that issue. So long time pass... Without side-fields of page it's break normal, but when fields appears, page and "page break space" will scale. So, with a normal field, within a document, it was shown incorrect. I fix it with set
width:100%
and use
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Use it on first line.
As far as I know the only way to get the correct page breaks in tables with Google Chrome is giving it to the element <tr> the property display: inline-table (or display: inline-block but it fits better in other cases that are not tables). Also should be used the properties "page-break-after: always; page-break-inside: avoid;" as written by @Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
It was working for me when I used padding like:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
참고URL : https://stackoverflow.com/questions/1630819/google-chrome-printing-page-breaks
'program story' 카테고리의 다른 글
| Active Directory를 통해 LDAP를 사용하여 PHP에서 인증 (0) | 2020.08.16 |
|---|---|
| Linq [duplicate]를 사용하여 시퀀스에 다른 시퀀스의 모든 요소가 포함되어 있는지 확인 (0) | 2020.08.16 |
| 'source'속성을 'org.eclipse.jst.jee.server : JSFTut'로 설정하면 일치하는 속성을 찾지 못했습니다. (0) | 2020.08.16 |
| emacs에서 활성 부 모드를 어떻게 나열합니까? (0) | 2020.08.15 |
| Python List Comprehension을 사용하여 조건에 따라 요소의 인덱스 찾기 (0) | 2020.08.15 |