How to make a HTML Page in A4 paper size page(s)?

前端 未结 15 1961
有刺的猬
有刺的猬 2020-11-22 16:30

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word?

Essentially, I want to be able to show the HTML page in the browser, and out

15条回答
  •  爱一瞬间的悲伤
    2020-11-22 17:36

    Create section with each page, and use the below code to adjust margins, height and width.

    If you are printing A4 size.

    Then user

    Size : 8.27in and 11.69 inches
    
    @page Section1 {
        size: 8.27in 11.69in; 
        margin: .5in .5in .5in .5in; 
        mso-header-margin: .5in; 
        mso-footer-margin: .5in; 
        mso-paper-source: 0;
    }
    
    div.Section1 {
        page: Section1;
    } 
    

    then create a div with all your content in it.

    type your content here...

    or

    @media print {
        .page-break { 
            height: 0; 
            page-break-before: always; 
            margin: 0; 
            border-top: none; 
        }
    }
    
    body, p, a,
    span, td { 
        font-size: 9pt;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    body {
        margin-left: 2em; 
        margin-right: 2em;
    }
    
    .page {
        height: 947px;
        padding-top: 5px;
        page-break-after: always;   
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        border-bottom: 1px solid #000;
    }
    

提交回复
热议问题