Question

我为以下printqrcode.component.ts脚本添加了 Angular 6 QR码打印窗口，但该样式部分在打印视图中不起作用任何人都知道如何为脚本正确添加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; }

Answer 1

最后我找到了一些解决方案，我删除了

外部.css文件和popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="printqrcode.component.css" /> QR Code </head><body onload="window.print()">' + innerContents + '</html>');

我使用 inline

添加了CSS部分

popupWinindow.document.write('<html><head><style>css here...</style> QR Code </head><body  onload="window.print()">' + innerContents + '</html>');

Answer 2

如果要使用CSS文件（例如styles.css），则应将其放置在assets文件夹中。然后，将link添加到打印页面：

<link rel="stylesheet" type="text/css" href="assets/styles.css" />

这对我有用。

添加的CSS部分的Angular Print窗口不起作用

2 个答案: