2013-12-07 119 views
4

我有以下功能,它很棒。拉伸格到A4尺寸

<script type="text/javascript"> 
function printDiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 

但是,我的div大约是纸张大小的一半。当函数被调用时,是否有办法让我的div伸展到全纸尺寸?

+0

你可以尝试设置'高度:100%' – Grundy

+0

复制的[在打印功能弹力的div](http://stackoverflow.com/questions/20444860/stretch-div-upon-print-function) –

+0

possib le复制[是否可以使用其整个宽度在A4上打印div的内容?](http://stackoverflow.com/questions/7664093/is-it-possible-to-print-the-contents-使用其全宽度) – cubrr

回答

16

您可以通过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> 

DEMO:http://jsfiddle.net/2wk6Q/3/

+1

谢谢完美! – Rubberduck1337106092