Some special properties set by css3 for page printing, such as @page, target-counter, etc.

In response to business needs within the company, it is necessary to generate pdf from html and print it. Both the front and back end have their own methods. Here, a comprehensive comparison chooses to use java to generate it, which avoids many problems caused by the front-end generation. The framework used in the background is iTextPdf but is
doing At the same time, I found that there is a gap between the pdf generated by iText and the pdf generated by the company's business needs. The problems encountered here are the generated catalog, the catalog page number, and clicking the catalog hyperlink to the corresponding content page. There are three problems that need to be
solved

1. Generate directory

Here is generated by java loop, there is nothing to record here

2. Catalog page number

The problem encountered by java students here is that they can’t generate the directory. Maybe the background plug-in is not in place or there is a problem with the writing. Not much to say, there are a few
key points to know about css
@page, counter(page), target- counter

2.1 @PAGE rules
The @page rules allow you to specify many aspects of the page box. For example, you want to specify the page size. The following rule specifies that the default page size is 5.5*8.5 feet

@page {
    
    
  size: 5.5in 8.5in;
}

Instead of declaring sizes with length values, you can also use paper size keywords such as "A4" or "legal".

@page {
    
    
  size: A4;
}

You can also use keywords to specify page orientation - "portrait" or "landscape".

@page {
    
    
  size: A4 landscape;
}

2.2 Page Module
insert image description here
2.2.1 Page Left and Right Margins
Another aspect of the Pages module is that it defines pseudo-class selectors to select even or odd pages of a document.

@page :left {
    
    
  margin-left: 3cm;
}
@page :right {
    
    
  margin-left: 4cm;
}

The rule also defines two pseudo-class selectors. The :first selector selects the first page of the document.

@page :first {
    
    }

The :blank pseudo-selector selects any page that is "intentionally left blank". To add such text, we can use generated content that targets the top center of the margin box.

@page :blank {
    
    
  @top-center {
    
     content: "This page is intentionally left blank." }
}

Generate content and page media

@page:right{
    
     
    @bottom-left {
    
    
      margin: 10pt 0 30pt 0;
      border-top: .25pt solid #666;
      content: "My book";
      font-size: 9pt;
      color: #333;
    }
}

2.2.1 Page break
To force the title to always be at the beginning of the page, set page-break-before to always.

h1 {
    
    
  page-break-before: always;
}

To avoid page breaks immediately after the title, use page-break-after.

h1, h2, h3, h4, h5 {
    
    
  page-break-after: avoid;
}

To avoid breaking images and tables, use the page-break-inside property

table, figure {
    
    
  page-break-inside: avoid;
}

2.2.3 Counter

@page:right{
    
    
  @bottom-right {
    
    
    content: counter(page);
  }
}
@page:left{
    
    
  @bottom-left {
    
    
    content: counter(page);
 }
}

We also created a counter called pages. The value of this counter is always the total number of pages in the document

@page:left{
    
    
  @bottom-left {
    
    
    content: "Page " counter(page) " of " counter(pages);
  }
}

You can create your own named counters and increments and reset them as needed

body {
    
    
  counter-reset: chapternum;
}
h1.chapter:before {
    
    
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}

The usual way to count figures is to use chapternum.figurenum. So "Figure 3-2" represents the second figure in Chapter 3. In h1, we can reset the figurenum so that each chapter starts from 1.

body {
    
    
  counter-reset: chapternum figurenum;
}
h1 {
    
    
  counter-reset: figurenum;
}
h1.title:before {
    
    
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}
figcaption:before {
    
    
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";
}

2.2.4 Setting characters
We do this using the string-set attribute in the selector we want to get the content from, this will be h1. The value of string-set is the name you want to give this content and then use content(). You can then use string() as the generated content output.

h1 {
    
     
  string-set: doctitle content(); 
}
@page :right {
    
    
  @top-right {
    
    
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 8pt;
  }
}

When your page media is generated, whenever an h1 appears, the content is written to the doctitle and then output to the top right margin box on the right page, only changing when another h1 appears.

2.2.5 target-counter
target-counter, add these numbers. When creating links in the document, give them href as the ID of the element in the document that you want to tag. Also, add a class to identify that they are cross-references, not an external link; I use xref

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>
a.xref:after {
    
    
  content: " (page " target-counter(attr(href, url), page) ")";
}

3. Self-test printing

You can install price: https://www.princexml.com/doc/installing/#installing-a-license-file-on-windows
After the installation is complete, you can go to price to execute exe, prince xxx.html

Reference link: https://blog.csdn.net/weixin_33851604/article/details/93645760

Guess you like

Origin blog.csdn.net/u013994400/article/details/127898477