guidelines for splitting content into A4 size pages automatically using Vue

Question

guidelines for splitting content into A4 size pages automatically using Vue

Hey there, I'm dealing with the issue of overflowing content not fitting on the next A4 page.

My situation:

I'll begin with a single A4 page
When the content from the previous A4 page overflows, I want the remaining content to move to the next A4 page - i.e., page 2
This process must continue until reaching the Nth page

Below is a working jquery code, but I'm looking to implement it in Vue. You can find the existing solution here: https://jsfiddle.net/tk8rwnav/31/

Question: How do I apply the same solution in vue as demonstrated above with jquery?

const app = new Vue({
    el:'#app',
    data(){
      return {
        content: `<div class="A4">
  <h1>
    Title
  </h1>
  ...
   // The rest of the HTML content goes here
  ...
</div>`
      }
    }
})

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  ...
  // Additional CSS styles for A4 page layout
  ...
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>



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

javascript html jquery css vue.js

Answer 1

Answer №1

One potential method to replicate the process when using v-html to display content in a template is to utilize a snip function within the mounted lifecycle hook of Vue.js to manipulate the DOM through JavaScript.

const app = new Vue({
    el:'#app',
    data(){
      return {
        max_pages: 100,
        page_count: 0,
        content: `<div class="A4">
  <h1>
    Title
  </h1>
  ...
</p>
  <p>9 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ...
    facilisis luctus, metus</p>
  <h1>
    Lorum lorum lorum
  </h1>
  ...
</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...metus</p>
  ...
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac ...ac dui. Donec non enim in turpis pulvinar facilisis. Ut felisl&amp;luctus, metus</p>
</div>
`
      }
    },
    mounted() {
      this.$nextTick(() => {
        const pages = document.querySelectorAll('.A4');
        pages.forEach(page => {
          this.snipMe(page);
        });
      });
    },
      methods: {
        snipMe : function(page) {
          this.page_count++;
          if (this.page_count > this.max_pages) {
            return;
          }
          var long = page.scrollHeight - Math.ceil(page.clientHeight);
          var children = [...page.children];
          
          var removed = [];
          while (long > 0 && children.length > 0) {
            var child = children.pop();
            child.parentNode.removeChild(child);
            removed.unshift(child);
            long = page.scrollHeight - Math.ceil(page.clientHeight);
          }
          if (removed.length > 0) {
            var a4 = document.createElement('div');
            a4.classList.add('A4');
            removed.forEach(oneRemoved => {
              a4.appendChild(oneRemoved);
            });
            page.parentNode.appendChild(a4);
            this.snipMe(a4);
          }
        } 
    }
})

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  ...
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

Answer 2

One potential method to replicate the process when using v-html to display content in a template is to utilize a snip function within the mounted lifecycle hook of Vue.js to manipulate the DOM through JavaScript.

const app = new Vue({
    el:'#app',
    data(){
      return {
        max_pages: 100,
        page_count: 0,
        content: `<div class="A4">
  <h1>
    Title
  </h1>
  ...
</p>
  <p>9 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ...
    facilisis luctus, metus</p>
  <h1>
    Lorum lorum lorum
  </h1>
  ...
</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...metus</p>
  ...
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac ...ac dui. Donec non enim in turpis pulvinar facilisis. Ut felisl&amp;luctus, metus</p>
</div>
`
      }
    },
    mounted() {
      this.$nextTick(() => {
        const pages = document.querySelectorAll('.A4');
        pages.forEach(page => {
          this.snipMe(page);
        });
      });
    },
      methods: {
        snipMe : function(page) {
          this.page_count++;
          if (this.page_count > this.max_pages) {
            return;
          }
          var long = page.scrollHeight - Math.ceil(page.clientHeight);
          var children = [...page.children];
          
          var removed = [];
          while (long > 0 && children.length > 0) {
            var child = children.pop();
            child.parentNode.removeChild(child);
            removed.unshift(child);
            long = page.scrollHeight - Math.ceil(page.clientHeight);
          }
          if (removed.length > 0) {
            var a4 = document.createElement('div');
            a4.classList.add('A4');
            removed.forEach(oneRemoved => {
              a4.appendChild(oneRemoved);
            });
            page.parentNode.appendChild(a4);
            this.snipMe(a4);
          }
        } 
    }
})

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  ...
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

guidelines for splitting content into A4 size pages automatically using Vue

Answer №1

Similar questions

Unexpected issues arose with the seemingly straightforward Angular/Node application

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

Collaborating on code across AngularJS and Nodejs

One-of-a-kind div elimination - using dynamically created divs via a jQuery event

What is the best way to display a fresh jade view when a socket event occurs?

The div element is just a tad smaller in size (0.085 smaller as per the CSS calculation)

Show information of selected item on click using jQuery

New to Angular: Struggling with complex form validation?

How to Handle JSON Parsing with JavaScript for Big Numbers

The reference to a $scope array in AngularJS has not been properly updated

Triggering geolocation control prior to being integrated into a map on react-map-gl

What is the best method for assigning a default value to the file input tag in HTML?

Develop a custom dropdown menu using JavaScript

The keyup event fails to trigger for the search input in datatables when ajax is being used

I'm encountering a typescript error as I migrate a Paho MQTT function from Angular 1 to Angular 2 - what could be causing this issue?

The mark-compacts were unsuccessful due to reaching the heap limit, resulting in an allocation failure - the JavaScript heap ran out of memory during deployment

Loading a chunked polyfill file in webpack only when needed - a step-by-step guide

Encountered an issue trying to access undefined properties while reading 'userId' in Vue

Best practices for including jQuery in ASP.NET (or any other external JavaScript libraries)

What is the typical output value that fluctuates?