Printing the contents of a DIV including Fluent UI

Question

I would like to be able to print all the contents of a DIV. I have found a very similar post, and this answer has been very usefull: https://stackoverflow.com/a/2255438/10447665

However, in my SPFx solution I'm using Fluent UI, and it seems like the styling isn't working when printing. I am using DetailsLists, Text and such. I also use Buttons, but would like to hide these from the print. So if you have any ideas for this also, let me know.

This is currently my code:

var myWindow = window.open('', 'PRINT', 'height=1000,width=1400');

myWindow.document.write(`<html><head><title>${this.state.selectedCustomer.Title}</title>`);
myWindow.document.write(`</head><body >`);
myWindow.document.write(document.getElementById("customerInformation").innerHTML);
myWindow.document.write(`</body></html>`);

myWindow.document.close();
myWindow.focus();

myWindow.print();
myWindow.close();

The result is not a table, like on SharePoint. The result looks someting like this:

Technical Responsible
Contract Responsible
Locations
... (Loads of information redacted to shorten the post length)
{Name of Technical Responsible}
{Name of Contract Responsible}
{Locations}

The document.body looks like this, and contains alot of styling and classes, as you can see a snippet of here:

<div class="ms-Viewport" style="min-width: 1px; min-height: 1px;">
  <div class="ms-DetailsList is-horizontalConstrained root-170" data-automationid="DetailsList" data-is-scrollable="false">
    <div role="grid" aria-rowcount="2" aria-colcount="7" aria-readonly="true">
      <div role="presentation" class="ms-DetailsList-headerWrapper"><div role="row" class="ms-FocusZone css-81 ms-DetailsHeader root-172" data-automationid="DetailsHeader" data-focuszone-id="FocusZone28"><div role="columnheader" aria-sort="none" aria-colindex="1" class="ms-DetailsHeader-cell is-actionable root-188" data-is-draggable="false" draggable="false" data-automationid="ColumnsHeaderColumn" data-item-key="Technical Responsible" style="width: 220px;"><span class="cellTooltip-196">
        <span id="header27-Technical Responsible" aria-labelledby="header27-Technical Responsible-name" class="ms-DetailsHeader-cellTitle cellTitle-194" data-is-focusable="true" aria-haspopup="false" tabindex="0">
          <span id="header27-Technical Responsible-name" class="ms-DetailsHeader-cellName cellName-195">
            Technical Responsible
          </span>
        </span>
      </span>
   </div>
   <div role="columnheader" aria-sort="none" aria-colindex="2" class="ms-DetailsHeader-cell is-actionable root-188" data-is-draggable="false" draggable="false" data-automationid="ColumnsHeaderColumn" data-item-key="Contract Responsible" style="width: 220px;">
     <span class="cellTooltip-196">
       <span id="header27-Contract Responsible" aria-labelledby="header27-Contract Responsible-name" class="ms-DetailsHeader-cellTitle cellTitle-194" data-is-focusable="true" aria-haspopup="false" tabindex="-1">
         <span id="header27-Contract Responsible-name" class="ms-DetailsHeader-cellName cellName-195">
           Contract Responsible
         </span>
       </span>
     </span>
   </div>
   <div role="columnheader" aria-sort="none" aria-colindex="3" class="ms-DetailsHeader-cell is-actionable root-188" data-is-draggable="false" draggable="false" data-automationid="ColumnsHeaderColumn" data-item-key="Locations" style="width: 220px;">
     <span class="cellTooltip-196">
       <span id="header27-Locations" aria-labelledby="header27-Locations-name" class="ms-DetailsHeader-cellTitle cellTitle-194" data-is-focusable="true" aria-haspopup="false" tabindex="-1">
         <span id="header27-Locations-name" class="ms-DetailsHeader-cellName cellName-195">
           Locations
         </span>
       </span>
     </span>
   </div>

Printing the contents of a DIV including Fluent UI

0 Answers0