缩放div和表格，大小为a4

Question

需要在A4尺寸div中缩放（适合）此表格 用jsPDF转换为pdf。可以做javascript或css

如下（在页面中）

代码

body {
  background: rgb(204,204,204); 
}
div[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, div[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

<p>
Test Page</p>
<div size="A4">
<br/>
<table border="1">
<tr>
  <td>tabledata</td>
  <td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td><td>tabledata</td>
  <td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
</tr>
</table>
</div>

请帮帮我......

Answer 1

您可以通过css设置div大小以使其适合A4尺寸纸张CSS：

body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
*{
   box-sizing: border-box;
  -moz-box-sizing: border-box;

.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 237mm;
outline: 2cm #FFEAEA solid;
}

@page {
size: A4;
margin: 0;
}
@media print {
.page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    }
   }

HTML：

 <div class="book">
   <div class="page">
      <div class="subpage">Page 1/2</div>    
   </div>
   <div class="page">
       <div class="subpage">Page 2/2</div>    
   </div>
  </div>

样本：http://jsfiddle.net/2wk6Q/3/

Answer 2

您可以定义单元格大小的length，并使用font-size页面正确匹配表格Jquery。

var width = $(".A4").width() / $("td").length; // width of one cell
var fontSize = 12; 
$("td").each(function(i,e){
  $(this).css({width:width,fontSize:fontSize})
})

body {
  background: rgb(204,204,204); 
}
div[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, div[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Test Page</p>
<div class="A4" size="A4">
<br/>
<table border="1">
<tr>
  <td>tabledata</td>
  <td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td><td>tabledata</td>
  <td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
</tr>
</table>
</div>

<强>更新

为了做到这一点，你可以不可避免地使用：

1. 断言（仅限CSS见下文）
2. 或者计算适合的exaclty的确切字体大小（请参阅第一个代码段）

body {
  background: rgb(204,204,204); 
}

.A4 table {
    table-layout:fixed;
    width: 100%;  
  }
.A4 table td {
    white-space: normal;
    word-wrap: break-word;
}
div[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, div[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Test Page</p>
<div class="A4" size="A4">
<br/>
<table border="1" width="100%">
<tr>
  <td>tableda g  gg g ta</td>
  <td>tabledaghn g g ta</td>
  <td>table tgh g g g data</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tablehn  g  gdat gngha</td><td>tabledata</td><td>tableg g g data</td>
  <td>tabledata</td>
  <td>table g g g  data</td><td>tabledata</td>
  <td>tabledg g  ata</td><td>tablg  gh edata</td>
</tr>
  <tr>
  <td colspan="2">tableda g  gg g ta</td>
  <td>table tgh g g g data</td><td>tabledata</td>
  <td>tabledata</td><td>tabledata</td>
  <td>tablehn  g  gdat gngha</td><td>tabledata</td><td>tableg g g data</td>
  <td>tabledata</td>
  <td>table g g g  data</td><td>tabledata</td>
  <td>tabledg g  ata</td><td>tablg  gh edata</td>
</tr>
</table>
</div>