jsPDF Attach PDF to mail - javascript

I have an HTML page with some input. When the customer clicks on Send button the below converted pdf has tobe sent in mail directly in php??Is it can be done?? If yes,how it can be done can someone help me in this flow
<script>
$('#print-btn').click(()=>{
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML($('#divName')[0],function() {
pdf.save('billing.pdf');
});
});
</script>

As far as I know jsPDF only let you create a PDF on the client side of your application/website.
If you want to attach the generated PDF to an email you first have to pass the file created to a PHP script on your server side and then send the file like a normal attachment.
To pass the file you can encode your file in base64 and pass it as a string using AJAX to a PHP page where you will decode the data and generate the file with the content received.
After that you can attach it to an email and send it. The process here depends on what is your system of choiche for sending emails.
Another approach is to generate the file directly on the server side of your application/website so you can skip the js to php step.

Related

How to store a jquery generated file in a temporary location at cient machine

I am generating an excel (.xls) file from HTML table data using a Table2Excel.js library and I need to store it at a temporary location, I need to then fetch this file using the temporary path name and send it as an email attachment.
If there is a workaround, it'll be most appreciated.
Edit: Sending an email isn't the focus of question here.

Laravel snappy pushing PDF download

I am using Laravel/Jquery with barryvdh/laravel-snappy to create a pdf on the fly from database data.
In the controller I have:
if ($request->ajax())
{
$document = Document::url($id)->first();
$pdf = PDF::loadView('app.documents.whitepapers.pdf', compact('document'));
return $pdf->download('filename.pdf');
// return response()->send($pdf->download('filename.pdf'), 200, $headers);
}
How can I push this PDF to the browser so that is available as a download?
When I do it without Jquery it is working perfectly. The reason that it is behind a Jquery function is that I use a Modal with a form to collect a persons data before the download can be initiated. This has ajax validation.
You will not be able to present the file as a regular download via JavaScript. In order to show a download prompt to the user, you'll need an extra step in your workflow.
I would suggest the following workflow:
User submits modal form
Form is validated via AJAX. If validation passes, respond with a URL to download the user's PDF from, instead of the PDF itself.
Your JavaScript redirects the user to this URL. Note that this is a redirect, rather than another AJAX request (see top.location.href)
When the user accesses that URL, you are able to deliver the PDF using the code snippet you provided in your original question. This snippet sets the content-disposition of the response appropriately, forcing the download prompt to appear in the user's browser.
If you need to customise the PDF generation for each user, make sure to include the user's ID (or another piece of identifying information) through to step 4.

JavaScript add file to form data via $_POST

In the following use case I'm trying to accomplish only step 3 is not working so far, and I'm working in a Joomla 3.4 environment as I'm working on a module here.
I have an html form asking for some input and a file upload.
I process this file with JavaScript to pgp to encrypt it (with this: https://keybase.io/kbpgp)
Now I want to replace the original file in the form with the
encrypted one, or at least add the encrypted one to the form data.
This doesn't work so far, how can I accomplish that?
When everything is done in the JavaScript part form.submit(); is called
An email with the forms plain text encrypted as body text is sent and the file should be added as encrypted attachment.
Some details:
Sending the file unencrypted works quite well, so I thought I can just add the encrypted one, but apparently it doesn't work. The form submits the original content and nothing about the added file. I already searched for some solutions and this code snippet was the result of my research:
var data = new FormData();
data.append('upload_file' , result_buffer);
var xhr = new XMLHttpRequest();
xhr.open( 'POST', '', true );
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(data);
var form = document.getElementById('formencryptmessage');
form.submit();
upload_file is the form input of the original unencrypted file; the $_POST request keeps the original file no matter what I do; result_buffer is a binary buffer with files content; lastly, formencryptmessage is the form id and name.
Edit
The git repo with the code is here: https://github.com/JamborJan/joomlaencryptedcontact
We are talking about this: https://github.com/JamborJan/joomlaencryptedcontact/blob/master/tmpl/default.php
My main intent is to use only the browser session / RAM / hidden input field to do the file encryption and sending. I didn't find a suitable solution so far.
Maybe you could try to, once the file is pgp encrypted, to encode the datas in base64, then putting the resulting string in an input type=hidden by editing the DOM through JavaScript.
Your script which process the submitted form could then attach the file to the mail in an easy way, as mail attachements are base64 encoded. It would only have to read the value of the hidden input field.
If you want some example Javascript code, let me know, I've got some snippets dealing with this.
-> I was wondering the same thing as Mave, but I guess there's some reason if you want it this way? A workaround could be to create a new page between the one with the form, and the one which tells you the mail was sended (you could do what you want with the file, one the server side, and show it available for download to the user who just uploaded it unencrypted).
Another thing, to deal with base64 encoded datas in JavaScript, you can use:
- btoa() method to encode to base64,
- atob() method to reverse it.

Javascript Download CSV File

I am trying to create a button on my website that will allow a user to downlaod a .csv file. I currently have the site hit the server and the server generates a string of text which is in the format of a csv file. I am not sure where to proceed. Do i save this string to a file on the server and then send the file to the client (I would prefer not to create files on the server side) or do i send the client the string of text and then create the file on the client side? I would like the button to function as a user would expect a download button to work (ie a they are given a choice as to where to save the file and a progress bar shows the progress f the file download)
I am using Nodejs and express on the server side.
Once the file is generated just put a link to the file location in your page:
Clickable text
The browser will know how to handle this and prompt the user where they would like to save the file. Once the user specifies this the file will be downloaded to the user's computer.
If you want to just create the file in memory and then send it to the user you could do something like this if you are using asp.net MVC:
public FileStreamResult MyFunction(/*your parms*/)
{
System.IO.MemoryStream stream = FunctionThatCreatesMyCalendarStream();
//you may need stream.Position = 0 here depending on what state above funciton leaves the stream in.
//stream.Position = 0;
FileStreamResult result = new FileStreamResult(stream, "text/csv");
result.FileDownloadName = "myfiledownloadname.csv";
return result;
}
EDIT: If you are using node.js look at this post - Nodejs send file in response
This is a callback function that I currently use to send a csv. You can put the button so that it calls this function, and sends the csv. when you call this service, automatically downloads a file to your compurer.
function(req,res){
// Process that does the csv and stores it in a variable csv_variable
res.writeHead(200,{'content-type':'text/csv'});
res.write(csv_variable);
res.end();
});
Hope this helps!

Save content dynamically with Javascript

I want to allow my clients to be able to have a save-dialogue come up to save data that I've stored in Javascript. I can't direct them to an existing file because you can't modify the file system directly with Javascript.
Is it possible to send data directly to be saved (of course through a save-dialogue. Otherwise, it would be a crazy exploit). I'm trying to make it so my users can create content on my site and be able to download it.
You could use links with dataUrl to create a save link : (this need you to encode your data using base64)
var a = document.createElement('a');
a.href = "data:text/plain;base64,"+base64_encode("plop");
a.innerHTML = "save";
document.body.appendChild(a);
You can get the base64_encode function at http://phpjs.org/functions/base64_encode:358 .
Users would need to right click the link and choose "save as..." to save the file on their filesystem.
You could create a save button, and then offer a download dialog. And by allowing users to upload the file again, and parse its contents, you could load your application.
There are several ways of doing that:
Server Side
Store the serialized form data (or whatever data) in a data base with a unique id, and give the ID to the user, when he wants to load, he'll supply the ID, and you'll whip the data for him.
Account system, assuming you have an account system, you can link each form data to a specific user.
Serialize the data in a way, and give it to the user as a downloadable file, then when he wants to recover, he will upload the file, you parse it, and display it for him.
Of course both solutions require an AJAX solution to communicate with the server.
Client Side
If your site is modern (You don't care about old browsers) you can use Local Storage to save his input on his computer, and then automatically load it from his memory when he returns. Note that browser support is not great, you should use Modernizr or something similar to test for it.
What about using server sessions and storing content there based in DialogId and SessionId.
Flows:
1. user stores info. session_id[dialog_id] =
2. user retrieves info. = session_id[dialog_id]
You may use json and base64 to transmit bulk and structural info.
I suppose you want to save the data in a file on the client's computer.
You cannot do it directly because JS cannot access the local filesystem.
But you can achieve it via the server. You would at the same time
send the data to the server and download it to the
client. The download opens the usual "Save As..." dialog where the client
can specify the file name.
A possible concrete implementation uses a form that makes a POST
request to the URL save.php, passing the data to be saved in
a hidden input field save_data. The result of the request is
directed to an invisible <iframe>.
<form action="save.php" method="post" target="save_target" onsubmit="save();">
<input type="hidden" id="save_data" name="save_data" value="" />
</form>
<iframe id="save_target" name="save_target" src="#"
style="display:none; width:0; height:0; border:0px solid #fff;">
</iframe>
The JS function save() prepares the data to be send:
function save() {
document.getElementById("save_data").value = ...;
return true; // or false if something wrong
};
The PHP page save.php on the server processes the POST request and downloads the
data:
$data = $_POST['save_data'];
$size = strlen($data);
$contentType = "text/plain"; // MIME type
$defaultName = "x.txt";
header("Content-Type: $contentType");
header("Content-Disposition: attachment; filename=$defaultName");
header("Content-Length: $size");
echo $data;

Categories