Export HTML to Word Doc with continuous line number - javascript

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.

Related

How to create a .docx file and not a .doc word using JavaScript

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.

Problems accessing a dictionary/json in a javascript function to populate a table

Overview:
I am creating a web page using Python and generating both html as well as javascript in my code. Additionally, I am parsing through csv files and converting their table data to html. I want to be able to click on a line of text and the associated table data for that text would then be loaded into an iframe on the currently active web page. The problem I am having, is that my javascript function is not recognizing the key I send it to retrieve the corresponding table data. If I manually enter the key to return the table data, the correct data is returned - though the table doesn't load. However, if I generate the key programmatically, it returns as 'undefined' even though the strings appear to be identical.
Goal:
I need to figure out if there is something wrong with either the syntax, or the format of the key I am using to try and retrieve the table data. Secondly, I need to figure out why the table data is not being correctly loaded into my iframe.
Example:
import pandas
opening_html = """<!DOCTYPE html><h1> Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe name="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """ test-1<br>"""
java = """<script type='text/javascript'>
var table_filename = """ + java_variables + ";"
java += """function send_table_data(obj) {
var t = obj.text + ' 00';
alert(t)
//This line below will not work
var table_data = table_filename[t];
//But this line will return the correct value
var table_data = table_filename['test-1 00'];
alert(table_data);
//This line should load the data, but does nothing
document.getElementsByName('table_frame').src = table_data;
}
</script>"""
html_text = """<head>
<link rel="stylesheet" href="style.css">
</head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'
with open('test_table_load.html', 'w') as w:
w.write(html_text)
EDIT: I did just figure out that for some reason there was a default space at the beginning of the var t - so using trim() seemed to fix that. Now, the only issue left is why the data doesn't load into the table.
It looks like you figured out your typo with the space that was messing with your key, so this is for your second question.
Your code
So to get your table to populate in the iframe you need to fix three things:
To edit the HTML contents of your iframe you should be setting the .srcdoc element, not .src
The document.getElementsByName() function will return an array of HTML elements so in order to get the element you want you should do one of the following:
(recommended) switch to using document.getElementById and use id='table_frame' in your iframe tags
select the first element of the array by using document.getElementsByName('table_frame')[0]
The anchor tag that you're using as the trigger for your function is redirecting you back to the original HTML page, stopping you from seeing any of the changes your javascript function is making. A simple solution to this is to switch to using a <button> element in place of <a>.
Here is what your code looks like with the fixes:
import pandas
import json
opening_html = """<!DOCTYPE html><h1>Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe id="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<button href='' onclick="send_table_data(this);"> test-1</button><br>"""
java = """<script type='text/javascript'>
var table_filename = """ + java_variables + ";"
#for the button, innerText needs to be used to get the button text
java += """function send_table_data(obj) {
var t = obj.innerText + ' 00';
alert(t)
//This line below will not work
var table_data = table_filename[t];
//But this line will return the correct value
var table_data = table_filename['test-1 00'];
alert(table_data);
//This line should load the data, but does nothing
document.getElementById('table_frame').srcdoc = table_data;
}
</script>"""
html_text = """<head>
<link rel="stylesheet" href="style.css">
</head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'
with open('test_table_load.html', 'w') as w:
w.write(html_text)
Other Recommendations
I strongly suggest looking into some python frameworks that can assist you in generating your website, either using HTML templates like Flask, or a library that can assist in generating HTML using Python. (I would recommend Dash for your current use case)

Using ReactJS to create print page

There has got to be a less brute force way of making a print page then the way I have been doing it. (See below code). Maybe with ReactJS and DOM insertions in some manner since the rest of my website is written with ReactJS? (See second example below) I have tried using the CSS #media print, but it does not work well on very complex websites in all the browser flavors. More recently, I have been making an entirely separate ReactJS website just for the print page and then passing it query strings for some of the information required on the print page. What a mess that makes!
var html: string = '<!DOCTYPE html>';
html += '<html lang="en">';
html += '<head>';
html += '<meta charset="utf-8">';
html += '<title>Title</title>';
html += '</head>';
html += '<body style="background-color: white;">';
html += '<div">';
html += getContent();
html += '</div>';
html += '</body>';
html += '</html>';
var newWin = window.open();
newWin.document.write(html);
newWin.document.close();
Second example:
var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "Bundle.js?ver=" + Date.now();
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);
Yeah there is, checkout react-print.
var React = require('react');
var ReactDOM = require('react-dom');
var PrintTemplate = require ('react-print');
class MyTemplate extends React.Component {
render() {
return (
<PrintTemplate>
<div>
<h3>All markup for showing on print</h3>
<p>Write all of your "HTML" (really JSX) that you want to show
on print, in here</p>
<p>If you need to show different data, you could grab that data
via AJAX on componentWill/DidMount or pass it in as props</p>
<p>The CSS will hide the original content and show what is in your
Print Template.</p>
</div>
</PrintTemplate>
)
}
}
ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount'));

Export html table to excel using javascript

I tried to export my html table to excel using the code given in this Gist. But after exporting, when i opened the file, It displays the html code of the demo page in excel. Can anyone please give the correct sample of javascript used to export the html table to excel (Should be opened in office Calc too).
EDIT: Attached the image screenshot.
Here is a function I made.
Add "remove" class on elements you do not want to show in the excel.
function exportExcel(id,name){ //<table> id and filename
var today = new Date();
var date = ('0'+today.getDate()).slice(-2)+"-"+('0'+(today.getMonth()+1)).slice(-2)+"-"+today.getFullYear();
var file_name = name+"_"+date+".xls"; //filename with current date, change if needed
var meta = '<meta http-equiv="content-type" content="text/html; charset=UTF-8" />';
var html = $("#"+id).clone();
html.find('.remove').remove(); //add the 'remove' class on elements you do not want to show in the excel
html.find('a').each(function() { //remove links, leave text only
var txt = $(this).text();
$(this).after(txt).remove();
});
html.find('input, textarea').each(function() { //replace inputs for their respectives texts
var txt = $(this).val().replace(/\r\n|\r|\n/g,"<br>");
$(this).after(txt).remove();
});
html.find('select').each(function() { //replace selects for their selected option text
var txt = $(this).find('option:selected').text();
$(this).after(txt).remove();
});
html.find('br').attr('style', "mso-data-placement:same-cell"); //make line breaks show in single cell
html = "<table>"+html.html()+"</table>";
var uri = 'data:application/vnd.ms-excel,'+encodeURIComponent(meta+html);
var a = $("<a>", {href: uri, download: file_name});
$(a)[0].click();
}
Call it on an event, example:
$("#export_button").click(function(e){
exportExcel("table_id", "filename");
});

Replace / Ignore JavaScript in a String

I wrote a small RSS reader with JQuery. At first theres a screen with the titles of the articles, when clicked on a title I load the content of that article. The problem is, it contains some google ads script, which will replace the content of the article and fill the whole screen with an advertisement.
The following script is what I am tying to replace or ignore:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8356817984200457";
/* ijsselmondenieuws.nl */
google_ad_slot = "9061178822";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
So I wrote a method which is supposed to remove the script by a simple replace:
var replaceScript='<script type="text/javascript"><!--\n' +
'google_ad_client = "ca-pub-8356817984200457";\n' +
'/* ijsselmondenieuws.nl */\n' +
'google_ad_slot = "9061178822";\n' +
'google_ad_width = 468;\n' +
'google_ad_height = 60;\n' +
'//-->\n' +
'</script>\n' +
'<script type="text/javascript"\n' +
'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\n' +
'</script>';
function removeADS(ads) {
removeAD = ads.replace(replaceScript, " ");
}
But this doesn't work, I think it's not flexible either (if it would work). When something changes in the script, the application will get stuck at the advertisement again. Is there some way to completely ignore this script while fetching the content from an RSS feed or a more flexible replacement script?
Any help is appreciated,
Thanks!
It's not very wise to parse xml/html with regex.
Use a dom parser (jquery is a beautiful one ...hint hint):
var rssContentString = '<rss version='2.0'>...',
xmlDoc = $.parseXml(rssContentString),
$xml = $(xmlDoc),
helper = $('<div />'),
result;
result = helper
.append(
$xml
.find('script')
.remove()
.end()
)
.text();
UPDATE
Based on the new comments, since you get your rss content like this :
content:$.trim($(v).find("content").text())
you can modify this expression to the following :
content:$.trim($(v).find("content").find('script').remove().end().text())

Categories