Vue 3's Paged.js does not respond to requests for page breaks

Question

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage for alignment adjustments, the execution of the page break feature remains elusive. Below are all the methods I've tried so far, without any external CSS imports except for the Vue-Showdown plugin that converts markdown to HTML.

Unfortunately, none of the attempted page break solutions showcased below have yielded positive results, leaving me perplexed as to why they are not functioning correctly.

*Please note that this functionality works perfectly fine if directly invoking a print function without involving PagedJS.

The specific requirement necessitates leveraging PagedJS to generate paginated content for updating a Table of Contents (TOC) with corresponding page numbers, which will be subsequently printed.

I have exhausted numerous attempts to troubleshoot the issue but to no avail, resulting in considerable frustration over the lack of success.

I have experimented with different styles and approaches to facilitate page breaks; however, the content does not seem to segment accordingly based on the provided specifications.

html css vue.js pagedjs

Answer 1

Answer №1

Utilizing Vue.js Variables within the DOM

If you're using Vue.js, you have the ability to display variable values enclosed within {{ and }} symbols. Additionally, if you wish to display HTML code alongside, make use of the v-html attribute.

Text Interpolation - {{ variable }} - Excerpt from Vue.js Documentation
Raw HTML - v-html="..." - Insights from Vue.js Docs

You can also designate an existing DOM element as a reactive variable. By referring to my demonstration, observe how the copyableElement variable operates, allowing the transfer of content from the first div to the fourth one.

Template ref="..." - Furnished by Vue.js

const { createApp, ref, reactive } = Vue;

const app = createApp({
  setup() {
    const titleContent = ref('My Title Content <br>and <strong>can\'t use</strong> HTML elements between {{ and }}');
    const restOfContent = reactive({
      innerHTML: `<strong>My</strong><br>HTML Content`
    });
    
    const copyableElement = ref(null);

    return {
      titleContent,
      restOfContent,
      copyableElement,
    };
  }
}).mount('#app');

div {
  margin: 10px 0;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a8999bccfd2cfd2c8">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div ref="copyableElement">Example Text What Can Copy<br>To Another Element</div>

  <div class="title-page">titleContent text: {{ titleContent }}</div>
  <div class="content-page" v-html="restOfContent.innerHTML"></div>
  <div class="content-page" v-html="copyableElement?.innerHTML ?? ''"></div>
</div>

Guidance on Applying Paged.js

The .pagedjs_pages represents the CSS class for styling the complete document. Within this structure, you have access to the .pagedjs_page class for individual page styling. To incorporate custom CSS stylings to content within these pages, consider adding your designated class such as .myPage to the relevant divs up for pagination.

Upon assigning the .myPage class as per necessity, Paged.js automatically identifies it and allocates the corresponding .pagedjs_page classes.

Page Breaks - Elucidated in Paged.js Documentation
break-before: auto/page; - Detailed on MDN Docs
break-after: auto/page; - Outlined in MDN Docs
break-inside: auto/page; - Explained in MDN Docs

⚠️ Cautious Reminder
`page-break-before`, `page-break-after`, `page-break-inside` tend to be outdated

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const pages = ref([]);

    // Generating content for pages
    function generateContent() {
      // Demonstrative simulated content
      const content = [
        "<h1>Page 1</h1><p>This is content for page 1.</p>",
        "<h1>Page 2</h1><p>This is content for page 2.</p>",
        "<h1>Page 3</h1><p>This is content for page 3.</p>"
      ];
      pages.value = content;
    }
    generateContent();

    return {
      pages,
    };
  }
});

app.mount('#app');

@page {
  size: A5;
  margin: 20mm;
  @bottom-right-corner {
    vertical-align: center;
    text-align: center;
    background: #fafafa;
    color: purple;
    content: "P. " counter(page);
  }
}

.pagedjs_page {
  border: 1px solid black;
  background-color: white;
}

.myPage {
  break-after: page;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9a9989acdfc2dfc2d8">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div id="app">
  <div class="myPage" v-for="(pageContent, index) in pages" :key="index">
    <div v-html="pageContent"></div>
  </div>
</div>

Illustration Featuring Entirely HTML DOM

const { createApp, ref, reactive } = Vue;

const app = createApp({
  setup() {
    const content = ref('');
    
    const titleContent = ref('My Title Content');
    const restOfContent = reactive({
      innerHTML: `<strong>My</strong><br>HTML Content`
    });

    // Generating content
    function generateContent() {
      // Simulated content showcased for explanation
      content.value = `<html>
        <head>
          <title>Print Markdown</title>
          <style>
            /* shifted to component's style */
          </style>
        </head>
        <body>
          <div class="title-page">${titleContent.value}</div>
          <div class="content-page">${restOfContent.innerHTML}</div>
          <div class="footer"></div>
        </body>
        </html>
      `;
    }
    generateContent();

    return {
      content,
    };
  }
});

app.mount('#app');

/* refined layout */

.pagedjs_page {
  border: 1px solid black;
  background-color: white;
}

/* original settings */

@page {
  size: A5; /* revised from A4 */
  margin: 20mm;
  @bottom-right-corner {
    vertical-align: center;
    text-align: center;
    background: #fafafa;
    color: purple;
    content: "P. " counter(page);
  }
}

h1 {
  break-before: page;
  page-break-before: always;
}

.pagedjs_page {
  break-before: page;
  page-break-before: always;
}

@media print {
  h1, h2 {
    break-before: page;
    page-break-before: always;
  }
  .page-break {
    break-before: page;
    page-break-before: always;
  }
}

@media screen {
  h1, h2 {
    break-before: page;
    page-break-before: always;

  }
  .page-break {
    break-before: page;
    page-break-before: always;
  }
}

table, figure {
  page-break-inside: avoid; /* Preventing breaks across pages for these elements */
} 

.title-page {
  break-after: always;
  page-break-before: always;
  text-align: center;
  padding-top: 60mm;
}

.page-break {
  break-before: page;
  page-break-before: always;
}

.content-page {
  padding: 15mm 20mm;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10mm auto;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1563607055263b263b21">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div id="app">
  <div v-html="content"></div>
</div>

Answer 2

Utilizing Vue.js Variables within the DOM

If you're using Vue.js, you have the ability to display variable values enclosed within {{ and }} symbols. Additionally, if you wish to display HTML code alongside, make use of the v-html attribute.

Text Interpolation - {{ variable }} - Excerpt from Vue.js Documentation
Raw HTML - v-html="..." - Insights from Vue.js Docs

You can also designate an existing DOM element as a reactive variable. By referring to my demonstration, observe how the copyableElement variable operates, allowing the transfer of content from the first div to the fourth one.

Template ref="..." - Furnished by Vue.js

const { createApp, ref, reactive } = Vue;

const app = createApp({
  setup() {
    const titleContent = ref('My Title Content <br>and <strong>can\'t use</strong> HTML elements between {{ and }}');
    const restOfContent = reactive({
      innerHTML: `<strong>My</strong><br>HTML Content`
    });
    
    const copyableElement = ref(null);

    return {
      titleContent,
      restOfContent,
      copyableElement,
    };
  }
}).mount('#app');

div {
  margin: 10px 0;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a8999bccfd2cfd2c8">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div ref="copyableElement">Example Text What Can Copy<br>To Another Element</div>

  <div class="title-page">titleContent text: {{ titleContent }}</div>
  <div class="content-page" v-html="restOfContent.innerHTML"></div>
  <div class="content-page" v-html="copyableElement?.innerHTML ?? ''"></div>
</div>

Guidance on Applying Paged.js

The .pagedjs_pages represents the CSS class for styling the complete document. Within this structure, you have access to the .pagedjs_page class for individual page styling. To incorporate custom CSS stylings to content within these pages, consider adding your designated class such as .myPage to the relevant divs up for pagination.

Upon assigning the .myPage class as per necessity, Paged.js automatically identifies it and allocates the corresponding .pagedjs_page classes.

Page Breaks - Elucidated in Paged.js Documentation
break-before: auto/page; - Detailed on MDN Docs
break-after: auto/page; - Outlined in MDN Docs
break-inside: auto/page; - Explained in MDN Docs

⚠️ Cautious Reminder
`page-break-before`, `page-break-after`, `page-break-inside` tend to be outdated

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const pages = ref([]);

    // Generating content for pages
    function generateContent() {
      // Demonstrative simulated content
      const content = [
        "<h1>Page 1</h1><p>This is content for page 1.</p>",
        "<h1>Page 2</h1><p>This is content for page 2.</p>",
        "<h1>Page 3</h1><p>This is content for page 3.</p>"
      ];
      pages.value = content;
    }
    generateContent();

    return {
      pages,
    };
  }
});

app.mount('#app');

@page {
  size: A5;
  margin: 20mm;
  @bottom-right-corner {
    vertical-align: center;
    text-align: center;
    background: #fafafa;
    color: purple;
    content: "P. " counter(page);
  }
}

.pagedjs_page {
  border: 1px solid black;
  background-color: white;
}

.myPage {
  break-after: page;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9a9989acdfc2dfc2d8">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div id="app">
  <div class="myPage" v-for="(pageContent, index) in pages" :key="index">
    <div v-html="pageContent"></div>
  </div>
</div>

Illustration Featuring Entirely HTML DOM

const { createApp, ref, reactive } = Vue;

const app = createApp({
  setup() {
    const content = ref('');
    
    const titleContent = ref('My Title Content');
    const restOfContent = reactive({
      innerHTML: `<strong>My</strong><br>HTML Content`
    });

    // Generating content
    function generateContent() {
      // Simulated content showcased for explanation
      content.value = `<html>
        <head>
          <title>Print Markdown</title>
          <style>
            /* shifted to component's style */
          </style>
        </head>
        <body>
          <div class="title-page">${titleContent.value}</div>
          <div class="content-page">${restOfContent.innerHTML}</div>
          <div class="footer"></div>
        </body>
        </html>
      `;
    }
    generateContent();

    return {
      content,
    };
  }
});

app.mount('#app');

/* refined layout */

.pagedjs_page {
  border: 1px solid black;
  background-color: white;
}

/* original settings */

@page {
  size: A5; /* revised from A4 */
  margin: 20mm;
  @bottom-right-corner {
    vertical-align: center;
    text-align: center;
    background: #fafafa;
    color: purple;
    content: "P. " counter(page);
  }
}

h1 {
  break-before: page;
  page-break-before: always;
}

.pagedjs_page {
  break-before: page;
  page-break-before: always;
}

@media print {
  h1, h2 {
    break-before: page;
    page-break-before: always;
  }
  .page-break {
    break-before: page;
    page-break-before: always;
  }
}

@media screen {
  h1, h2 {
    break-before: page;
    page-break-before: always;

  }
  .page-break {
    break-before: page;
    page-break-before: always;
  }
}

table, figure {
  page-break-inside: avoid; /* Preventing breaks across pages for these elements */
} 

.title-page {
  break-after: always;
  page-break-before: always;
  text-align: center;
  padding-top: 60mm;
}

.page-break {
  break-before: page;
  page-break-before: always;
}

.content-page {
  padding: 15mm 20mm;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10mm auto;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1563607055263b263b21">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div id="app">
  <div v-html="content"></div>
</div>

Vue 3's Paged.js does not respond to requests for page breaks

Answer №1

Utilizing Vue.js Variables within the DOM

Guidance on Applying Paged.js

Illustration Featuring Entirely HTML DOM

Similar questions

Unable to retrieve the store's vuex state

Error: Unable to locate the module: Vue-Picture-BD-Marker

Place a div at the bottom of a flexbox while adding some padding around it

The readyState of Ajax is consistently anything but 4

Troubleshooting Autocomplete User Interface Problems

Deleting a tag from a Flask document

Superior method to ensure the child element's border overlaps with that of the parent

Link the Sass variable to Vue props

The background image is failing to display, although other styles for the class or element are visible

When is the best time to utilize v-layout within Vuetify 3?

What is the best way to prompt users to submit comments with a popup textarea box?

Show spinner until the web page finishes loading completely

Require an additional button to dynamically load more content and shift all existing elements further down the page

How does Vue.js guarantee that the DOM rendering is finished after a data change when using nextTick?

Vue randomly sets the prototype of props in its definition

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

The jQuery pop-up fails to activate on the initial click

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Experimenting with Vue.js filters and QA testing techniques

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript