I have an html table with css which looks like this:
enter image description here
I use this link to convert it to doc file:
html to word
However I get it in word file as:
enter image description here
How can I convert this table with the same style?
I tried this:
function exportHTML(){
// continue with your code
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("exportContent").innerHTML+footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
and in html file:
<div style="float: left; padding: 5px; width:60%;" id="exportContent">
Related
I am trying to export HTML content - Table + paragraphs with multiple line breaks.
I want HTML content to export in word doc with Auto line numbers in word document.
I do not want it to generate in code by using loops or any other way. I want it to auto set by word doc.
I have tried below code in PHP :
$objWriter->startElement('w:sectPr');
$objWriter->startElement('w:lnNumType');
$objWriter->writeAttribute('w:countBy', '1');
$objWriter->writeAttribute('w:restart', 'continuous');
$objWriter->endElement();
I have added above code in Document.PHP under function _writeEndSection() after $borders = $_settings->getBorderSize(); in PHPWord Library and its working fine.
Can I do it in JavaScript by using XML code or mso-element tags and attribute?
I have used below code but its not working for me.
function exportHTML(){
var header = '<html xmlns:v="urn:schemas-microsoft-com:vml"'+
'xmlns:o="urn:schemas-microsoft-com:office:office"'+
'xmlns:w="urn:schemas-microsoft-com:office:word"'+
'xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"'+
'xmlns="http://www.w3.org/TR/REC-html40">'+
'<head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title></title>'+
'<xml>'+
'<w:WordDocument>'+
'<w:View>Print</w:View>'+
'<w:Zoom>75</w:Zoom>'+
'<w:DoNotOptimizeForBrowser/>'+
'</w:WordDocument>'+
'<w:sectPr>'+
'<w:lnNumType w:countBy=1 w:restart=continuous >'+
'</w:sectPr>'+
'</xml>'+
'</head>'+
'<body style="font: Arial">';
var tblNew = 'TableData';
var footer = "</body></html>";
var sourceHTML = header+tblNew+document.getElementById("source-html").innerHTML+footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'testfile.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
Can anyone help me on this requirement? Thank You in advance.
I am using:
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
//#ts-ignore
if(ev.target.id === "screenword"){
this.setState({
typeOfPrint: "screenword",
}, () => {
var sourceHTML1 = header+document.getElementById("spage").innerHTML+footer;
var source1 = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML1);
var fileDownload1 = document.createElement("a");
document.body.appendChild(fileDownload1);
fileDownload1.href = source1;
fileDownload1.download = this.state.PPName+'.doc';
fileDownload1.click();
document.body.removeChild(fileDownload1);
To create a doc file but want to create a docx. I've searched and cannot find any guidance on how to update this code.
I'm trying to avoid external libraries as much as possible.
I would consider using an external library such as https://www.npmjs.com/package/docx for this.
The page above includes examples using this from a webpage.
The issue with the converting from HTML to DOC is with the input field. Is it possible to extract to DOC only value from input field but not the whole element directly from browser?
Example HTML:
<html>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>
</head>
<body>
<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
are the parts of AI. This technology is expected to be a
prime part of the real world in all levels.
</p>
<input type="text" value="123456" />
<input type="text" value="123456" style="margin-left: 150px;"/>
</div>
<div class="content-footer">
<button id="btn-export" onclick="exportHTML();">Export to word
doc</button>
</div>
</div>
Javascript code that I'm using:
function exportHTML(){
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
Exported doc looks like this, but I would love to export it without input field (just the value)
Please check the JSFIDDLE link for the sample app: https://jsfiddle.net/0cLp8q9e/
You can move those input out from the elements that will render your DOC document. In order to print the values of those input you can create different element and put it there:
function exportHTML(){
// Add inputs values to the document before it rendered:
var inputs = document.querySelectorAll('input');
for (var i=0; i < inputs.length; i++) {
let ps = document.createElement('p');
document.getElementById("source-html").appendChild(ps)
ps.textContent = inputs[i].value;
}
// continue with your code
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
<body>
<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
are the parts of AI. This technology is expected to be a
prime part of the real world in all levels.
</p>
</div>
<div class="content-footer">
<!-- move this form the div you convert to DOC-->
<input type="text" value="123456" />
<input type="text" value="123456" style="margin-left: 150px;"/>
<button id="btn-export" onclick="exportHTML();">Export to word
doc</button>
</div>
</div>
Note: This snippet doesn't work on this site. Copy and paste it to your machine.
I would consider using regex to find and replace the input fields with their raw values. You can use the capture groups to get the value of the input box as per the below example.
This would have the added advantage of not being destructive to the page.
let re = /(\w+)\s(\w+)/;
let str = 'John Smith';
let newstr = str.replace(re, '$2, $1');
console.log(newstr); // Smith, John
i have building a Giphy Gif search app through giphy API and it works fine just each time when i tried to type something new in the search text and the new search result won't pop out unless i reload the page.
the HTML code as following:
<html>
<head>
<title>My Giphy Search App</title>
<style>
.container-image {
width: 30%;
display: inline-block;
float: left;
margin-right:3%;
}
</style>
</head>
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="refresh the page if you wanna searching more">
<button class="js-go container-button">Go!</button>
</div>
<div class="js-container">
</div>
<script src ="javascript/main.js"></script>
</body>
the js code in main.jsfile as:
document.querySelector(".js-go").addEventListener("click",function(e){
var input = document.querySelector("input").value;
searchGiphy(input);
});
document.querySelector(".js-userinput").addEventListener("keyup",function(e){
var input = document.querySelector("input").value;
if(e.which == 13){
searchGiphy(input);
}
});
function searchGiphy(searchResult){
var url = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchResult;
var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open("GET",url);
GiphyAJAXCall.send();
GiphyAJAXCall.addEventListener("load",function(e){
var data = e.target.response;
pushToDOM(data);
});
}
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">";
});
}
I am pasting all the js code above and wondering am i wrong with the ajax calling here? Could some one help me with this?
You are appending the results to the end of the current html instead of replacing what is already there. Instead use another variable to build the new html string you are constructing and then when you are done replace the innerHTML of the container with the new string.
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
var html = "";
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
html += "<img src=\"" + src + "\" class=\"container-image\">";
});
container.innerHTML = html;
}
My html page contain a embedded image (png) that I like to insert into the excel file dynamically. I tried below that created the excel file with the name I like and a worksheet name as well * though the name of worksheet is same as file name, not sure how to set that, with below code
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
var postfix = 'AKS'
//getting data from our div that contains the HTML table
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('myDynamicImage');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
But the content of image in dataURI format is inserted in excel as a text rather then image. Can I setup this for image. can I control the position etc. can i control the worksheet name, I did that with some other but bit complicated way called tableToExcel.