Я добавил Angular 6 Окно печати QR-кода для следующих printqrcode.component.ts сценариев, но эта часть стиля не работает в режиме печати
Любой знает, как правильно добавить printqrcode.component.css для сценариев
Я получил ошибку консоли Google
VM53323 местоположения: 1 Отказался от применения стиля с
'http://localhost:4200/printqrcode.component.css' потому что его MIME
type ('text / html') не является поддерживаемым типом MIME таблицы стилей и является строгим
Проверка MIME включена.
printqrcode.component.ts
printSelectedArea(){
console.log('Print selected Area!');
let innerContents = document.getElementById('printToPDF').innerHTML;
console.log('innerContents : ',innerContents);
let popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="printqrcode.component.css" /> QR Code </head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
printqrcode.component.css
.custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 0rem;
}
/*QR CODE*/
.img-responsive {
display: inline-block;
}
/*QR CODE*/
.qr-cde .card {background:#f4f6f9;}
.rounds {
position: relative;
}
.rounds label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
.rounds label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.rounds input[type="checkbox"] {
visibility: hidden;
}
.rounds input[type="checkbox"]:checked + label {
background-color: #06d79c;
border-color: #06d79c;
}
.rounds input[type="checkbox"]:checked + label:after {
opacity: 1;
}
.qr-grt {padding: 60px;}
@media (min-width: 768px)
{
.col-md-3 {
flex: 0 0 25%;
max-width: 40%;
}}
.print-new-section .col-3 {
flex: 0 0 25%;
max-width: 25%;
margin: 5px 5px; border: 1px solid lightgrey;
}
span qrcode.center {
display: block;
margin-left: auto; width: 200px;
margin-right: auto;border: 1px solid #e8e8e8;
margin-right: auto;
}
.qr-spantext {color: black;
font-weight: bold;}
.rm-nme {font-size: 12px; color: #1c2128; text-align: center; }
.lc-name {font-size: 12px; color: #1c2128; text-align: center; }