What is the best way to display all the selected details in a table format?

Question

What is the best way to display all the selected details in a table format?

I am currently using PDFMake to create detailed profiles for each person I select in my table.

Check out the sample below:

https://i.sstatic.net/eFLDs.png

For every selection I make, I need to produce a separate document with their information in a PDF using PDFMake, along with their QR Code. I have successfully printed this in my console:

https://i.sstatic.net/WcHKA.png

Here is the code snippet for that:

var docDefinition;
  for (var vin = 0; vin < this.selected.length; vin++) {
    var nestedArr = new Array(this.selected);

    var s = nestedArr[0][vin].LAST_M + "\n" + nestedArr[0][vin].MEMB_N;
    console.log(s);

    docDefinition = {
      pageSize: "A6",
      pageMargins: [0, 0, 0, 0],
      content: { text: s }
    };
  }

  pdfMake.createPdf(docDefinition).print();
},

However, when it comes to generating the PDFs with their details, only the information of the last selected person is being displayed, not all the people I selected. This can be seen in the image below:

https://i.sstatic.net/iBlcO.png

I believe the issue lies within the docDefinition because it creates a new instance every time I generate a PDF and only captures the data from the last ticked person.

How can I go about solving this problem?

javascript vue.js vuejs2 pdfmake

Answer 1

Answer №1

Your docDefinition gets overwritten in each iteration of the for loop, causing it to only store the last value. To fix this issue, you can modify your code as follows:

var docDefinition;
var text = []
for (var vin = 0; vin < this.selected.length; vin++) {
  var nestedArr = new Array(this.selected);

  var s = nestedArr[0][vin].LAST_M + "\n" + nestedArr[0][vin].MEMB_N;
  text.push(s)
}
docDefinition = {
  pageSize: "A6",
  pageMargins: [0, 0, 0, 0],
  content: { text: text.join("\n") }
};
pdfMake.createPdf(docDefinition).print();

Answer 2

Your docDefinition gets overwritten in each iteration of the for loop, causing it to only store the last value. To fix this issue, you can modify your code as follows:

var docDefinition;
var text = []
for (var vin = 0; vin < this.selected.length; vin++) {
  var nestedArr = new Array(this.selected);

  var s = nestedArr[0][vin].LAST_M + "\n" + nestedArr[0][vin].MEMB_N;
  text.push(s)
}
docDefinition = {
  pageSize: "A6",
  pageMargins: [0, 0, 0, 0],
  content: { text: text.join("\n") }
};
pdfMake.createPdf(docDefinition).print();

Answer 3

Answer №2

This clever solution did the trick for me. I found the code on a helpful Stack Overflow question and also on GitHub.

 var docDefinition;
  var text = [];
  for (var vin = 0; vin < this.selected.length; vin++) {
    var nestedArr = new Array(this.selected);

    var s = nestedArr[0][vin].LAST_M + "\n" + nestedArr[0][vin].MEMB_N;
    text.push(s);
  }

  var docDefinition = {
    content: text.map(function(item) {
      return { text: item, pageBreak: "after" };
    })
  };
  pdfMake.createPdf(docDefinition).print();

Answer 4

This clever solution did the trick for me. I found the code on a helpful Stack Overflow question and also on GitHub.

 var docDefinition;
  var text = [];
  for (var vin = 0; vin < this.selected.length; vin++) {
    var nestedArr = new Array(this.selected);

    var s = nestedArr[0][vin].LAST_M + "\n" + nestedArr[0][vin].MEMB_N;
    text.push(s);
  }

  var docDefinition = {
    content: text.map(function(item) {
      return { text: item, pageBreak: "after" };
    })
  };
  pdfMake.createPdf(docDefinition).print();

What is the best way to display all the selected details in a table format?

Answer №1

Answer №2

Similar questions

The navigation for both the Bootstrap 4 Card Slider and Half Slider is identical

Troubleshooting Problem: Difficulty accessing Controller in AngularJS Module

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Retrieving information from a datatable in vb.net with an array

Conceal scroll bar within web browser view

Can you explain the role of the next() function in middleware/routes following the app.use(express.static(...)) in Express

Trigger an alert message upon loading the HTML page with search text

Incorporating a string at the end of a URL using Nuxt's dynamic routing method

Show JSON array items

Error: The property 'postID' can not be read because it is undefined

Struggling to comprehend the node.js walker concept

What are the steps for establishing a connection to Heroku using node-mongodb-native?

Utilizing the output of a callback function to execute res.render in a NodeJS application

Determining the Deleted Tag in Bootstarp Vue Form Tags: A Guide to Identifying Removed Tags in the List

Methods for presenting a list of textboxes representing a price list when a checkbox is clicked using CSS

Is it possible to create diagrams using Vue.js?

Ways to incorporate a dynamic value into a chart created with chart.js?

Preventing default behavior in a JQuery post request

Determine in React whether all values in an array of objects are false and then return true

Using Regex with JavaScript while ignoring letter case