Export toHTML with styles without styles inline

Export toHTML with styles without styles inline

Posted by: ricardo.aleixo on 12 September 2023, 2:34 pm EST

• 

  ricardo.aleixo

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 2:34 pm EST - Updated 12 September 2023, 2:43 pm EST

  [quote=ricardo.aleixo]
  
  Hi.
  
  We wanna know the possibility that using the method toHTML to export a sheet but without inline styles but respecting all the styles, it coul’d be a internal.
  
  like this.

  * now
  <tr style="color: #ff4455">...</tr> 
  
  * expected
  <style>.tr-1 {color: #ff4455}</style>
  <tr class="tr-1">...</tr>
  
  

  today we’ve this. (image)

  [/quote]

  

  795×568 99.1 KB

  We’ve a client that report us a security fail using the unsafe-inline as CSP ( content security policy )
  
  We’ve a consurn about XSS exploit and we use a lot this method.
  
  So, coul’d be possible in a new version we’ve a toHTML method that i clou’d recive a style in a separately way.

• 

  kartik.dua

  

  • Post Options:
  • Link
    Copy

  Posted 13 September 2023, 3:07 am EST

  Hi Ricardo,

  Unfortunately, we could not clearly understand which GrapeCity product you are using. Since this is the general discussion forum for the ComponentOne (C1) product, are you using a C1 control in your project? If not, could you please let us know which GrapeCity product are you using?

  Also, it would be really helpful if you could provide a code snippet or a sample project showing the issue you are facing. This will help us investigate your requirements further and assist you in the best way possible.

  Thanks, and Best Regards,
  
  Kartik

• 

  ricardo.aleixo

  • Post Options:
  • Link
    Copy

  Posted 13 September 2023, 11:00 am EST - Updated 13 September 2023, 11:06 am EST

  Hi, sorry about a missinformation.
  
  We are using ( SpreadJS ).

  I should have post in the SpreadJS forum, sorry about that.
  
  here it’s the link to acess a sample… yiu could see the result that i was talking about in the console.

  https://jscodemine.grapecity.com/sample/xbDXapX2mUqO6immvQp4IA/

  it’s about this css inline…
  
  

  

  1400×284 95.3 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2023, 4:54 am EST

  Hi Ricardo,

  Currently, SpreadJS doesn’t have a flag/method to convert the inline styles to the classes. However, you could create your own custom function to separate out the inline css from the html.

  Kindly refer to the following code snippet and the sample:

  function convertInlineStylesToClasses(htmlContent) {
      // Create a dummy element to parse the HTML content
      const dummyElement = document.createElement('div');
      dummyElement.innerHTML = htmlContent;
  
      // Initialize a styleMap object to store unique styles and their corresponding class names
      const styleMap = new Map();
  
      // Generate a unique class name for a style
      function generateClassName(style) {
          return `style-${styleMap.size + 1}`;
      }
  
      // Traverse all elements and extract inline styles
      function traverse(element) {
          if (element.nodeType === Node.ELEMENT_NODE) {
              const styleAttribute = element.getAttribute('style');
              if (styleAttribute) {
                  if (!styleMap.has(styleAttribute)) {
                      const className = generateClassName(styleAttribute);
                      styleMap.set(styleAttribute, className);
                  }
                  const className = styleMap.get(styleAttribute);
                  element.classList.add(className);
                  element.removeAttribute('style');
              }
              for (const childElement of element.childNodes) {
                  traverse(childElement);
              }
          }
      }
  
      // Start traversing from the root element
      traverse(dummyElement);
  
      // Generate the <style> tag content
      let styleTagContent = '<style>';
      for (const [style, className] of styleMap) {
          styleTagContent += `.${className} {${style}}`;
      }
      styleTagContent += '</style>';
  
      // Combine the <style> tag and modified HTML content
      const finalHTML = styleTagContent + dummyElement.innerHTML;
  
      return finalHTML;
  }

  Sample: https://jscodemine.grapecity.com/share/7WBE8EhUjECFCcqxt9jB8A/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

  With this code snippet, you could achieve your expected behavior mentioned above. Please let us know if you face any issues.

  Yes, you could post the issues related to SpreadJS on the dedicated SpreadJS forum at: https://www.grapecity.com/forums/spreadjs

  Regards,

  Ankit