Storage of generated PDF files on the server

Question

Using the jsPDF plugin, I create a .pdf file and create a download based on a button click. I would like to save the file on my server and not initiate the download. Therefore, when the button is pressed, I want the file to be saved in:

 /tmp/uploads/pdf/example.pdf 

I know that I need to use Jquery.Ajax to publish the file to the server. However, looking at the documentation, I did not see .pdf support as a data type.

My code is:

 $(document).on("click", "#PDF", function () { var table = document.getElementById("result"); var tbl = window.sessionStorage.getItem("tbl"); var cols = [], data = []; function html() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(table, true); doc.autoTable(res.columns, res.data); doc.save( tbl+".pdf"); } html(); }); 

Based on this xml document saving , I tried the following:

 var pdfDocument = doc.save( tbl+".pdf"); var pdfRequest = $.ajax({ url: "/tmp/uploads/pdf", processData: false, data: pdfDocument }); 

Download the file, not save it. How to save a file?

Answer 1

I managed to fix this with FormData() , here is how I did it:

 $(document).on("click", "#PDF", function () { var table = document.getElementById("result"); var cols = [], data = []; function html() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(table, true); doc.autoTable(res.columns, res.data); var pdf =doc.output(); //returns raw body of resulting PDF returned as a string as per the plugin documentation. var data = new FormData(); data.append("data" , pdf); var xhr = new XMLHttpRequest(); xhr.open( 'post', 'upload.php', true ); //Post to PHP  to save to server xhr.send(data); } html(); }); 

upload.php

 if(!empty($_POST['data'])){ $data = $_POST['data']; $fname = "test.pdf"; // name the file $file = fopen("testa/pdf/" .$fname, 'w'); // open the file path fwrite($file, $data); //save data fclose($file); } else { echo "No Data Sent"; } 

The key part is var pdf =doc.output(); where you want to receive raw pdf data.

Answer 2

If your PDF contains binary data, you may run into problems if you try to transfer the PDF through a string. I have successfully used the jsPDF blob output format.

 var doc = new jsPDF(); // ... generate pdf here ... // output as blob var pdf = doc.output('blob'); var data = new FormData(); data.append('data' , pdf); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4) { if (this.status !== 200) { // handle error } } } xhr.open('POST', 'upload.php', true); xhr.send(data); 

Then your upload.php file can use the $_FILES in PHP

 <?php if(!empty($_FILES['data'])) { // PDF is located at $_FILES['data']['tmp_name'] // rename(...) it or send via email etc. $content = file_get_contents($_FILES['data']['tmp_name']); } else { throw new Exception("no data"); } ?> 

Answer 3

Javascript

 doc = new jsPDF({ unit: 'px', format: 'a4' }); doc.addImage(img, 'JPEG', 20, 20); var data = {}; var base64pdf = btoa(doc.output()); $.ajax({ url: 'WS/FileUploadHandler.ashx', type: 'post', async: false, contentType: 'application/json; charset=utf-8', data: base64pdf, dataType: 'json' }); 

FileUploadHandler.ashx

 public void ProcessRequest(HttpContext context) { var jsonString = String.Empty; context.Request.InputStream.Position = 0; using (var inputStream = new StreamReader(context.Request.InputStream)) { jsonString = inputStream.ReadToEnd(); } var byteArray = Convert.FromBase64String(jsonString); File.WriteAllBytes(@"C:\Users\mahmoud.hemdan\Downloads\testtest.pdf", byteArray); } 

Answer 4

Using Asp.net/C# and jQuery : based on @mahmoud hemdan answer I made for my requirement. I did as below:

Javascript:

 function createPDF(){ var doc = new jsPDF('landscape'); var u = $("#myCanvas").toDataURL("image/png", 1.0); doc.addImage(u, 'JPEG', 20, 20, 250, 150); var base64pdf = btoa(doc.output()); $.ajax({ url: 'ChartPDF.aspx?pdfinput=1', type: 'post', async: false, contentType: 'application/json; charset=utf-8', data: base64pdf, dataType: 'json' }); } 

Code ChartPDF.aspx.cs:

 protected void Page_Load(object sender, EventArgs e) { var pdfinput= Request.QueryString["pdfinput"]; if (pdfinput!= null) { var jsonString = string.Empty; HttpContext.Current.Request.InputStream.Position = 0; using (var inputStream = new StreamReader(Request.InputStream)) { jsonString = inputStream.ReadToEnd(); } var byteArray = Convert.FromBase64String(jsonString); //Get your desired path for saving file File.WriteAllBytes(@"C:\ReportPDFs\Test.pdf", byteArray); } } 

I called the page without any query string parameter, and the page creates a graph (The code is not specified for drawing a graph, since it is not part of qs.), And after that it calls the createPDF () function, which leads to page reloading and saving graph as a pdf file on the server. Later I use the file from the path.

Answer 5

I successfully saved the jspdf file on the server using jspdf, javascript and php with png image

here is javascript

 var doc = btoa(pdf.output()); var data = new FormData(); data.append("data", doc); var xhr = new XMLHttpRequest(); xhr.open( 'post', 'data/test.php?name=' +name, true ); alert(data); xhr.send(data); 

And php file

 if(!empty($_POST['data'])){ $data = base64_decode($_POST['data']); //$data = $_POST['data']; $name = $_GET['name']; $fname = $name."_bell_quote.pdf"; // name the file $file = fopen("../quote/" .$fname, 'w'); // open the file path fwrite($file, $data); //save data fclose($file); echo "Bell Quote saved"; } else { echo "No Data Sent"; }