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

Customize the appearance of the Vue.js datepicker starting from today's date

I am currently using the vue-datepicker component to display a date input field in my form. I want to set the default date to the current day and disable the selection of past dates. Additionally, I need to change the language of the component but it seems ...

javascriptvue.jsvuejs2

Using TypeScript to Verify the Existence of Words in a String

Is there a way in typescript to find specific words within a given string? For example: If we have a list: ['Mr', 'Mrs', 'FM.', 'Sir'] and a string named 'Sir FM. Sam Manekshaw'. The words 'Sir' ...

javascripttypescript

Incorporating a remote PHP file into your website using JavaScript

Is it feasible to utilize JS (jQuery) for executing a $.post from any website on any domain to a script on my server? This query stems from my reluctance to disclose my PHP files to clients (and avoid spending money on ionCube or similar solutions). By se ...

javascriptjqueryajaxpostxmlhttprequest

Best practices for efficiently utilizing setInterval with multiple HTTP requests in NodeJS

Imagine you have a collection with 3 to 5 URLs. You want to send requests every 5 seconds, one by one. Here is how I approached this: setInterval(() => { array.forEach(element => { request .get(element.url) .on('response', ...

javascriptnode.js

Selecting Content Dynamically with jQuery

I have a webpage with multiple dynamic content sections. <div id="content-1"> <div id="subcontent-1"></div> <i id="delete-1"></i> </div> . . . <div id="content-10"> <div id="subcontent-10"></d ...

javascriptphpjqueryhtml

Ending the jQuery Modal box

Struggling to create a simple modal on my own, and I'm facing some difficulties (probably because I'm more of an expert in jQuery - but let's not dwell on that too much). This is the HTML markup I have: <div id="modal-boxes"> < ...

javascriptjqueryhtmlmodal-dialog

The process of updating UseContext global state in React Native and ensuring that the change is reflected across all screens

Struggling with updating global state values using React useContext on different screens? Attempting to change theme color in the App, but changes only appear on the current screen and not carried over to others? Looking for assistance in resolving this ...

javascriptreactjsreact-nativereact-hooksreact-context

The MUI5 drawer overlapping a modal dialog

Is it possible to use MUI5 to open a side drawer on top of a modal dialog that triggers it? Currently, the dialog triggers the side drawer but it opens behind this. It appears as though a modal dialog (drawer) is attempting to open over an already-opened ...

javascriptmaterial-uimodal-dialog

Having trouble loading component parameters in Joomla 3.3 with AJAX?

I have created a basic component with certain parameters set in the component view. My goal is to load the menu item containing the component using AJAX. I initially referred to Chris Duell's tutorial on Ajax in Joomla with jQuery, which mentioned tha ...

phpajaxjoomlaparameterscomponents

How do you vertically span a grid element across 3 rows using Material UI?

This particular scenario may appear to be straightforward, but the official documentation of Material UI lacks a clear example on how to achieve this. Even after attempting to nest the grid elements, I encountered an issue where the grid element on the ri ...

javascripthtmlreactjsmaterial-ui

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

I'm attempting to create a responsive image gallery using the Masonry jQuery plugin, but despite reading numerous articles and forum posts on the topic, I can't seem to get it to work properly. The gallery is displaying many blank spaces. My app ...

javascriptjqueryhtmlcssjquery-masonry

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

In my React app, I have set up ml5.js to train a model by clicking on one button and make predictions with another. However, I encounter an error when trying to test the model for the second time: TypeError: Cannot read property 'classify' of und ...

javascriptreactjstypescripttypeerrorml5.js

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Navigating through a multidimensional array in Angular 2 / TypeScript, moving both upwards and downwards

[ {id: 1, name: "test 1", children: [ {id: 2, name: "test 1-sub", children: []} ] }] Imagine a scenario where you have a JSON array structured like the example above, with each element potenti ...

javascriptjsontypescriptmultidimensional-arrayangular2-components

I am having trouble with my jQuery wrap function and it is not functioning correctly

I'm having trouble with implementing the jQuery wrap function. (function ($) { $.fn.customWrap = function () { applyWrapper(this); return this; }; function applyWrapper($element) { var $input = $('<input&g ...

javascriptjqueryplugins

Upcoming examination on SEO using React testing library

Currently, I am in the process of testing out my SEO component which has the following structure: export const Seo: React.FC<Props> = ({ seo, title, excerpt, heroImage }) => { const description = seo?.description || excerpt const pageTitle = s ...

javascriptreactjsnext.jsmeta-tagsreact-testing-library

Learn the process of retrieving JSON objects through AJAX using jQuery

When making a jQuery call to an API website, I receive the results in JSON format: { "results":[ { "user":{ "gender":"female", "name":{ "title":"mrs", "first":"linda", "last":"diaz" }, ...

javascriptjqueryjsonapi

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

I have a certain form with input fields. My goal is to generate a JSON object from the form, excluding any input whose name is "point". However, my code doesn't seem to be working properly when I use the "not()" function. What am I doing wrong and how ...

javascriptjqueryhtml

Avoiding multiple ajax requests due to multiple clicks

I have a blog on WordPress that has a jQuery code allowing users to click a bookmark link to save the post as a bookmark. Each post displays a total bookmark counter in this format: "Bookmarked (5)". The issue is that when a user clicks multiple times on t ...

javascriptjqueryajaxwordpress