Utilizing JavaScript AJAX to upload a dynamically generated PDF file to a specific directory on the server

Looking for a solution to save a complex table generated via JavaScript as a PDF on the server. Existing pdf generation libraries have limitations with style and fonts, making it difficult for 'complex' tables. The table can currently be downloaded client-side as a PDF or printed.

Wondering if there's a way to use AJAX to send the created PDF document to a PHP file on the server for server-side storage instead of downloading it client-side. The function responsible for generating the form to be printed is reportBody(data);, which includes other variables and function calls.

In essence, can we achieve sending a PDF file generated client-side to the server through an AJAX post?

javascriptajaxpdf

Answer №1

Of course! Your question has been answered with a definitive Yes. Although the information provided is limited regarding what exactly is executed in the reporBody(data) function, most PDF libraries on the client side have the capability to provide the PDF file as base64 encoded data in the form of a string. You can then easily transmit this string to the server and save it as a PDF file. A straightforward implementation could look something like the following:

// I've opted for jQuery for convenience, but feel free to use any other library or Vanilla JS
var saveData = $.ajax({
          type: 'POST',
          url: "url-to-the-php-script",
          data: { pdfData: 'base64StringDataHere'},
          dataType: "JSON",
          success: function(resultData) { alert("Save Complete") }
    });

On the server side, you would handle the received data in this manner:

$pdfData= $_POST['pdfData'];    
file_put_contents('filename.pdf', base64_decode($pdfData));

Answer №2

A wide array of methods are available to achieve this task. One possibility is to embed html code in your reportBody(data) function and then:

  • Transmit the html data to a php file using ajax
  • Within the php file, utilize to create a pdf document
  • In the user interface side, you can direct to the resulting pdf file

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

Having difficulty choosing an item from a personalized autocomplete search bar in my Vue.js/Vuetify.js project

NOTE: I have opted not to use v-autocomplete or v-combobox due to their limitations in meeting my specific requirements. I'm facing difficulties while setting up an autocomplete search bar. The search functionality works perfectly except for one mino ...

javascriptvue.jsvuetify.js

transfer an image file to a php script using ajax

Having just started, my goal is to upload an image and send it to a server for insertion into a database. Initially, all I want to do is echo the file name that I will be sending. However, I am encountering issues with this process, as I keep receiving noi ...

javascriptphpajax

What is the best method for transferring an array from PHP to JAVASCRIPT using AJAX and JSON?

Could use some assistance here. It seems like I am receiving a string instead of an array. After passing the array, which is the result of a SQL query from PHP to JavaScript through AJAX, I want to loop through the array and populate certain fields in a fo ...

jqueryjsonajaxwordpress

Using promises and the fetch function to connect to a database

I am attempting to utilize promises with the fetch() function in order to access MongoDB from the front-end, but I am encountering some issues. var Promise = () => ( new Promise((resolve, reject) => { //perform certain actions, make requests ...

javascriptmongodbexpresspromisefetch

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

I have created a multi-select checkbox form, and I've added some JavaScript to ensure that the visitor selects at least one option <div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option&l ...

javascriptphpjqueryhtml

Seamless Exploration with Google StreetView

Google uses a special effect on StreetView images to transition smoothly between them. You can see an example of this effect in the images below, with the second image showing it being applied. My question is: How can I incorporate this same effect into m ...

javascriptjquerygoogle-mapsgoogle-street-view

Inside the function() in angular 2, the value of 'this' is not defined

I've integrated a UIkit confirmation modal into my app. However, I'm encountering an issue when trying to click the <button> for confirmation. The this inside the function is showing up as undefined. Here's the snippet of code in quest ...

javascriptangulartypescriptecmascript-6

The loading of the module from was hindered due to an invalid MIME type restriction

Exploring a three.js example and encountering an issue when utilizing import within a JavaScript module. The error message displayed is: Loading module from “http://localhost:8000/build/three.module.js” was blocked because of a disallowed MIME type ( ...

javascriptpythonmime-typessimplehttpserver

Is there a way to resolve the MongoDB Database-Differ Error?

I am currently working on creating an API and have set up a brand new Project, cluster, and Collection for it. However, when I attempt to use mongoose.save() to add data to my database, I keep receiving an error message. "message": { " ...

javascriptnode.jsmongodb

Converting HTML divs into a single page PDF document using DinkToPdf

Having trouble generating PDF from HTML using DinkToPdf due to div elements splitting across pages? Is there a way to ensure the entire div stays on one page, perhaps through html/css? Ideally, if there is sufficient space, the div should remain on the c ...

htmlcss.netpdfdinktopdf

What is the best way to obtain a list of all the modules that are currently accessible in AngularJS

When declaring an Angular module, I specify its dependencies as follows: const myModule = angular.module("MyModuleName", ["Dep1", "Dep2", "Dep3"]); Each dependency comes with its own set of dependencies, directives, controllers, etc. Is there a way to qu ...

javascriptangularjs

Navigate the page by scrolling the absolute positioned div

Is it possible to make the fancybox modal scroll with the page using fancybox 2? I want it to move along with the content rather than being fixed in the center with a max-height restriction. How can I achieve this? $('.fancybox-open').fancybox({ ...

javascriptjqueryhtmlcss

add a JavaScript variable to a JSON data structure

My JSON object is valid and it's called list_to_book_for: {"fold1-key1":{"name":"Van Antwerpen"},"fold2-key2":{"name":"Delporte"},"fold3-key3":{"name":"Lallemand"}} In order to add the content of a variable into this object, I have the following str ...

javascriptjson

Guide on integrating React with Node.js and HTML

I've tried various methods, searched on Google, and checked the official site, but nothing seems to work. The code only functions properly when I include it in the HTML file of node.js like this: <!DOCTYPE html> <html lang="en"& ...

javascripthtmlnode.jsreactjsexpress

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

javascripthtmlangularjshtml-table

What steps should I take to resolve the issue of 'this.reduce() not being a function'?

Here is my code : app.get("/", (req, res) => { const reducer = (acc, guildCount) => acc + guildCount; const results = client.shard.fetchClientValues('guilds.cache.size'); console.log(results) let guildCount ...

javascriptnode.jsexpress

Is the CSS scale activated by mouseover or click?

My CSS code successfully scales images, but the issue is that it affects every image on the page. I am looking for a solution to apply this CSS only when the user hovers over or clicks on an image. The challenge is that images are added by non-technical w ...

javascriptcss

Display thumbnail images in jquery-ui dropdown menu

Hello, I'm looking to display a small image (the user's thumbnail) on the jquery-ui dropdown by making an ajax call. As someone new to ajax and unfamiliar with jquery-ui, I would appreciate some guidance in the right direction. Thank you! HTML/J ...

javascriptphpjqueryajax

What is the best way to customize the style of a react.js component upon its creation?

Is there a way to set the style of a react.js component during its creation? Here is a snippet of my code (which I inherited and simplified for clarity) I want to be able to use my LogComponent to display different pages of a Log. However, in certain ins ...

javascriptcssreactjsmaterial-uireact-with-styles

Switch between Light and Dark Modes effortlessly with just one button

I've created a code that effortlessly switches between light mode and dark mode with the press of buttons. However, I'm looking to combine these two functionalities into a single toggle button for ease of use. If anyone can provide insight on how ...

javascripthtml