A4页面，例如html中的布局 [英] A4 page like layout in html

问题描述

我正在开发基于小型Web的应用程序，其中向用户显示2-3页长的报告，该报告可以打印为PDF。我在

打印预览看起来像

此处是CSS

  .A4 {
背景：白色； 
宽度：21厘米； 
身高：29.7厘米； 
显示：块； 
保证金：0自动； 
 padding：10px 25px; 
底边距：0.5厘米； 
盒子阴影：0 0 0.5cm rgba（0,0,0,0.5）; 
} 
 
 @media print {
 .page-break {display：block; page-break-before：始终； } 
大小：A4肖像； 
} 
 
 @media print {
 .noprint {display：none;} 
 .enable-print {display：block; } 
} 
  

我正在尝试解决以下问题，

1. 如果所有报告都以类似布局的页面显示（此外，如果我可以以水平分页显示页面，而不是较长的垂直页面），我将非常感激


2. 在打印时没有填充问题，您看到的内容已打印！

解决方案

第二个问题：

您必须将主体边距和填充设为零。您还需要从A4类中删除框阴影，边距，宽度和高度，以便打印多页。

  .A4 {
背景：白色； 
宽度：21厘米； 
身高：29.7厘米； 
显示：块； 
保证金：0自动； 
 padding：10px 25px; 
底边距：0.5厘米； 
盒子阴影：0 0 0.5cm rgba（0，0，0，0.5）; 
overflow-y：滚动； 
 box-sizing：边框框； 
} 
 
 @ media print {
 .page-break {
 display：block; 
 page-break-before：始终； 
} 
 
尺寸：A4肖像； 
} 
 
 @ media print {
 body {
 margin：0; 
填充：0； 
} 
 
 .A4 {
 box-shadow：无； 
保证金：0; 
宽度：自动； 
高度：自动； 
} 
 
 .noprint {
 display：none; 
} 
 
 .enable-print {
 display：block; 
} 
} 
  

您的第一个问题：

您可以尝试通过计算滚动高度来创建分页功能，并不断从页面中删除元素，直到scollheight小于页面本身为止。

示例： https://jsfiddle.net/tk8rwnav/31/

  var max_pages = 100; 
 var page_count = 0; 
 
函数snipMe（）{
 page_count ++; 
 if（page_count> max_pages）{
 return; 
} 
 var long = $（this）[0] .scrollHeight-Math.ceil（$（this）.innerHeight（））; 
 var children = $（this）.children（）。toArray（）; 
 var remove = []; 
 while（long> 0&&children; length> 0）{
 var child = children.pop（）; 
 $（child）.detach（）; 
 remove.unshift（child）; 
 long = $（this）[0] .scrollHeight-Math.ceil（$（this）.innerHeight（））; 
} 
 if（removed.length> 0）{
 var a4 = $（’< div class = A4>< / div>’）; 
 a4.append（已删除）; 
 $（this）.after（a4）; 
 snipMe.call（a4 [0]）; 
} 
} 
 
 $（document）.ready（function（）{
 $（'。A4'）。each（function（）{
 snipMe.call（this）; 
}）; 
}）; 
  

此示例在每个元素上都中断。段落没有断句，但是您可以实现，但这会变得非常复杂。

I am working on small web based application where user is presented 2-3 page long report which can be printed as PDF. I looked at different solutions on stackoverflow / internet and found somewhat working solution to printing side (contents are printed with extra margins but i need to work on that to fix it) my current problem is i am not able to display html content in browser with page like layout. I am able to show 1st page with A4 size but as soon as content goes beyond 1 page it appears as if it printed outside page, you can check the images below

1. How page is shown in Browser

2. How it's print preview look like

Here is the CSS

.A4 {
   background: white;
   width: 21cm;
   height: 29.7cm;
   display: block;
   margin: 0 auto;
   padding: 10px 25px;
   margin-bottom: 0.5cm;
   box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

@media print {
.page-break { display: block; page-break-before: always; }
size: A4 portrait;
} 

@media print {
 .noprint {display:none;}
 .enable-print { display: block; }
}

I am trying to solve below problems,

1. Would love if all the report is shown with page like layout (additionally, if i can show pages in horizontal pagination instead of long vertical page)
2. No padding issues while printing, what you see is printed!

解决方案

Your 2nd problem:

You have to set the body margin and padding to zero. You also need to remove box shadow, margin, width and height from the A4 class in order to print multiple pages.

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

  size: A4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }

  .noprint {
    display: none;
  }

  .enable-print {
    display: block;
  }
}

Your first problem:

You could try to create a pagination feature by calculating the scrollheight, and keep removing elements from the pages untill the scollheight is smaller than the page itself.

Example: https://jsfiddle.net/tk8rwnav/31/

var max_pages = 100;
var page_count = 0;

function snipMe() {
  page_count++;
  if (page_count > max_pages) {
    return;
  }
  var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  var children = $(this).children().toArray();
  var removed = [];
  while (long > 0 && children.length > 0) {
    var child = children.pop();
    $(child).detach();
    removed.unshift(child);
    long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  }
  if (removed.length > 0) {
    var a4 = $('<div class="A4"></div>');
    a4.append(removed);
    $(this).after(a4);
    snipMe.call(a4[0]);
  }
}

$(document).ready(function() {
  $('.A4').each(function() {
    snipMe.call(this);
  });
});

This example breaks on every element. The paragraphs don't break on words, but you can implement this, but that will get complicated very fast.

这篇关于A4页面，例如html中的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！