How to use Paged.js in Vue.js3?

Question

How to use Paged.js in Vue.js3?

977 Views Asked by May W. At 20 October 2024 at 21:40

index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
        <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
      </body>
    </html>

App.vue

<script setup lang="ts">
   import { Previewer } from 'pagedjs';
</script>
<template>
  <div class="pagedjs_pages">
     Lorem ipsum dolor, sit amet consec.......
     hellllloooooo!!!!!
  </div>
  <!-- hellllloooooo!!! disappeared  -->

css in App.vue

@page {
  size: A4 landscape;
 // tried size: 297mm 210mm;
}

result:

what I expected is an A4 landscape page, but it seems like, the "page" is landscape, which is correct, but the content is like vertical A4, and not showing my full content, cut the rest content at bottom, which part did I miss?

Original Q&A

There are 1 best solutions below

**May W.** · Answer 1

I found another reference, for anyone who needs it.

// App.vue

<script lang="ts">
  import { onMounted } from 'vue';
  
  onMounted(()=>{
    let paged = new Previewer();
  
    let flow = paged.preview().then((flow) => {
      console.log("Rendered", flow.total, "pages.");
    })
  });
</script>

<template ref="template">
  <div>hello</div>
</template>

<style lang="scss">
  @import 'pagedjs.scss';
</style>

// pagedjs.scss

@page {
  size: A4 landscape !important;

  @top-left {
    content: "should be shown on the top-left";
    font-size: 15px;
    color: #979797;
    text-align: left;
  }
}
// styling....

How to use Paged.js in Vue.js3?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in VUE.JS

Related Questions in PAGEDJS

Trending Questions

Popular # Hahtags

Popular Questions