Embed a collection of images utilizing PDFMake

I have a collection of base64 formatted images named imgFinding. I am looking to dynamically add all these images to a PDF using pdfmake. Below is a snippet of my code:

getDocumentDefinition() {
    let imgFinding = []
    for (var j = 0; j < this.images.length; j++) {
          imgFinding.push(this.images[j])
    }

    var dd = {
      content: [
       {
          image: imgFinding[0],
          width: 300
       }
      ],
    }
    return dd
  }

As seen in the code, currently I am manually inserting the image. How can I achieve this dynamically? The number of images to be inserted is not fixed.

Answer №1

Created a collection of appropriate items and placed it within the text.

generateDocument() {
    let imageList = []
    for (var k = 0; k < this.images.length; k++) {
          imageList.push({image: this.images[k], width: 300})
    }

    var docDefinition = {
      content: [
         imageList
      ],
    }
    return docDefinition
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to apply filters to jquery datatables during initialization process?

Is there a way to server-side filter datatable during initialization? I attempted the following code: function tableFilter(arg1, param2, value3) { var searchTable = $("#tblsearch").dataTable({ "bRetrieve": true, "b ...

How can one determine the completion of a chunked download request in Angular's HTTP client?

Currently, I am utilizing angular's HttpClient to retrieve an arraybuffer. The server is transmitting the data along with the following headers: *To avoid any confusion, the download route essentially retrieves a chunk file stored in the cloud. Howev ...

Continue making ajax calls after the function has been executed

I have encountered a problem where I need to ensure that the function llamadaEntrante() is executed before the confirm() alert, even when it's called after. Unfortunately, I haven't been able to make this work. Any ideas? Below is the code snipp ...

The function GetTileUrl from the GoogleMaps API is encountering a 404 Error

My website includes Google Maps integration, but upon loading the page, I encountered this error in the browser console: GET http://tile.openstreetmap.org/0/1/0.png 404 (Not Found) GET http://tile.openstreetmap.org/0/-1/0.png 404 (Not Found) GET http:// ...

Struggling to grasp the concept of DOM Event Listeners

Hello, I have a question regarding some JavaScript code that I am struggling with. function login() { var lgin = document.getElementById("logIn"); lgin.style.display = "block"; lgin.style.position = "fixed"; lgin.style.width = "100%"; ...

Transferring Information from Vue to PHP: What You Need to Know

I need assistance with passing data from Vue to PHP. Currently, I receive a JSON object through a PHP query that looks like this: <?php echo getBhQuery('search','JobOrder','isOpen:true','id,title,categories,dateAdded, ...

Leveraging lodash for a double groupBy operation

Hey everyone, I'm working on categorizing an array of objects by a specific attribute. Initially, using groupBy worked perfectly fine. However, now I need to go a step further and group these categories based on another attribute. I'm facing some ...

Finding and retrieving specific information from nested arrays within a JSON object can be done by implementing a method that filters the data

I have an array of objects where each object contains a list of users. I need to be able to search for specific users without altering the existing structure. Check out the code on StackBlitz I've tried implementing this functionality, but it's ...

What is the best way to extract a value from an array?

I am currently using the MySQL PHP class to retrieve the maximum ID from the table. $sql="SELECT MAX(id) FROM `".TABLE_CUSTOMERS."`"; $rows = $db->fetch_array($sql); My goal now is to use that maximum ID as a value and add 1 to it. $maxid=rows[0]; $n ...

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

What is the best way to convert a list of proxies into dictionary form?

I am attempting to achieve a result similar to the following: proxies_dict = { 'http':'http://178.141.249.246:8081', 'http':'http://103.12.198.54:8080', 'http':'http://23.97.173.57:80', } ...

Changing a 2D List into a 2D String Array in C#

Currently, I am dealing with CSV files, however, all the guides I have come across utilize 2D Lists. private void loadCSV() { List<string[]> values = new List<string[]>(); var reader = new StreamReader(File.OpenRead(*my fi ...

Having trouble triggering the onclick event on a dynamically created table using JavaScript

I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to mod ...

Comparing strings in Typescript/Angular for equality based on whether they share the same word

Consider having 2 string variables as shown below: var string1 = 'StagingFront'; var string2 = 'FrontStaging'; I aim for the if condition (string1 == string2) to return true. If there is an existing function in typescript/angular to a ...

What is the best way to show the HTML content inside a foreach loop when the array is empty?

The code snippet below is functional when the $getbanking variable contains data. However, an error occurs if $getbanking is empty: Warning : Invalid argument supplied for foreach() in It is necessary to execute the following code at least once if $getb ...

How can I display only the y-axis values and hide the default y-axis line in react-chartjs-2?

Although I have some experience with chartjs, I am struggling to figure out how to hide the default line. To clarify, I have attached an image that illustrates the issue. I would like to achieve a result similar to this example: https://i.sstatic.net/UXMpi ...

Display solely the initial row in the tbody segment of a table. Is there a method to obscure subsequent 1st rows?

The initial row of each tbody acts as the row header, containing the column names. Subsequent rows in each tbody are unnecessary and should be hidden. Classes utilized: toprowHeader = first row containing column names recordsRow = holds additional recor ...

Accessing a factory's functions within itself in Angular

I'm really trying to understand how all of this operates. It seems like it should be working as intended. I have an Auth factory that, when the jwt token expires, calls its 'delegate' method which obtains a new token using the refresh token. ...

Getting the selected value from a dropdown menu in ReactJS

I am working on creating a form that resembles the following structure: var BasicTaskForm = React.createClass({ getInitialState: function() { return { taskName: '', description: '', emp ...

Utilizing Online Resources for Texturing in Three.js

Struggling with adding textures in Three.js. I've encountered issues using local images in Chrome due to security concerns, so I'm interested in applying web images instead. Is there a method to attach an image from a URL to a Three.js mesh? ...