remove style inline when print page-CodePudding

I have 2 different design models for display and printing, both of which are together. I want my line styles to be deleted when the user prints the page.

My code for display mode is as follows:

body {
  background-color: #fff;
  font-family: 'iransansx' !important;
}

hr {
  margin: 0px;
  border-top: 1px dashed #707070;
}

#print {
  width: 4% !important;
  position: fixed;
  left: 38%;
  top: 4%;
  padding: 0px !important;
  min-height: 5%;
}

.Green {
  color: #2A9B52 !important;
}

.Red {
  color: #E50000 !important;
}

.Master {
  width: 100%;
  height: auto;
  padding: 2px 10px;
  font-size: 2vw;
  margin: auto;
  direction: rtl;
  font-weight: 800;
  text-align: right;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  font-family: 'iransansx' !important;
}

.MS_C {
  width: 100%;
  align-items: center;
  text-align: center;
  margin: 1% auto;
  color: #5C5C5C;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.img {
  width: 30%;
  height: auto;
  display: flex;
  margin: auto;
  align-items: center !important;
}

.Pic {
  width: 10%;
}

.TMDetail {
  width: 100%;
  height: 100%;
  direction: rtl;
  font-weight: 600;
  border-collapse: collapse;
  text-align: right;
  font-family: 'iransansx' !important;
}

.td {
  width: 100%;
  padding: 1% 5%;
  text-align: right;
  font-family: 'iransansx' !important;
}

@media print {

  .Show {
    display: none !important;
  }

  .ShowPrin {
    display: flex !important;
  }

  .Pic {
    width: 15%;
  }

}

<div >
  <div >
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png">
  </div>
  <div  style="display:none;">
    <img  src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
  </div>
  <div >
    <span >fldStatusName</span>
  </div>
  <div > fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime</div>
  <div >
    <table >
      <tr >
        <td  style="display:none;">
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png"> &nbsp;
          fldStatusName
        </td>
      </tr>
      <tr  style="display:none;">
        <td >fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime </td>
      </tr>
      <tr  style="display:none;">
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td > fldSourceID </td>
      </tr>
      <tr >
        <td >fldDestinationType fldDestination </td>
      </tr>
      <tr >
        <td >fldBankName </td>
      </tr>
      <tr >
        <td >fldName fldDestinationName </td>
      </tr>
      <tr >
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td ><span > fldPrice </span></td>
      </tr>
      <tr >
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td >fldKarmozdName : fldKarmozd </td>
      </tr>
      <tr >
        <td >fldID </td>
      </tr>
      <tr >
        <td >fldID2 </td>
      </tr>
      <tr >
        <td >fldDescription </td>
      </tr>
      <tr >
        <td >
          <img  src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
        </td>
      </tr>
    </table>
  </div>
</div>

My preferred output for when the user prints is as follows:

body {
  background-color: #fff;
  font-family: 'iransansx' !important;
}

hr {
  margin: 0px;
  border-top: 1px dashed #707070;
}

#print {
  width: 4% !important;
  position: fixed;
  left: 38%;
  top: 4%;
  padding: 0px !important;
  min-height: 5%;
}

.Green {
  color: #2A9B52 !important;
}

.Red {
  color: #E50000 !important;
}

.Master {
  width: 100%;
  height: auto;
  padding: 2px 10px;
  font-size: 2vw;
  margin: auto;
  direction: rtl;
  font-weight: 800;
  text-align: right;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  font-family: 'iransansx' !important;
}

.MS_C {
  width: 100%;
  align-items: center;
  text-align: center;
  margin: 1% auto;
  color: #5C5C5C;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

  .Show {
    display: none !important;
  }

  .ShowPrin {
    display: flex !important;
  }

.img {
  width: 30%;
  height: auto;
  display: flex;
  margin: auto;
  align-items: center !important;
}

.Pic {
  width: 10%;
}

.TMDetail {
  width: 100%;
  height: 100%;
  direction: rtl;
  font-weight: 600;
  border-collapse: collapse;
  text-align: right;
  font-family: 'iransansx' !important;
}

.td {
  width: 100%;
  padding: 1% 5%;
  text-align: right;
  font-family: 'iransansx' !important;
}

<div >
  <div >
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png">
  </div>
  <div >
    <img  src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
  </div>
  <div >
    <span >fldStatusName</span>
  </div>
  <div > fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime</div>
  <div >
    <table >
      <tr >
        <td >
          <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png"> &nbsp;
          fldStatusName
        </td>
      </tr>
      <tr >
        <td >fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime </td>
      </tr>
      <tr >
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td >fldSourceID </td>
      </tr>
      <tr >
        <td >fldDestinationType fldDestination </td>
      </tr>
      <tr >
        <td >fldBankName </td>
      </tr>
      <tr >
        <td >fldName fldDestinationName </td>
      </tr>
      <tr >
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td ><span > fldPrice </span></td>
      </tr>
      <tr >
        <td >
          <hr>
        </td>
      </tr>
      <tr >
        <td >fldKarmozdName : fldKarmozd </td>
      </tr>
      <tr >
        <td > fldID </td>
      </tr>
      <tr >
        <td >fldID </td>
      </tr>
      <tr >
        <td >fldDescription </td>
      </tr>
      <tr >
        <td >
          <img  src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
        </td>
      </tr>
    </table>
  </div>
</div>

I used @media print but have not yet received a response in the output

I used @media print but have not yet received a response in the output So I used the following jquery code, but none of it works in my code.

$('.ShowPrint').css('display', 'flex !important');
$(".ShowPrint").removeInlineCss("");
$(".ShowPrint").attr("style", "");
$('.ShowPrint').removeStyle('display');
$('.ShowPrint').style.removeAttribute();
document.getElementsByClassName('ShowPrint').removeInlineCss('display');
$("div:inlineStyle(display:none)").hide();
$("tr:inlineStyle(display:none)").hide();

Please help me, where is my mistake ???

To see the code in jsfiddle : My Code

CodePudding user response：

Add Class notprintable in html that you want to display in print. Then Add below javascript. Basically , below javascript will hide html which have notprintable class during print.

(function () {
        var beforePrint = function () {
            $(".notprintable").hide();
            console.log('Functionality to run before printing.');

        };
        var afterPrint = function () {
            $(".notprintable").show();
            console.log('Functionality to run after printing');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
    }());