Hi,
please find the link to my workspace
https://playground.jsreport.net/w/krishnaraj.s.poojary/q3rNyGnT

css styling works when I run with the html recipe, but when I change it to html to xlxs, css styling not working

Hi , I am trying to apply some css styling for div tag inside td tag. but it is not working.

I want to apply different styling for the Adds and Removes label and featuretypename and name

<style>
    table, th, td  {
  border: 1px solid black;
}
td{
vertical-align: top;
}
table {
  border-collapse: collapse;
}
  .line-break {
        overflow: scroll;
      
    }
    .adds-label {
    padding: 10px;
    color: #8CC641;
    font-weight: bold;
}
    
</style>
<tr>
        <th>S</th>
        {{#each standardChangesPerProduct}}
            {{#if @first}}
                <td  class="line-break">
                    {{#each addedFeatures}}                     
                                <div>{{featureTypeName}}</div>
                                <div>{{name}}</div>
                        {{/each}}           
                </td>   
            {{else}}
                <td  class="line-break">
                    {{#each addedFeatures}}
                        {{#if @first}}
                                <div style="color:red;"><b>Adds</b></div>
                                <div> {{featureTypeName}}</div>
                                <div> {{name}}</div>
                        {{else}}
                            <div> {{featureTypeName}}</div>
                            <div> {{name}}</div>
                        {{/if}}
                    {{/each}}    
                    {{#each removedFeatures}}
                         {{#if @first}}
                         <br />
                            <div class="removes-label">Removes</div>
                            <div>{{featureTypeName}}</div>
                            <div>{{name}}</div>
                        {{else}}
                            <div>{{featureTypeName}}</div>
                            <div>{{name}}</div>
                        {{/if}}
                    {{/each}}          
                </td>
            {{/if}}   
        {{/each}}         
    </tr>

can you please help me with this

This works, but when we download the excel file it won't show the text with hyperlinks, because of the hyperlinks by default it is getting opened with protected view. once you open it in edit mode then only you can see the hyperlink
Code:

<table>
    <tr>
        <th > Test</th>
    </tr>
    <tr>
        <td data-cell-type="formula">=HYPERLINK("https://forum.jsreport.net/topic/1698/how-to-add-hyperlink-in-html-to-xlsx-recipe/3","Test Hyperlink")</td>
    </tr>
</table>

Playground output:

Downloaded file :

Is there any sample ? I just wanted give a try.

I am converting html to pdf using chrome pdf recipe. In my pdf I have few hyperlinks, and I want change the color of the hyperlinks when user hovers the mouse.

here is the html and the css which I am using.

html:

 <div class="header-cell product">
            <a href="https://forum.jsreport.net/unread" target="_blank">  
               jsreport forum
            </a>
        </div>

css:

.header-cell {
    min-width: 220px;
    max-width: 220px;
    position: sticky;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 5px;
}

.product {
    display: flex;
    box-sizing: border-box;
    min-width: 185px;
    max-width: 185px;
    font-weight: bold;
    border-right: 1px solid #E2E8F0;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    background: #F5F8F9;
    font-family: Lato, Gotham, Helvetica, Arial;
    font-size: 14px;
}
 a:link {
  text-decoration: none;
 color:#636363;
}
 a:visited {
  text-decoration: none;
  color:#636363;
}
 a:hover {
  text-decoration: underline;
  color: #F26722;
  
}
 a:active {
  text-decoration: underline;
  color:#636363;
}

In your example if you remove overflow :Scroll from style it fits the cell content

<style>
    td {
        background-color: yellow;
        color: green;
        border-style: solid;
    }
</style>

<table>
    <tr>
        <td style="font-size: 35px">Hello world</td>
        <td>world</td>
    </tr>
    <tr>
        <td style="width: 20px; text-align:right">right</td>
        <td>world</td>
    </tr>
    <tr>
        <td>world</td>
        <td>world</td>
    </tr>

    <tr>
        <td style="font-size: 35px">Hello world</td>
        <td>world</td>
    </tr>
    <tr>
        <td style="width: 20px; text-align:right">right</td>
        <td>world</td>
    </tr>
    <tr>
        <td>world</td>
        <td>world worldworldworldworld 
            worldworldworldworld<br/>worldworldworldworldworldworld
            worldworldworldworldworldworld
            worldworldworld</br/>
        </td>
    </tr>
    
</table>

How to add hyperlink in html-to-xlsx recipe?
I tried below but it's not working.

<tr>
        <td></td>
        <td class="option standard-cell">S</td>
        {{#each @root.products}}
        <td class="class1"><a href="https://jsreport.net/learn/html-to-xlsx"> Js playground</a></td>
        {{/each}}
    </tr>