<template>
  <div>
    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 3</h1>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 4</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 5!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 6</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 7</h1>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 8</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 9</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>

    <div class="pdf-export-block">
      <div class="example-one-styling">
        <h1>Hello, World 10!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum arcu nulla, porttitor et turpis non, malesuada egestas enim. Quisque congue fermentum viverra. Proin auctor nulla ipsum, quis congue ligula interdum at. Donec turpis mauris, laoreet et varius in, tempus at urna. Vivamus aliquet laoreet ex sed tempor. Mauris tristique eget ipsum et elementum. Integer mollis purus eros, sed fermentum lorem commodo vitae. Etiam sit amet vehicula arcu, non tempus tortor. Cras dignissim nibh sed venenatis laoreet. Aenean at quam sed nunc porttitor tristique condimentum nec risus. Phasellus vel velit est.</p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'PdfExportExample',
  };
</script>

<style lang="scss" scoped>
  .pdf-export-block {
    width: 100%;
  }

  .example-one-styling {
    width: calc(100% - 80px);
    box-sizing: border-box;
    background: #eee;
    padding: 20px;

    p {
      font-size: 12px;
    }
  }
</style>
