Как отобразить полный html страница включает стиль внутри тега head - PullRequest
Новая
       29

Как отобразить полный html страница включает стиль внутри тега head

0 голосов
/ 14 февраля 2020

Я работаю над проектом angular и мне нужно отобразить полную страницу html (включая элементы стиля внутри тега head) в открывающемся модале. Страница, которую мне нужно отобразить, представляет собой документ XML, преобразованный с помощью XSLT в страницу HTML. Пытался использовать iframe, используя [srcDoc], но angular отображал только тег body, а не стили в теге head.

Мне нужна помощь, пожалуйста.

документ начинается с ниже 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-16">
    <title>e-Fatura</title>
    <style type="text/css">
        .ph {
            overflow: hidden;
            max-height: 200px;
        }

        .ph7 {
            text-align: center;
            margin-bottom: 18px;
        }

        .ph8 img {
            margin-bottom: 18px;
        }

        .ph10 {
            float: left;
            width: 295px;
            margin-top: 14px;
            margin-right: 12px;
            padding: 8px;
        }

        body {
            margin: 7px 0 10px 0;
            text-align: center;
            background-color: #BBBBBB;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAABCElEQVR42p1VWw7DIAzL/S/Z10E2pZKRZ8UB9oEKxaSJbdJ4nudzHMcYucY73VvB5Po8z3ce13UNMB/SAdzOXtz33WaGwzlyXuHzHfDAvcGrA1ryLj2YhwvaacFUgF/O2gbXIFwVzzt9Bi1OTDdXR/C+VhFdgB3K+IkKY8XnSlNmqB+rqg8+xJ5ncWbcMg62zASiysxVoTp0exknVqw349hVEaq647zyuDPACD7LqhJu9aZG9cXO9xBsdg9+3AKFXa9gB610xpcW7WTVgIM0ASdmSYvLmC+Po2VLUCcyV8F9vAzeZbvbzLR5hevFDKrWjOO/EKr5uaH//IAVx3oMWhg847167yz8BYJMf2ivVbLJAAAAAElFTkSuQmCC);
        }

        table {
            font-size: 12px;
        }

        .documentContainer a {
            pointer-events: none;
        }

        .documentContainer,
        .documentContainerOuter {
            margin: 0 auto;
        }

        @media screen {
            body {
                color: #666;
            }

            .documentContainer {
                max-width: 1000px;
                min-width: 845px;
                overflow: hidden;
                text-align: left;
                box-sizing: border-box;
                display: inline-block;
                -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                background-color: white;
                position: relative;
                padding: 20px 20px 20px 28px;
            }

            .documentContainer:before,
            .documentContainer:after {
                content: "";
                position: absolute;
                z-index: -1;
                -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
                -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
                top: 50%;
                bottom: 0;
                left: 10px;
                right: 10px;
                -moz-border-radius: 100px / 10px;
                border-radius: 100px / 10px;
            }

            .documentContainer:after {
                right: 10px;
                left: auto;
                -webkit-transform: skew(8deg) rotate(3deg);
                -moz-transform: skew(8deg) rotate(3deg);
                -ms-transform: skew(8deg) rotate(3deg);
                -o-transform: skew(8deg) rotate(3deg);
                transform: skew(8deg) rotate(3deg);
            }
        }

        #ustBolum {
            margin-top: 27px;
            margin-bottom: 15px;
        }

        .efaturaLogo {
            text-align: center;
            display: inline-block;
        }

        .efaturaLogo img {
            width: 70px;
        }

        .efaturaLogo h1 {
            font-size: 14px;
            line-height: 14px;
            margin: 4px 0 0 0;
        }

        .kutu {
            vertical-align: top;
        }

        .kutu table {
            float: none;
        }

        .gonderici {
            display: inline-block;
            border-bottom: 1px dotted #CCC;
            width: 340px;
            padding: 8px;
            box-sizing: border-box;
        }

        .gonderici .partyName {
            font-weight: bold;
        }

        .gonderici table td {
            padding: 0px;
        }

        .alici {
            width: 340px;
            padding: 8px 4px 4px 6px;
            box-sizing: border-box;
        }

        .alici .customerTitle {
            font-weight: bold;
        }

        .alici .kutu {
            border: 1px solid #CCC;
            background-color: #F4F4F4;
        }

        #ETTN {
            margin-top: 7px;
        }

        #despatchTable {
            float: right;
        }

        #despatchTable .irsaliyeTablo th,
        #despatchTable .irsaliyeTablo td,
        #despatchTable .irsaliyeTablo tr {
            border: 1px solid #cecece;
            padding: 2px;
        }

        #despatchTable img {
            margin: 0 auto 20px auto;
            display: block;
        }

        #despatchTable th {
            text-align: left;
        }

        .irsaliyeTablo {
            width: 100%;
            border-collapse: collapse;
        }

        #despatchTable .placeHolder.companyLogo img {
            margin-bottom: 18px;
        }

        #toplamlarContainer {
            overflow: hidden;
        }

        .toplamlar {
            float: right;
            width: 100%;
        }

        .toplamlar tr {
            text-align: right;
        }

        .toplamlar th {
            font-weight: normal;
            text-align: right;
        }

        .toplamlar table {
            width: 238px;
            margin-top: 14px;
            border-spacing: 0;
        }

        .toplamlar table td {
            font-weight: bold;
            width: 25%;
            white-space: nowrap;
            min-width: 55px;
            vertical-align: top;

            .toplamlar table td:nth-child(1) {
                width: 75%;
                white-space: nowrap;
            }

            .toplamlar table td:nth-child(2) {
                font-weight: bold;
                width: 25%;
                white-space: nowrap;
                min-width: 55px;
                vertical-align: top;
            }
        }

        .toplamlar table th,
        .toplamlar table td {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            padding: 3px;
        }

        .toplamlar table th {
            white-space: nowrap;
            border-right: none;
        }

        .toplamlar table th.is-long-true,
        #malHizmetTablosu>tbody>tr>td .is-long-true {
            white-space: normal;
        }

        .toplamlar table tr:first-child th,
        .toplamlar table tr:first-child td {
            border-top: 1px solid #ccc;
        }

        .toplamlar table td span {
            font-weight: normal;
            font-size: 12px;
            color: #7C7C7C;
        }

        tr.payableAmount th:first-child {
            background-color: #f6f6f6;
        }

        tr.payableAmount td:nth-child(1) {
            background-color: #f6f6f6;
            border: 1px solid #e3e3e3;
            border-left: 0;
            border-right: 0;
        }

        tr.payableAmount td:nth-child(2) {
            background-color: #f6f6f6;
            border: 1px solid #e3e3e3;
            border-left: 0;
            border-right: 0;
        }

        .toplamlar table td {
            padding: 1px 3px;
        }

        .toplamlar .lineTableBudgetTd span {
            font-weight: bold;
        }

        tr.payableAmount td {
            background-color: #f6f6f6;
        }

        .toplamlar>div {
            display: inline-block;
        }

        .toplamTablo {
            margin-left: 31px;
            float: right;
        }

        #notlar {
            margin-top: 14px;
            border-top: 1px solid #DDD;
            overflow: hidden;
            padding-top: 8px;
            padding-bottom: 2px;
        }

        #notlar table {
            border: none;
            background: none;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .box {
            display: inline-block;
            width: 33%;
            box-sizing: border-box;
            vertical-align: top;
        }

        #b1 {
            width: 40%;
        }

        #b2 {
            width: 25%;
        }

        #b3 {
            width: 255px;
            float: right;
        }

        #kunye {
            border-spacing: 0;
        }

        #kunye td {
            padding: 3px;
            width: 100%;
        }

        #kunye th {
            vertical-align: top;
            font-weight: bold;
            padding: 3px;
            white-space: nowrap;
            border-top: none;
            border-right: none;
            text-align: left;
        }

        #kunye td:nth-child(2) {
            word-break: break-all;
        }

        .satirlar {
            margin-top: 20px;
        }

        #malHizmetTablosu {
            width: 100%;
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            background: #fff;
            border-collapse: collapse;
            text-align: right;
        }

        #malHizmetTablosu>tbody>tr>th {
            font-weight: bold;
            padding: 2px;
            text-align: right;
            font-size: 9px;
            color: #384848;
            padding-left: 3px;
            border-bottom: 2px solid #AAAAAA;
            background-color: #DFDFDF;
            border-right: 1px solid #B8B8B8;
            border-top: 1px solid #C5C5C5;
            padding-right: 5px;
            vertical-align: middle;
            min-height: 35px;
        }

        #malHizmetTablosu>tbody>tr:first-child>th:first-child {
            border-left: 1px solid #B8B8B8;
        }

        #malHizmetTablosu>tbody>tr:first-child>th.mhColumn {
            min-width: 72px;
        }

        #malHizmetTablosu>tbody>th>.thTopTitle {
            text-align: center;
            width: 89px;
        }

        #malHizmetTablosu>tbody>th .thSubTitle {
            width: 47px;
            display: inline-block;
            text-align: right;
        }

        #malHizmetTablosu>tbody>th .thSubTitle.HF {
            width: 36px;
        }

        #malHizmetTablosu>tbody>tr>th.alignLeft {
            text-align: left;
            width: 50%;
        }

        #malHizmetTablosu>tbody>tr>td {
            white-space: nowrap;
            font-size: 11px;
            padding-left: 3px;
            border-bottom: 1px solid #ccc;
            color: #000;
            border-right: 1px solid #ccc;
            padding-right: 3px;
            text-align: right;
            height: 25px;
        }

        #malHizmetTablosu>tbody>tr>td.iskontoOrani {
            padding-left: 0;
            padding-right: 0;
        }

        #malHizmetTablosu>tbody>tr>td.iskontoOrani td {
            text-align: center;
        }

        #malHizmetTablosu>tbody>tr:hover>td {
            border-right: 1px solid #969696;
            border-bottom: 1px solid #969696;
            border-top: 1px solid #969696;
        }

        #malHizmetTablosu>tbody>tr>td.wrap {
            white-space: normal;
            text-align: left;
        }

        #malHizmetTablosu>tbody>tr>td:first-child,
        #malHizmetTablosu>tbody>tr>th:first-child {
            border-left: 1px solid #B8B8B8;
        }

        #malHizmetTablosu>tbody>tr:hover>td {
            background-color: #D1D1D1 !important;
            cursor: default;
        }

        #malHizmetTablosu>tbody>tr:nth-child(even)>td {
            background-color: #FFF
        }

        #malHizmetTablosu>tbody>tr:nth-child(odd)>td {
            background-color: #EEE
        }

        .sumValue {
            white-space: nowrap;
        }

        .iskontoOraniHeader,
        .iskontoOraniDegerler {
            width: 100%;
            border-spacing: 0;
        }

        .iskontoOraniHeader td {
            border-top: 1px solid #969696;
        }

        .iskontoOraniHeader td,
        .iskontoOraniDegerler td {
            border-left: 1px solid #969696;
        }

        .iskontoOraniHeader td:first-child,
        .iskontoOraniDegerler td:first-child {
            border-left: none;
        }

        .bankaBilgileri {
            float: right;
            font-size: 11px;
            line-height: 11px;
            margin-left: 8px;
        }

        .bankaBilgileri th {
            font-weight: normal;
            text-align: left;
        }

        .bankaBilgileri tbody tr:first-child th {
            border-bottom: 1px solid gray;
        }

        @media print {
            body {
                color: #000;
                text-align: left;
                background: none;
                background-color: #ffffff;
                margin: 0;
            }

            .documentContainer {
                padding: 0;
                min-height: initial;
                width: 845px !important;
            }

            #malHizmetTablosu {
                width: 845px;
            }
        }
    </style>
</head>

<body> .........

А также я использую компонент дизайна ng-zorro.

...