Download php genereted csv file though jquery/javascript - javascript

I can download a csv file from php, but I need to do it via jquery/javascript.
what would be the best solution for that? how to do it?
Save php generated csv file in tmp dir and download via jquery/JS but how?(app used internally)
Send array of data back to frontend, do all in jquery/JS.
Actually I want to update data on page and same time download changed rows!
I can not use any plug-in of any kind.
EDIT:
Ok! HERE is the full problem, i forget to mention.
I have a page with some rows from DB,
I wanted to update selected rows in DB
Same time get changed values and update rows on page
download changed rows in csv
In one button click,
I cant use different buttons to save data and download file because after updating rows in db how would I get last updated rows?
With my limited knowledge, I can just get json response and update page Or download file not both!

So here is how i solved it :)
I made csv string out of json returned data in JS.
and used data URI scheme like here:
I made a link and that downloads .csv file.
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv_ouput);
$('#csv-btn-div').append('Download CSV');
There is another solution, if you want file save dialog to appear!
Thanks All!

$.get("/someCsv.php", function(data) {
// do stuff here.
});
Make sure to use some form of caching at the server side.
I would prefer preprocessed data (json):
$.get("/createJson.php", function(data) {
// do stuff here.
});

Related

Angular : Save editable PDF data using angular/javascript?

Html:
<iframe [src] ="fileurl" #iframe>
</iframe>
<button (click)="saveDoc()">
</button>
Stuck at savedoc() functionality.
Typescript:
/*api call to get document blob data on load*/
var fileurl = new blob([res.body],{type:application/pdf});
fileurl = URL.createObjectUrl(fileurl);
savedoc(){//here need logic to access edited pdf content as blob }
I am able to view and write in pdf editable fields (as input or checkboxes) but I can't figure out once filled all details, how to save/access that edited PDF content (mostly in blob format) to send back to server when click on save button. I have also tried ng2-pdf-viewer library of npm but same issue. I have to send this edited pdf to server in blob format to replace with existing.
How can I access edited pdf content?
Edited: Alternative approach, if its possible to trigger saveAs event from code to save iFrame pdf in local drive? I am using Window.showSaveFilePicker();but saved file seem corrupted or not exist.
Have a look at PDF-LIB.
It is a great JavaScript library which provides all sorts of tools to manipulate PDF documents. There is even tooling for filling the fields and saving the newly filled PDF.
In a past project, I used this library to capture user information from an HTML form and have it inserted and saved into a PDF.
Note:
Remember that once you have the filled PDF on client side, you must send it back to server side to update the PDF that is stored on the server.

HTML page using local data not showing changes to local data immediately

I am fairly new to web development. I am using HTML and Javascript, specifically the Jexcel Javascript library, to create a spreadsheet webpage. The spread sheet is sourced from a CSV file stored in the working directory of my project. The problem is, when I make changes to that CSV file, they do not show up in my project until I rename the file (and change the filepath in my code respectively). I suspect this has to do with the webpage caching the source CSV file, but I am not sure. How would I go about disabling caching/making my table source from the CSV file everytime? I am using Tomcat Web Server as well. Thank you.
The code that is sourcing my spreadsheet is the following:
<script>
$('#spreadsheet').jexcel({
allowInsertRow: false,
allowInsertColumn: false,
allowDeleteRow: false,
allowDeleteColumn: false,
csv : 'data/test.csv',
csvHeaders : true,
defaultColWidth : '200px',
});
</script>
When changes are made to test.csv I want those changes to show the next time the page is refreshed, but this is not currently happening.
Update: Restarting the Web Server does make the changes show up, so I believe this is a caching issue. I am using Java Servelets on the Server Side of my code.
Browser side caching of resources is a common issue.
To prevent it, the easiest way is to append a version hash to resource url to force reload when modified, so you still benefit of cache feature when file hasn't changed.
Without information about the languages you use on server side, it's very difficult to help you more.
Here is the fonction I generally use to generate resources url :
function assetv($path) {
$hash = 'undefined';
if (file_exists($path)) {
$hash = filemtime($path);
if (!$hash) {
$hash = md5_file($path);
}
}
return urlFromPath($path) . "?v=" . $hash;
}
Of course, the "urlFromPath" depends on your app ;-)
[EDIT]
The browser loads your csv file using an url (data/test.csv) that is "used as cache key" (approximately).
So to force reload when file was modified, you need to change the url, for instance with a version number parameter (file name doesn't changes) :
data/test.csv?v=1
data/test.csv?v=2
As server side only is aware of file state, you need to generate the versionned url on server side when building your HTML.
Finally, instead of managing a version number manually, you can use a "natural" attribute of the file, as it's last modification time or a hash of it's content.
Thank you all for the suggestions. Ultimately I found out the problem was due to the fact that the csv file I was sourcing my data from was in the project folder and Tomcat does not update changes to that file immediately. I solved this by reading the data from a file stored outside the working directory on my machine.

Saving pdf on server side with jsPDF

I have an application that generates a HTML page with data which the user can edit.
At the end I generate a .pdf file with jsPDF.
Is there any way that I can save this generated .pdf on my server-side database?
I'm using PrimeFaces.
Thanks in advance
Updating my solution for other users:
I found the .output('datauristring') method of the jsPDF which returns me a BASE64 String.
Then the String is sent via JSON to my backed bean and converted as my will.
Thanks all for the help! I've found my solution:
Once the user presses on the button to generate the .pdf, I'll save all the data he filled on the database, just the data.
When the user wants to see the pdf he generated back, I'll generate a new one with the data collected on his first submit.
Thank you all for the answers, they were helpful.
I suggest to use wkhtmltopdf.
It is a open source cross platform command line tool to generate pdf files from html content.
So to your requirement what you can do is, you need to send the html content to the server and save this content into a html file.
Once you saved html content into html you can call wkhtmltopdf like you execute MS-DOS commands in java.
Example: new ProcessBuilder("wkhtmltopdf.exe", htmlFilePath, pdfFilePath);
Once pdf file is generated you can read and store into database.

Remote form - XLSX download

I have a form, where user can select values from collection of check boxes to filter data. Form posts to controller where xlsx format is defined to download xlsx file. I am using axslx_rails.
Now, I would like something to happen before and after the remote call.
And it works ok.
What I can't figure out is how to actually download a xlsx file as the respond block goes to JS format, not xlsx, which is something liek this:
format.xlsx { response.headers['Content-Disposition'] = 'attachment; filename="test.xlsx"'}
So, it works either one or the other way. Non-remote form downloads file as i have a format: xlsx defined. If i do a remote form, javascript works (show spinner, hide spinner, etc...), but file is not downloaded.
How can I achieve both?
Thx
OK, i've given up and went with a solution:
to save file to disk (to some publicly accessible location)
download file via jQuery fileDownload plugin
delete file
Seems like the best solution currently for what i need.
If someone has a more elegant solution, without extra JS library involved...

Write a line to javascript file

Im using a array to display some images in a website:
var paintingImages;
paintingImages =
[
{
url: 'images/objects/ron.jpg',
alt: 'ron'
}
];
This js code is written in paintings.js and my main js code is written in the file main.js
I have made this website for a artist and I want to give him the opportunity to login and add pictures to his website. I'm not that good with php, but adding images to a ftp in a folder is no problem.
Because I'm using a array for retrieving the images, I need to be able to add items to the array.
This is the part where I'm stuck. I don't know how to edit a existing js file, so the next time I open the website, the items (images) will been shown.
Activexobject is not a option because it's only possible in IE.
In summary:
I need to add a item to a array
I need to save this into the file, so the next time the website opens, it will be shown
I'm not verry good with php, I prefer javascript
Can't use Activexobject because of the use of multiple browsers
You can not simply modify a javascript file sitting on the server from browser side javascript.
You need to implement some server side logic.
If you don't like PHP, but like JavaScript, check out NodeJS for example.
With Node you should be able to build some lightweight serverside logic to modify your json array file with additional images.
You would need to change your logic .. You need to send this data to server anyhow . and when you load your next time take it back from server and update your webpage accordingly. I would suggest use any javascript MVC framework like backbone, angular.js. it will help you.
Use a database.
Save it to a database server (You figure this out, could be via forms, xhr, websockets, etc.).
On page load, load the correct data for the current user.
Create the $userPaintings array (call it what you want) from the user data in PHP.
Then simply output a JS object in the page with PHP:
<script>
var paintingImages = <?php json_encode($userPaintings); ?>
</script>

Categories

Resources