I am trying to save an Excel table as an HTML file.
I have prepared an external CSS file which I want to use that contains my styles.
However, Excel saves the table as HTML with several style options which, as they are applied in-code to specific elements, override my CSS file.
Is there a way to save the table from Excel without the style elements?
Specifically, the element I'm looking to get rid of is "table-layout: fixed;" which hampers my attempts to control the table width.
Thank you.
you could easily do this with some javascript, import the html file in a webpage and just add this to your script and add it when needed.
var e = document.getElementByTagName('table')[0]; //assuming the table is the 1st one to appear
// or get by id with document.getElementByID('IDhere')
e.removeAttribute("style");
or with multiple tables that have the attribute
var e = document.getElementByTagName('table');
for(var i = 0; i < e.length; i++) {
e[i].removeAttribute("style");
}
Related
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 3 years ago.
I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.
I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.
<html>
<body>
<div>
//CONTENT//
<div>
</body>
</html>
I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.
Edit: I Haven't notice that you also don't want to use JS.
I'll leave this answer as a partial solution for you problem.
The Solution:
If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).
Notice: Don't forget to check for Browser support.
With that you can choose HTML templates or Custom elements.
Let's take an example of HTML template:
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
What is web components (From the developer.mozilla.org docs)?
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
Is there a way to configure TinyMCE to automatically insert additional attribues when copying and pasting content into a textarea?
In my case, I have a textarea that I copy/paste content with text and images. When images are inserted, I would like to automatically mark the img tags as having a specific CSS class (for ensuring they are fluid).
I'm using Django TinyMCE is that makes any difference. Has anyone succeeded in achieving this sort of behavior?
The TinyMCE Paste plugin has the ability for you to pre or post process the content during the paste process.
I would recommend using the postprocess API as this allows the Paste plugin to do its cleanup first.
https://www.tinymce.com/docs/plugins/paste/#paste_postprocess
For example you could do something like this in your TinyMCE init (not that this is what you want to do I just had this example handy from a project):
paste_postprocess: function(editor, fragment) {
var allElements = fragment.node.getElementsByTagName("td");
for (i = 0; i < allElements.length; ++i) {
console.log('initial font family: ', allElements[i].style.fontFamily);
var st = allElements[i].style;
stCleaned = st.fontFamily.replace("sans-serif", "").replace("Calibri", "Arial");
st.fontFamily = stCleaned; // Indirectly
}
}
...then each time the Paste plugin gets run your code will get run after it and you can manipulate the pasted content as you see fit.
I have a base .docx for which I need to change the page header / footer image on a case by case basis. I read that python-docx does not yet handle headers/footers but it does handle Pictures.
What I cannot work around is how to replace them.
I found the Pictures in the documents ._package.parts objects as ImagePart, I could even try to identify the image by its partname attribute.
What I could not find in any way is how to replace the image. I tried replacing the ImagePart ._blob and ._image attributes but it makes no difference after saving.
So, what would be the "good" way to replace one Image blob with another one using python-docx? (it is the only change I need to do).
Current code is:
d = Document(docx='basefile.docx')
parts = d._package
for p in parts:
if isinstance(p, docx.parts.image.ImagePart) and p.partname.find('image1.png'):
img = p
break
img._blob = open('newfile.png', 'r').read()
d.save('newfile.docx')
Thanks,
marc
There is no requirement to use python-docx. I found another Python library for messing with docx files called "paradocx" altought it seems a bit abandoned it works for what I need.
python-docx would be preferable as the project seems more healthy so a solution based on it is still desired.
Anyway, here is the paradocx based solution:
from paradocx import Document
from paradocx.headerfooter import HeaderPart
template = 'template.docx'
newimg = open('new_file.png', 'r')
doc = Document.from_file(template)
header = doc.get_parts_by_class(HeaderPart).next()
img = header.related('http://schemas.openxmlformats.org/officeDocument/2006/relationships/image')[0]
img.data = newimg.read()
newimg.close()
doc.save('prueba.docx')
I have dynamically created a table using JSON inside a function . I could not find a way to apply the the qtip.js and its style to this dynamically created html table. Can anyone tell me a way to apply styles and qtip.js inside a jQuery function?
Could you add some sample code on jsfiddle.net ?
Did you consider about naming the html table in anyway and set the css rules anyways, so the come in place as soon as the table is rendered ? otherwise you could apply the styles after the table has been created by $('table').css("width","200px");
Just obtain a reference to the element you dynamically created and apply qTip accordingly:
var table = $('<table></table>')
.appendTo('body')
.qtip({
content: 'This is an empty table.',
show: 'mouseover',
hide: 'mouseout'
})
Is it possible to change the element's node name in GWT? I mean something like this:
HTML h = new HTML();
h.getElement().setNodeName("mydiv")
while there is no setNodeName() method for Element.
I'd like to acquire <mydiv>some contents</mydiv> instead of default tag <div>some contents</div>
Thanks for any hints.
You can't change the element node name of the HTML widget. However, you can create your own tag with Document.get().createElement("mydiv"), and use that to create a new Widget by extending Composite. However, I'm not sure why you want to do this, because adding new tags to the DOM and thereby extending HTML doesn't sound as something you should want. Setting the content in this tag isn't possible via methods like innerText because they are only available for valid tags.
change the tag name while keeping content and attributes
function changeTagName(elm,new_tag_name){
var newElm = document.createElement(new_tag_name)
var atr = elm.attributes;
for(var i=0;i<atr.length;i++){ // copy all atributtes
newElm.setAttribute(atr[i].name,atr[i].value)
}
document.body.insertBefore(newElm,elm)
newElm.innerHTML=elm.innerHTML; //copy the content
elm.parentNode.removeChild(elm) // remove original
}
for example:
<span id='sp1' class='cl1 cl2'> some t e x t with (\n) gaps .... and etc</span>
changeTagName(document.getElementById('sp1'),'pre');