I would like to do a file (of any kind) download using IE9 without any redirection. By redirection I mean providing a URL of the resource I am trying to download to the current document forcing a download if the MIME type is not a document type.
So I am left with getting the data using the XHR object and find a way to save it on disk. Since I am using IE9, I can't use any File API provided in IE10+.
So forget about:
using Blob
using FileSaver (https://github.com/eligrey/FileSaver.js/)
using Blob and typedarray polyfills needs debugging and I can't make them work
Right now I am getting the data after the REST call and trying to write it into a document like in this post: Javascript Save CSV file in IE 8/IE 9 without using window.open()
But, the problem is document.write() seems to encode anything written to it in UCS-2, so binaries sent from the back-end are reinterpreted and the file gets corrupted. I am guessing that only text-based files could be saved then.
Last and not the least, I SHOULD not use flash.
Does anyone have an idea in mind to resolve the encoding issue or another technique to do the download?
If it can help, I am using angularjs as a front-end JS framework
For the limitation we had, passing the token as a parameter to get the file downloadable resource was the solution. When we uplift IE, we shall change the solution tough.
It implies removing any security chain filter and do a manual validation on the token in the backend.
Related
My app creates an excel file, server side, from a database extraction.
A post request sends parameters to the server that the server then uses to query the database.
The server uses these parameters to extract data convert the data to an excel file (xlsx), then saves the file with a certain file-name as per the parameters sent to the server.
The server responds to the post request by sending the file-name to the browser.
The browser then creates a link using the filename and other predefined parameters to download the file by the following instructions:
var link = 'http://host-name/path-to-file/excel-file.xlxs'; // the link that is created by the js in the browser
window.location = link; // the file is downloaded
This works in chrome, firefox, opera and safari, in these browsers, the file downloads no problem.
However; when running in Microsoft-edge, the file is not downloaded and this appears in the page.
Someone was facing similar issue in some versions of IE and had to set Cache-Control header to make the download working properly:
response.Cache.SetCacheability(HttpCacheability.Private);
Source
The issue here is that this method of downloading files is not actually downloading the file. I was using javascript to instruct the browser to open the excel file, window.location = link;. Which tells the browser, go to a that link, and open whatever you find at that address. Which is normally an HTML file or something else transpiled into HTML. This can in some cases be also be a .pdf or the sort of file that modern web-browsers are able to interpret and run.
Now, the reason this was mostly working is; browsers like chrome and firefox are smart enough to know that they cannot interpret and display excel files, so instead, they download them. Pretty smart right. However; microsoft-edge is not so clever as its more proven compatriots. It tries to interpret and run the file, which of course it cannot. What this then leads to; is a grand display of nonsense; as you can see from screen-grab in my question above.
My problem here was actually a deeper rooted issue of technology mismatch. I had since migrated to using a more modern stack, replacing my plain node.js server with express. Moving the front-end out of a cross-origin tomcat java-container application-server model (which was causing most of my headaches on a daily bases since I was coding javascript) to a same-origin environment using webpack along with express.
And as you might know, using webpack brings a whole new dimension to the front-end that was not available before when we were using the 'old approach' to web-dev.
Most of the improvements in using webpack came from its ability to bring 'node.js' to the front end.
It has made my life as a dev 150% easier and the type of problem as described in my question above is now a thing of the past. javascript for the win! The moral for me here is that sometimes that aren't any quick fixes, and you just have to do things properly.
I'm using the Kaltura JavaScript API and am trying to upload an image to the server using the "upload" action from the "uploadToken" service. I keep getting this error:
Missing parameter "fileData"
I've tried passing the base 64 encoded version of the image as the fileData parameter, and various other values (the file name, the input.files[0] value, a readAsArrayBuffer and convert to binary), but am unable to successfully upload an image. In JavaScript, what should "fileData" be set equal to?
Using the Kaltura Test Console, I'm able to do this successfully, and I can see the network tab in my browser making the POST successfully, with the fileData. However, in my JavaScript code, the "upload" action from the "uploadToken" service call is reported as a GET operation. I'm starting to think this may be a bug with the Kaltura JavaScript client library.
You can upload files to Kaltura using JavaScript and the HTML5 file API. But you would have to create the http request manually and not use the JS library.
This solution is limited to modern browsers (in case of IE it's IE10+).
To support IE9 and below, you would have to rely on flash.
If you just need to upload images and not large files, then use a server side proxy script that will not be limited by CORS.
Can anyone who worked on something like this describe the general process? I'm very confused right now. By report I mean a visually appealing document with logo, tables, headers and footers, and the data will be retrieved dynamically.
The approaches I looked at are:
Use a server side library (node.js module) that generates the PDF. Send the string representation as response with Content-Type: application/pdf.
Problem: I chose PDFKit, but it doesn't work and no content shows up at all. It uses PDF 1.3, which is old.
Generate PDF on client side.
Problem: Most popular library seems to be jsPDF, but it's not very capable of producing sophisticated-looking documents.
Write template in PDF source code and fill in the data on server side.
Problem: The encoding is weird, for example if I just do doc.text("1"), a lot of unrecognizable characters appear for just the string "1". I'm very confused about this.
Finally, it'll be super helpful if anyone provides a link that can help me understand the encoding! It's super confusing to me.
Any experience with similar tasks is much appreciated!
I haven't personally done this, but the first thing I would try would be:
On the server side dynamically build the appropriate HTML document and CSS
Use phantomJS to render that document
Tell phantomJS to convert that document to PDF, saved in a temp file
Send the PDF back as the HTTP response by writing the temp PDF file to the response body
Delete the temp file
If you are struggling with content-type, content-disposition, etc, you shouldn't have to worry about that if you have a valid pdf file on disk and just write that data to the HTTP response. With the right headers, you should be able to ask the browser to either display the PDF or treat it as a file to be saved as a download.
As the member of jsreport team, I would give it a shot.
jsreport platform provides multiple ways how to generate pdf reports. The most common included one is to transform html into pdf using headless chrome. jsreport will also compile and render handlebars or jsrender html templates if its specified, it can embed images, add header/footer, run custom javascripts and more.
You can play with the examples and see the options you have
https://playground.jsreport.net
When you are done with playing, you can use jsreport online or download and install jsreport server to your company. Then you are ready to call its REST API and generate reports.
More to your question
jsreport will provide correct content-type in the response for pdf or html. You can just let the browser to display the result
data can be sent to jsreport api or retreived by custom script
I'm not sure what the most common approach is, but personally I like to create an HTML template, populate it in my server-side code, and then use wkhtmltopdf to convert the HTML into a PDF. If you're using .NET you should check out WkHtmlToXSharp (which is a .NET wrapper for wkhtmltopdf.)
How do I get the contents of a local file, say:
/home/user/Wired/uploads/1.csv
in a variable x in javascript?
Can I use the filereader http://www.w3.org/TR/file-upload/#dfn-filereader?
If yes, then how?
You can't do this with strict javascript, but you can use the web server as an intermediate between the user and the browser. Have the user upload the file asynchronously (using AJAX). The web server could then return the plain-text value back to the AJAX call.
The contents would then be free to use as you see fit.
This is likely your only option without employing Flash/Silverlight/Java.
Reading client files in javascript is possible indeed with the new File API available in modern browsers (I dont know if IE supports this now). Check this site and its code: http://www.readfileonline.com/ it allows you to read files using the browser only.
We are using HTML5 and javascript in one of our applications. The requirement is when the user clicks on a button we should download a file containing all the user entered data. There should be no server interaction to do this.
By using ActiveX object we can do this. But it is limited to Internet Explorer only.
By setting the response headers at the server also we can achieve this. But we can't use server interaction to do this.
We tried to use base64 data with mime type as 'application/octect-stream'. It is downloading "xxx.part" file to the local system with the exact data. But we are unable to set our own file name and extension (as we can't use .part as extension) to the file.
Please suggest us a way to download a file from the browser without server interaction with the desired file name and extension that works with all the browsers.
Currently not possible without using ActiveX or Flash. Take a look at Downloadify and see if it works for you.
We tried to use base64 data with mime type as 'application/octect-stream'
Have you tried setting appropriate response header?
Response.AppendHeader("Content-Disposition", "attachment; filename=name.ext");