VueJS PDF generation - step by step tutorial (NEWLY UPDATED)

Is there a way to create a PDF using Vue.js with the API data provided below? The data consists of columns for Date, Temperature, and Humidity. I am having issues retrieving data from an axios call.


[
{
"Humidity": "70.50",
"Temperature": "25.50",
"time": "2019-08-28T10:04:22.597533952Z"
},
{
"Humidity": "70.50",
"Temperature": "25.40",
"time": "2019-08-28T10:09:23.709048064Z"
},
{
"Humidity": "70.50",
"Temperature": "25.40",
"time": "2019-08-28T10:14:25.430288128Z"
}
]

Below is the method I'm using:


exportpdf(){
var self = this;
axios.get("http://34.67.88.0:3000/api/env/fdsfsdf")
.then(function(res){
self.datas = res.data[0];
})

let columns = [
{title:"Time",dataKey:"time"},
{title:"Temperature",dataKey:"Temperature"},
{title:"Humidity",dataKey:"Humidity"}
];
var doc = new jsPDF('p','pt');
doc.autoTable(columns,self.datas);
doc.save("p.pdf");
},
javascriptvue.jspdf

Answer №1

        convertToPDF(){
            var self = this;
            var report= '';
            axios.get("http://34.67.88.0:8081/api/env/fdsfsdf")
            .then(function(response){
              let columns = [
                  {title:"Time",dataKey:"time"},
                  {title:"Temperature",dataKey:"Temperature"},
                  {title:"Humidity",dataKey:"Humidity"}
                  ];
              var doc = new jsPDF('p','pt');
              doc.autoTable(columns,response.data);
              doc.save("environment_report.pdf");
             }) 
             }

Answer №2

Perhaps this snippet of code can assist you in your task: It is designed to download a PDF file received in the response.

 const data = Buffer.from(bytes, 'binary');
 const blob = new Blob([data], { type: 'pdf' });
 if (window.navigator && window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveBlob(blob, 'test.pdf');
    } else {
      const a = document.createElement('a');
      a.style = 'display: none';
      document.body.appendChild(a);
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      a.click();

      window.URL.revokeObjectURL(url);
}

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

Click on a row in ReactTable to toggle the background color or expand the row

Is there a way to toggle the row background color in ReactTable when it is expanded? I have tried using onExpandedChange but haven't had any success. Any suggestions on how to achieve this would be greatly appreciated. Thank you! https://i.sstatic.ne ...

javascriptreactjsreact-table

Incorporate the Sequelize model into a Vue.js project

I am currently in the process of developing a CRUD application using electron, vuejs, and sequelize. I have already initialized Sequelize and configured the .sequelizerc file as shown below: const path = require('path'); module.exports = { &a ...

vue.jselectronsequelize.js

What could be causing the malfunction of the Facebook iframe like button?

Even though it functions offline, there seems to be an issue with its performance online. Here is the code that was used: <iframe src="http://www.facebook.com/plugins/like.php?app_id=125925834166578&amp;href=http%3A%2F%2Fwww.facebook.com%2FBaradei. ...

javascripthtmlfacebookfacebook-like

Is it possible to employ a For loop with a Nodelist?

I have a unique HTML code structure that resembles a tree. My goal is to traverse the NodeList and assign specific classes to nodes that have children. Here's a snippet of the code: <li id='test' class="parentNode"> <button class ...

javascripthtmlnodelist

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

javascriptregexnode.jsexpress

Retrieve information from the Firebase database in order to update a text string

When I execute this function to retrieve data from firebase database app.listen(3000) app.engine('html', require('ejs').renderFile) var bodyParser = require('body-parser'); var sm = require('sitemap') var firebase ...

javascriptangularjsnode.jsfirebasefirebase-realtime-database

Customize time formatting in Angular to accommodate localized time formats

I am utilizing Angular's localization service version 8.3.28 to support English, Spanish (Mexico) with code es-MX, and Spanish (Spain) with code es-SP While using the date pipe: {{ foo.Date | date: 'shortDate' }} The dates are changing to ...

javascriptangulartypescriptlocalizationinternationalization

Spinner Vue Displays while Loading Image from a URL

I am trying to display a loader spinner while an image is loading, but I am having trouble implementing this. Even after debugging and getting true and false values in the console, the spinner is still not showing up. <template> <div class=&q ...

javascriptvue.js

What is causing the issue of the div not being removed from the label renderer in three.js

Hello, I've been trying to solve this issue for the third time now without much success. The problem I'm facing is related to creating a div at runtime and then attempting to remove it after clicking on it. Although I've tried removing the d ...

javascripthtmlcssthree.js

Error: Attempting to access a property of an undefined value, please verify the key name is

Attempting to incorporate dynamic elements into the assignment, I have written the following code: var contentList = Object.keys(content)[0]; $scope.model.currentLoadedContent[contentList] = content[Object.keys(content)[0]] When trying to execute the seco ...

javascript

Chrome console displaying error: "API request open method is not a function."

Check out my weather app on Code Pen Here's the code for my weather app (apologies if it's overwhelming): var button=document.getElementById('submit'); var zipcode; var lat; var lng; var weather; var iconId; var temp; // Function t ...

javascriptapi

Mastering the art of customizing classes and styles in material-ui (React)

I am facing a challenge with version 1.2.1 of material-ui. My goal is to make the AppBar component transparent by overriding its styles as per the documentation here. This is the code snippet I have been working on: import React, { Component } from ' ...

javascriptreactjsmaterial-designmaterial-ui

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

javascripthtmlflaskserver-sent-eventseventsource

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

javascripthtmlflexbox

Tips for adding a value to a specific object in an array

I am currently utilizing Vue along with Vuetify's v-data-table to display some data. Everything is functioning as expected, but I also need to incorporate data from another API. Therefore, I am looking for a way to add items to an array of objects. ax ...

javascriptarraysvue.jsobjectvuetify.js

New and Improved React Material Collapse with onClick Event [Answer Refreshed]

I am currently working on a component that contains a list of details. Each item in the list has a "Details" button, and when clicked, it should show additional information only for that specific item. I am using Material-Ui with React and have imported ...

javascriptreactjsmaterial-ui

Error Encountered: The element specified is not recognized as a <Route> component. All children components within <Routes> should be either a <Route> or <React.Fragment>

I've been trying to integrate the strip API key, but I'm having trouble finding a solution in the new react-router-dom version Here is the detailed error message: The above error occurred in the component: at Routes (http://localhost:3000/stati ...

javascriptreactjsreact-routerstripe-paymentsreact-router-dom

How can we enable SOAJS to operate on NodeJS versions higher than 0.12?

Currently, We were required to revert our NodeJS platform back to version 0.12 in order for our SOAjs dashboard to function properly. What changes need to be made in our SOAjs implementation to support the latest NodeJS versions? Thank you ...

javascriptnode.jssoajs

Tips for transferring an object from data attributes to methods within a VueJS component

Check out this complete example first: https://jsfiddle.net/3bzzpajh/ I'm facing a challenge where I want to pass the entire person object to the method showSelectedData. However, when I try to attach the person object to a data attribute like :data- ...

javascriptvue.jsvuejs2

Are there any options for a JavaScript coding platform that can be used on a tablet device?

As someone who frequently travels by train, I recently purchased an Android tablet and have a strong desire to learn JavaScript. While I can read books on my tablet, I am eager to also be able to program on it. Are there any options available for develop ...

javascriptandroid