Question

我正在制作一个混合了A4横向和纵向页面的网站，如下图所示：

当我尝试打印时，它不能正常工作。因此，我添加了CSS将纵向页面旋转90度：

.page {
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;
      border: 5px #ccc solid;
      height: 296mm;
      width: 210mm;   
      outline: 2cm whitesmoke solid;

      background: white;
      margin: 1mm auto;
      position: relative;

 } 


.landscape {
      position: relative;
      width: 296mm;
      height: 210mm;
      margin: 1mm auto;
      margin-top : 180px;
      margin-bottom : 180px;
      background: white;

      outline: 2cm whitesmoke solid;
      border: 5px #ccc solid;           
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;     
}



@media print {
.rotate_print{
    transform: rotate(90deg);
}    

    .page {
        page-break-before: always;        
        margin : 0mm;            
        padding : 1cm;        
        outline: 0;
        border: 0px;        
    }

    .landscape {
        page-break-before: always;    
        margin : 0mm;   
        padding : 1cm; 
        outline: 0;
        border: 0px;        
    }

    .no-print {
        display: none;
    }
 }

页面已旋转，但在旋转后的页面和普通页面之间创建了一些较大的空间：

并且无法正确打印，旋转的页面仍然存在如下图所示的问题。如何正确使用旋转变换来打印网页？

我尝试将位置更改为相对位置，并尝试将页面移近，但问题仍然存在。我还尝试将打印机设置更改为0边距。在Safari和Chrome上进行过尝试。

Answer 1

称为page-break-inside和break-inside的属性可用于阻止页面拆分

SELECT  b.brc_id AS 'Branch ID',
        s.stf_first_name AS 'Manager First Name',
        s.stf_last_name AS 'Manager Last Name',
        (SELECT COUNT (sa.stf_position)
         FROM STAFF_T sa, BRANCH_T ba
         WHERE (sa.stf_position = 'Supervisor')
         GROUP BY ba.brc_id, sa.stf_first_name, sa.stf_last_name) AS  
'Number of Supervisor',
        (SELECT COUNT (sb.stf_position)
         FROM STAFF_T sb, BRANCH_T bb
         WHERE (sb.stf_position = 'Staff') AND (sb.stf_gender = 'Male')
         GROUP BY bb.brc_id, sb.stf_first_name, sb.stf_last_name) AS 'Male 
  Staff',
        (SELECT COUNT (sc.stf_position)
         FROM STAFF_T sc, BRANCH_T bc
         WHERE (sc.stf_position = 'Staff') AND (sc.stf_gender = 'Female')
         GROUP BY bc.brc_id, sc.stf_first_name, sc.stf_last_name) AS 
 'Female Staff'
 FROM 
     BRANCH_T b, STAFF_T s
 WHERE 
     (b.brc_id = s.stf_brc_id) AND (b.brc_manager = s.stf_id)
 GROUP BY 
     b.brc_id, s.stf_first_name, s.stf_last_name

Answer 2

Landscape printing from HTML

Dennis的解决方案适用于Chrome和Safari上的横向和纵向页面混合。

旋转（90deg）不适合打印

2 个答案: