首页 文章

使用角度2组件中的window.print()将CSS类应用于打印窗口的html内容

提问于
浏览
0

我在我的应用程序中使用角度2 . 我有一个名为test.component.ts的组件,此组件的templateurl是test.component.html,styleurl是test.component.css . 我在test.component.html页面上有一个打印按钮 . 我需要使用打印按钮在同一页面(test.component.html)上打印名为'print-data'的div的内容 . div'print-data'使用test.component.css文件中定义的css类 . 我可以在浏览器上看到应用的css,但是当我点击打印按钮时,打印窗口会在div中显示文本而不应用任何css . 类型脚本代码是:

var mywindow = window.open('', 'PRINT', 'height=800,width=800');
let printdiv = document.getElementById('print-data');
mywindow.document.write(printdiv.innerHTML);
mywindow.focus();
mywindow.print();

当我尝试将链接附加到test.component.css时,如下所示:

var mywindow = window.open('', 'PRINT', 'height=800,width=800');
let printdiv = document.getElementById('print-data');
mywindow.document.write(`<html><head><link rel="stylesheet" 
type="text/css" href="test.component.css" /></head><body>`);
mywindow.document.write(printdiv.innerHTML);
mywindow.document.write('</body></html>');
mywindow.focus();
mywindow.print();

在打印窗口控制台上,它显示“无法加载资源:服务器响应状态为404(未找到)test.component.css” .

我无法在打印窗口内容中附加我的test.component.css文件类 . 请帮帮我 .

1 回答

  • 0
    <form id="form1">
           <div id="dvContainer">
           </di>
         </form>
    
    
      <!-- imprimir hoja -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<head><title>LISTA DE VERIFICACIÓN</title> \
             \ <style> body {font-size: 16px;font-weight: 400;line-height: 24px;letter-spacing: 1px;height: 100%;font-family:"Poppins", sans-serif;color:#333;}.formspace1{margin-bottom: 10px;}.modal-content{box-shadow: 0 5px 15px rgba(0,0,0,.5);position:relative;background-color: #fff;background-clip: padding-box;border: 1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;}#modalColor{background-color: #f0ad4e !important;text-align: center !important;}.modal-header{padding: 15px;border-bottom: 1px solid #e5e5e5;}.modal-title{margin: 0;line-height: 1.42857143;}h1, h2, h3, h4, h5, h6 {font-family: "Poppins", sans-serif;} .h4,h4{font-size: 18px;}.btext{font-size: 24px !important;}b,strong {font-weight: 700;} .margin-x{margin-top: 0px;}modal-body{position: relative;padding: 15px;} *{-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .panel-warning{border-color: #faebcc;}.panel {margin-bottom: 20px;background-color: #fff;border: 1px solid transparent;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);box-shadow: 0 1px 1px rgba(0,0,0,.05);}.panel-default {border-color: #ddd;}.panel-warning>.panel-heading{color: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;padding: 10px 15px;border-bottom: 1px solid transparent;border-top-left-radius: 3px;border-top-right-radius: 3px;}.panel>.table-responsive:last-child>.table:last-child, .panel>.table:last-child{border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;}.panel>.panel-collapse>.table, .panel>.table, .panel>.table-responsive>.table {margin-bottom: 0;}.table {width: 100%;max-width: 100%;margin-bottom: 20px;background-color: transparent; border-spacing: 0;border-collapse: collapse;white-space: normal;line-height: normal;font-weight: normal;font-size: medium;font-style: normal;color: -internal-quirk-inherit;text-align: start; font-variant: normal;display: table;border-color: grey;}                                   thead{display: table-header-group;vertical-align: middle;border-color: inherit;}tr {display:table-row;vertical-align: inherit;border-color: inherit;}.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {border-top: 0;}     .table>thead>tr>th{vertical-align:bottom;border-bottom: 2px solid #ddd;}.text-center{text-align: center;}tr {display: table-row;vertical-align: inherit;    border-color: inherit;}tbody {display: table-row-group; vertical-align: middle;border-color: inherit;}.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {padding: 8px;line-height: 1.42857143;vertical-align: top;border-top: 1px solid #ddd;}td[Attributes Style] {width: 168px;}.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {padding-top: 7px;    margin-top: 0;margin-bottom: 0;}.checkbox-inline, .radio-inline {position: relative;    display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: 400;vertical-align: middle;         cursor: pointer;}label {display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;}.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {position: absolute;margin-top: 4px\9;margin-left: -20px;}nput[type=checkbox], input[type=radio] {margin: 4px 0 0;margin-top: 1px\9;line-height: normal;box-sizing: border-box;padding: 0;}button, input, select, textarea {font-family: inherit;font-size: inherit; line-height: inherit;}button, input, optgroup, select, textarea {margin: 0;font: inherit;          color: inherit;}.text-justify {text-align: justify;}tbody {display: table-row-group;vertical-align: middle; border-color: inherit;}.form-horizontal .form-group { margin-right: -15px; margin-left: -15px;}.formspace { margin-bottom: 4px;}@media (min-width: 768px).col-sm-offset-6 {margin-left: 50%;}@media (min-width: 768px).col-sm-3 {width: 25%;}.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {position: relative; min-height: 1px;padding-right: 15px;padding-left: 15px;}@media (min-width: 768px).col-sm-offset-6 {margin-left: 50%;}.navbar-btn {margin-top: 8px;    margin-bottom: 8px;} .btn-group-lg>.btn, .btn-lg {padding: 10px 16px;font-size: 18px;line-height: 1.3333333; border-radius: 6px;} btn-warning {color: #fff;background-color: #f0ad4e;        border-color: #eea236;}.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px; font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;    -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;    background-image: none; border: 1px solid transparent; border-radius: 4px;}.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}.anchoall {width:195px; background-color: #f0ad4e;margin-bottom: 8px;padding: 10px 16px;font-size: 18px;line-height: 1.3333333;border-radius: 6px;border-color: #eea236;}.col-sm-offset-6{margin-left:50%} .navbar-btn {    margin-top: 8px; margin-bottom: 8px;margin-left: 510px;}.table>thead>tr>th {vertical-align: bottom;    border-bottom: 2px solid #ddd;}</style> \
            </head>');     
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
            });
        </script>
    

相关问题