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

Vue application experiencing an issue with data not being populated

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

Move the footer down to the bottom of the page

Is it possible to place a secondary read more button next to the first one using CSS?

What is the best way to make a JavaScript cookie remember the state of a DIV?

What is the best way to modify the input value in a Vue component when it is initially set, and then update it if it becomes an array

The Element should take up the entire page with the exception of a 20px margin

What is the best way to delete previously entered characters in the "confirm password" field after editing the password

What is the best way to synchronize the image dimensions and source when dynamically loading images?

Ways to resolve the form submission issue on ASP.NET Core 3.1 with jQuery integration

What is the method for altering the text color within a disabled input field?

The mouseover animation doesn't reset to its original position during quick movements, but instead continues to move without interruption

Guide on serving static HTML files using vanilla JavaScript and incorporating submodules

Choose an element on a webpage by leveraging the power of Selenium

Issue with AngularJS in Internet Explorer 7: "querySelector" property or method not supported by object

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Ensure that the child div remains at the bottom of the parent div

Issue with closing collapsed menu on click in Bootstrap version 3

IFrame transparency setting not recognized

What are the best practices for utilizing bootstrap-vue's panel component effectively?