How to build a custom, downloadable file using HTML - javascript

I want to make a simple HTML page that takes some information from the user, then provides a downloadable file that contains that information. I have the form laid out, as well as JavaScript that creates the string that ideally would become the contents of the file, but I don't know how to get HTML to create the file to download.
I wouldn't be surprised if this question's been asked before, but I've looked and the only thing I can find is 'creating your first webpage' and the like. Please provide me with a link if this has been asked.
Thank you in advance.

You can try something like:
window.open('data:text/html;base64,aGVsbG8=')
You just need to add a base64 encoded html string there, to encode it use function btoa('content'). You can also set a string to a link like:
Download

Related

How to extract all the links given a html file and even the file size?

Is it possible to list all the links that exist in the html page, given the html link as an input, pretty much you see it here?
http://www.feedbucket.com/?src=http://allearsenglish.libsyn.com/rss&start=0
It looks like the website reads all the links that exist and give me the summary, and reads file size of the mp3 link without opening it.
Do you know any good tutorials that helps me learn this topic or similar topics?
I have an idea. You can get all links in these URL by using the split function, like:
var link = "http://www.feedbucket.com/?src=http://allearsenglish.libsyn.com/rss&start=0";
var links = link.split("http://");
If you are using java at server side (because of the java tag)
You can use this Java html parser library: jsoup
You would request the page from the input url like this:
String src = request.getParameter("src");
Document doc = Jsoup.connect(src).get();
and then parse "doc" to find all the links in the page like this:
Elements links = doc.select("a[href]");
Here is a similar example.
There are a ton of HTML parsing libraries out there. Jsoup is pretty great for Java. You would do something like below to get a list of the elements. And then you'd iterate through the list to print them, get file size, whatever else you wanted to get with them
Jsoup.connect("http://www.feedbucket.com/?src=http://allearsenglish.libsyn.com/rss&start=0").get().getElementsByAttribute("href");
What the HTML parser libraries will do is get the page source, and grab all the HTML tags, and from there filter for something like a "a" tag for link.

Getting the file extension without knowing it's name

I need to know if there is a way to retrieve the real file extension without parse the filename.
In my code I split the file using the function split(filename, ".") then i get the last element of the array that the function returns.
Now, if I create a .pdf file called, for example test_file.pdf, the previous method works perfectly, but if i rename my file to test_file(without extension) I cannot retrieve the extension even if I know that the file is a PDF.
For example, if i rename test_file.pdf to text_file.jpg how can I recognize that the file is still a pdf and not an image file with .jpg extension?
I would like to know if there is a way to obtain this information, maybe using file metadata or other information related to the file.
I'm looking for a Javascript solution because I have to check the extension when I upload the file using a form (client side) but even a Java solution could be fine, can you help me?
Thank you in advance!
Look at this post and the marked answer: Get real file extension -Java code
I guess it's just what you need.

Load a JSON file from a URL without AJAX request?

So I can't seem to find an straight answer to my problem.
What I want to do is load a JSON file that's located on a specified URL. It's a large complicated JSON file. Basically, I've been trying to use AJAX to 'get' the file all night long. I've used the $.getJSON Jquery shortcut too, without any luck. I believe the server isn't allowing for AJAX requests, but if I enter in the URL I can access the file without a problem.
My question is, is there any way I can get the file so I could use it in order to create this little mock up site that I need to create?
Is this possible?
I've tried looking for a way to just rip the text off of the URL and then just turning that into a JSON file so I could parse it, but I haven't found any relevant information on this tactic.
If you have any ideas, please let me know, thank you! :D

Generate a Word document in JavaScript with Docx.js?

I am trying to use docx.js to generate a Word document but I can't seem to get it to work.
I copied the raw code into the Google Chrome console after amending line 247 to fix a "'textAlign' undefined error"
if (inNode.style && inNode.style.textAlign){..}
Which makes the function convertContent available. The result of which is an Object e.g.
JSON.stringify( convertContent($('<p>Word!</p>)[0]) )
Results in -
"{"string":
"<w:body>
<w:p>
<w:r>
<w:t xml:space=\"preserve\">Word!</w:t>
</w:r>
</w:p>
</w:body>"
,"charSpaceCount":5
,"charCount":5,
"pCount":1}"
I copied
<w:body>
<w:p>
<w:r>
<w:t xml:space="preserve">Word!</w:t>
</w:r>
</w:p>
</w:body>
into Notepad++ and saved it as a file with an extension of 'docx' but when I open it in MS Word but it says 'cannot be opened because there is a problem with the contents'.
Am I missing some attribute or XML tags or something?
You can generate a Docx Document from a template using docxtemplater (library I have created).
It can replace tags by their values (like a template engine), and also replace images in a paid version.
Here is a demo of the templating engine: https://docxtemplater.com/demo/
This code can't work on a JSFiddle because of the ajaxCalls to local files (everything that is in the blankfolder), or you should enter all files in ByteArray format and use the jsFiddle echo API: http://doc.jsfiddle.net/use/echo.html
I know this is an older question and you already have an answer, but I struggled getting this to work for a day, so I thought I'd share my results.
Like you, I had to fix the textAlign bug by changing the line to this:
if (inNode.style && inNode.style.textAlign)
Also, it didn't handle HTML comments. So, I had to add the following line above the check for a "#text" node in the for loop:
if (inNodeChild.nodeName === '#comment') continue;
To create the docx was tricky since there is absolutely no documentation on this thing as of yet. But looking through the code, I see that it is expecting the HTML to be in a File object. For my purposes, I wanted to use the HTML I rendered, not some HTML file the user has to select to upload. So I had to trick it by making my own object with the same property that it was looking for and pass it in. To save it to the client, I use FileSaver.js, which requires a blob. I included this function that converts base64 into a blob. So my code to implement it is this:
var result = docx({ DOM: $('#myDiv')[0] });
var blob = b64toBlob(result.base64, "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
saveAs(blob, "test.docx");
In the end, this would work for simple Word documents, but isn't nearly sophisticated for anything more. I couldn't get any of my styles to render and I didn't even attempt to get images working. I've since abandoned this approach and am now researching DocxgenJS or some server-side solution.
You may find this link useful,
http://evidenceprime.github.io/html-docx-js/
An online demo here:
http://evidenceprime.github.io/html-docx-js/test/sample.html
You are doing the correct thing codewise, but your file is not a valid docx file. If you look through the docx() function in docx.js, you will see that a docx file is actually a zip containing several xml files.
I am using Open Xml SDK for JavaScript.
http://ericwhite.com/blog/open-xml-sdk-for-javascript/
Basically, on web server, I have a empty docx file as new template.
when user in browser click new docx file, I will retrieve the empty docx file as template, convert it to BASE64 and return it as Ajax response.
in client scripts, you convert the BASE64 string to byte array and using openxmlsdk.js to load the byte array as an javascript OpenXmlPackage object.
once you have the package loaded, you can use regular OpenXmlPart to create a real document. (inserting image, creating table/row ).
the last step is stream it out to end user as a document. this part is security related. in my code I send it back to webserver and gets saved temporarily. and prepare a http response to notify end user to download it.
Check the URL above, there are useful samples of doing this in JavaScript.

How to display information contained in XML file from another website

I have an XML file ( XML file I produce ) which contains information about my parteners.
I want them to display on their website information relative to them by picking them into the XML file.
I have no idea to do that, ecxept that i need to write a 'parser' in javascript to display information. This javascript code i guess has to be on my partener's website.
could you please provide me examples to do that ? (how to write a parser, how to display only information for one partener ?)
Thank you,
Regards
I think this is a standard problem. Each browser does expose there own version of a Document type object which you can build and then use method like getElementByTagName to grab a particular node in the XML and process its data.
Few links which you can look at
http://www.hiteshagrawal.com/javascript/javascript-parsing-xml-in-javascript
http://www.mikechambers.com/blog/2006/01/09/parsing-xml-in-javascript/
I would suggest you to use prototype library for dealing with this

Categories