Paper

Generate content suitable for printing.

Example

The Paper component provides auxiliary styles for creating content for printing.

Please specify the page size and page break positions.

vue
<template>
 <Paper
  size="A4"
  page-break="before"
 >
  <h2>Content</h2>
  <b-table>
   <b-thead>
    <b-tr>
     <b-th scope="col">
      #
     </b-th>
     <b-th scope="col">
      First
     </b-th>
     <b-th scope="col">
      Last
     </b-th>
     <b-th scope="col">
      Handle
     </b-th>
    </b-tr>
   </b-thead>
   <b-tbody>
    <b-tr>
     <b-th scope="row">
      1
     </b-th>
     <b-td>Mark</b-td>
     <b-td>Otto</b-td>
     <b-td>@mdo</b-td>
    </b-tr>
    <b-tr>
     <b-th scope="row">
      2
     </b-th>
     <b-td>Jacob</b-td>
     <b-td>Thornton</b-td>
     <b-td>@fat</b-td>
    </b-tr>
    <b-tr>
     <b-th scope="row">
      3
     </b-th>
     <b-td colspan="2">
      Larry the Bird
     </b-td>
     <b-td>@twitter</b-td>
    </b-tr>
   </b-tbody>
  </b-table>
 </Paper>
 <Paper
  size="A4"
  page-break="before"
 >
  <h2>Content</h2>
  <b-table>
   <b-thead>
    <b-tr>
     <b-th scope="col">
      #
     </b-th>
     <b-th scope="col">
      First
     </b-th>
     <b-th scope="col">
      Last
     </b-th>
     <b-th scope="col">
      Handle
     </b-th>
    </b-tr>
   </b-thead>
   <b-tbody>
    <b-tr>
     <b-th scope="row">
      1
     </b-th>
     <b-td>Mark</b-td>
     <b-td>Otto</b-td>
     <b-td>@mdo</b-td>
    </b-tr>
    <b-tr>
     <b-th scope="row">
      2
     </b-th>
     <b-td>Jacob</b-td>
     <b-td>Thornton</b-td>
     <b-td>@fat</b-td>
    </b-tr>
    <b-tr>
     <b-th scope="row">
      3
     </b-th>
     <b-td colspan="2">
      Larry the Bird
     </b-td>
     <b-td>@twitter</b-td>
    </b-tr>
   </b-tbody>
  </b-table>
  <p>
   <Anchor
    link="primary"
    link-offset="2"
    link-underline="25 100-hover"
    to="https://www.google.com/"
    external
   >
    Primary link
   </Anchor>
  </p>
  <p>
   <Anchor
    link="secondary"
    link-offset="2"
    link-underline="25 100-hover"
    to="https://www.google.com/maps/"
    external
   >
    Secondary link
   </Anchor>
  </p>
  <p>
   <Anchor
    link="success"
    link-offset="2"
    link-underline="25 100-hover"
    to="/"
   >
    Success link
   </Anchor>
  </p>
  <p>
   <Anchor
    link="danger"
    link-offset="2"
    link-underline="25 100-hover"
    to="/"
   >
    Danger link
   </Anchor>
  </p>
  <p>
   <Anchor
    link="warning"
    link-offset="2"
    link-underline="25 100-hover"
    to="/"
   >
    Warning link
   </Anchor>
  </p>
  <p>
   <Anchor
    link="info"
    link-offset="2"
    link-underline="25 100-hover"
    to="/"
   >
    Info link
   </Anchor>
  </p>
 </Paper>
</template>

Content

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter

Content

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter

Primary link

Secondary link

Success link

Danger link

Warning link

Info link