I use this function to generate ms word file from html content. Is there a way to preview the generated word file in the webpage
function Export2Word(element, filename = ''){
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml+document.getElementById(element).innerHTML+postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename?filename+'.doc':'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
I tried Google doc prevew and office but it doesn't open
Related
I'm sure there are many ways to do this I just haven't found the best solution. I'm using the following code to save html content as a word document. I have 2 problems:
When Saving As, "web page / html" is selected by default - I need it to be .doc or .docx by default when saving.
Even when saving as a word document, when I make a change in the new word document and resave it, it also saves a myWordDoc files folder with 2 XML documents and a Microsoft theme document.
How do I get it to Save As a word document by default and not get the strange extra folder of files when resaving the new downloaded file?
JS:
function Export2Word(element, filename = ''){
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml+document.getElementById(element).innerHTML+postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename?filename+'.doc':'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
HTML:
<div id="exportContent">
<p>Hi I'm the content of your Word document!</p>
</div>
<button onclick="Export2Word('exportContent');">Export as .doc</button>
In my app I'm using the below code to export the tblData info into Excel, and it works correctly as long as the content is in English.
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; // or `application/vnd.ms-excel`
var input = document.getElementById(tableID);
var tableSelect = document.createElement("table");
tableSelect = input.cloneNode(true)
const thead = document.createElement("thead");
thead.innerHTML =`
<tr><th>Name</th><th>Skills</th></tr>
`
tableSelect.prepend(thead)
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xlsx':'excel_data.xlsx';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
The output is:
How can I fix it so the non-Latin words (Arabic in case) appear correctly?
Add <meta charset='utf-8'> to the source HTML code.
It's even not necessary to add "html", "head", etc.
This worked for cyrillic; hope your case suits, too.
I want to export html elements or form to excel(.xlsm) template in php or javascript just as in this image file. I searched for possible solutions but all I get was to export table data to excel, I can use that too but I need the input fields as they are just as in
this image.
Till now I have user basic code to export a table into excel but when I change the extenstion of the file then excel says it is a corrupted file, the code I used is like:
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xlsm':'excel_data.xlsm';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {type: dataType});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
This code returns the excel file with or without the custom name.
What you are creating is TSV (in this case SSV) - Tab Separated Values, it's not xlsm. Just save it as .tsv and excel will open that.
I create an HTML file with document.implementation.createHTMLDocument() function. Like so:
var doc = document.implementation.createHTMLDocument("My New Document");
And I want to download this newly create HTML document. I tried this:
var link = document.createElement('a');
link.href = doc;
link.download = 'newDoc.html';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
But doesn't work. It redirects me to myDomain.com/[object HTMLDocument]. How can I download this file?
A Couple of stages.
Place the HTML of the document into a blob,.
Convert blob into a blob url
Create a link to download this url
Example below..
const bt = document.querySelector('button');
bt.addEventListener('click', () => {
//lets create some document
const doc = document.implementation.createHTMLDocument("My New Document");
const hello = doc.createElement('p');
hello.innerText = 'Hello';
doc.body.appendChild(hello);
//now get it's contents and place into a blob
const blob = new Blob([doc.documentElement.innerHTML], {
type: 'text/html'
});
//now convert to url
const docUrl = window.URL.createObjectURL(blob);
//were done, lets create a href to this and download
const aclick = document.createElement('a');
aclick.href = docUrl;
aclick.download = 'download.html';
aclick.click();
//tidy up
window.URL.revokeObjectURL(docUrl);
});
<p>Click button below to download some HTML</p>
<button>download</button>
You cannot append the filename in URL, Because the HTML File that you created using createHTMLDocument() is not a actual HTML file and Not available in your server, It's a Javascript HTMLDocument Object.
You can use Data URI, as follows, Complete Tutorial Here..
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
download("newDoc.html","<html><head><title>Hello</title></head><body>Hello World!</body></html>");
NOTE: The function encodeURIComponent() will not affect the HTML after download.
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
function myFunction(){
let html = document.getElementById("textarea").value;;
download("hello.html", html);
}
<textarea id="textarea" placeholder="Type your HTML here..."><h1>WORKING?????</h1></textarea>
<button onclick="myFunction()">GET FILE</button>
I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??
HTML:
<input type="button" onclick="newBlob()" value="Clear and Export">
Javascript:
function newBlob() {
var blobData = document.getElementById("ticketlog").value;
var myBlob = new Blob(blobData, "plain/text");
blobURL = URL.createObjectURL(myBlob);
var href = document.createElement("a");
href.href = blobURL;
href.download = myBlob;
href.id = "download"
document.getElementById("download").click();
}
I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p
The simplest way I've come up with is as follows:
function download(text, filename){
var blob = new Blob([text], {type: "text/plain"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
}
download("this is the file", "text.txt");
List of possible blob filestypes: http://www.freeformatter.com/mime-types-list.html
const downloadBlobAsFile = (function closure_shell() {
const a = document.createElement("a");
return function downloadBlobAsFile(blob, filename) {
const object_URL = URL.createObjectURL(blob);
a.href = object_URL;
a.download = filename;
a.click();
URL.revokeObjectURL(object_URL);
};
})();
document.getElementById("theButton").addEventListener("click", _ => {
downloadBlobAsFile(new Blob(
[document.getElementById("ticketlog").value],
{type: "text/plain"}
), "result.txt");
});
The value of a download property of an <a> element is the name of the file to download, and the constructor of Blob is Blob(array, options).
I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file
var text = 'hello blob';
var blob = new Blob([text], { type: 'text/plain' });
let textFile = window.URL.createObjectURL(blob);
let window2 = window.open(textFile, 'log.' + new Date() + '.txt');
window2.onload = e => window.URL.revokeObjectURL(textFile);