Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用angular 2组件中的window.print()将CSS类应用于打印窗口的html内容_Html_Css_Angular_Printing - Fatal编程技术网

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

使用angular 2组件中的window.print()将CSS类应用于打印窗口的html内容,html,css,angular,printing,Html,Css,Angular,Printing,我在应用程序中使用angular 2。我有一个名为test.component.ts的组件,这个组件的templateurl是test.component.html,styleurl是test.component.css。 我在test.component.html页面上有一个打印按钮。我需要使用“打印”按钮在同一页(test.component.html)上打印名为“打印数据”的div的内容。div“print data”使用test.component.css文件中定义的css类。我可以在浏

我在应用程序中使用angular 2。我有一个名为test.component.ts的组件,这个组件的templateurl是test.component.html,styleurl是test.component.css。 我在test.component.html页面上有一个打印按钮。我需要使用“打印”按钮在同一页(test.component.html)上打印名为“打印数据”的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();
var mywindow=window.open(''PRINT','height=800,width=800');
让printdiv=document.getElementById('print-data');
mywindow.document.write(``);
mywindow.document.write(printdiv.innerHTML);
mywindow.document.write(“”);
mywindow.focus();
mywindow.print();
在打印窗口控制台上,它显示“加载资源失败:服务器响应状态为404(未找到)test.component.css”

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


     <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>
$(“#btnPrint”).live(“单击”,函数(){ var divContents=$(“#dvContainer”).html(); var printWindow=window.open(“”,’高度=400,宽度=800’); printWindow.document.write('LISTA DE VERIFICACIÓN\ \正文{font size:16px;font-weight:400;行高:24px;字母间距:1px;高度:100%;字体系列:“Poppins”,无衬线;颜色:#333;}.formspace1{margin-bottom:10px;}.模式内容{box阴影:0 5px 15px rgba(0,0,5);位置:相对;背景颜色:#fff;背景剪辑:填充框;边框:1px实心rgba(0,0,0,0,2);边框半径:6px;轮廓:0;}modalColor{背景色:f0ad4e!重要;文本对齐:居中!重要;}模式标题{填充:15px;边框底部:1px实心}e5e5e5;}模式标题{边距:0;线条高度:1.42857143;}h1、h2、h3、h4、h5、h6{字体系列:“Poppins”,无衬线;}.h4、h4}字体大小:18px;}字体大小:24px;}重要,px;}{font-weight:700;}.margin-x{margin-top:0px;}模态体{位置:相对;填充:15px;}*{-webkit框大小:边框框;-moz框大小:边框框;框大小:边框框;}。面板警告{边框颜色:#faebcc;}。面板{页边距底部:20px;背景色:#fff;边框:1px实心透明;边框半径:4px;-webkit方框阴影:0 1px 1px rgba(0,0,0,05);方框阴影:0 1px 1px rgba(0,0,0,0,05)}。面板默认值{边框颜色:#ddd;}。面板警告>。面板标题{颜色:#8a6d3b;背景颜色:#fcf8e3;边框颜色:#faebcc;填充:10px 15px;边框底部:1px实心透明;边框左上半径:3px;边框右上半径:3px;}。面板>。表格响应:最后一个子项>。表格:最后一个子项{边框右下半径:3px;边框左下半径:3px;}.panel>.panel collapse>.table、.panel>.table、.panel>.table>.table{margin bottom:0;}.table{宽度:100%;最大宽度:100%;页边距底部:20px;背景色:透明;边框间距:0;边框折叠:折叠;空白:正常;线宽:正常;字体大小:中等;字体样式:正常;颜色:-内部怪癖继承;文本对齐:开始;字体变体:正常;显示:表格;边框颜色:灰色;}thead{display:表格标题组;垂直对齐:中间;边框颜色:继承;}tr{display:表格行;垂直对齐:继承;边框颜色:继承;}.table>caption+thead>tr:first child>td、.table>caption+thead>tr:first child>th、.table>colgroup+thead>tr:first child>th、.table>thead:first child>tr:first child>td、.table>thead:first child>tr:first child>th{边框顶部:0;}。table>thead>tr>th{垂直对齐:底部;边框底部:2px实心}.text居中{text align:center;}tr{display:table row;vertical align:inherit;border color:inherit;}tbody{display:table row组;vertical align:middle;border color:inherit;}.table>tbody>tr>th、.table>tfoot>tr>td、.table>thad>tr>th、.table>{填充:8px;线条高度:1.42857143;垂直对齐:顶部;边框顶部:1px实心#ddd;}td[属性样式]{宽度:168px;}.form horizontal.checkbox、.form horizontal.checkbox inline、.form horizontal.radio、.form horizontal.radio inline{填充顶部:7px;页边距顶部:0;页边距底部:0;}.checkbox inline、.radio inline{位置:相对;显示:内联块;左填充:20px;页边距底部:0;字体重量:400;垂直对齐:中间;光标:指针;}标签{显示:内联块;最大宽度:100%;页边距底部:5px;字体重量:700;}。复选框输入[type=checkbox],.checkbox内联输入[type=checkbox],.radio输入[type=radio],.radio内联输入[type=radio]{位置:绝对;边距顶部:4px\9;边距左侧:-20px;}输入[type=radio]{边距:4px 0;边距顶部:1px\9;行高:正常;框大小:边框框;填充:0;}按钮,输入,选择,文本区域{字体系列:继承;字体大小:继承;行高:继承;}按钮,输入,选项组,选择,文本区域{页边距:0;字体:继承;颜色:继承;}。文本对齐{文本对齐:对齐;}正文{显示:表格行组;垂直对齐:中间;边框颜色:继承;}。窗体水平。窗体组{页边距右侧:-15px;页边距左侧:-15px;}。窗体空间{页边距底部:4px;}@media(最小宽度:768px)。col-sm-offset-6{页边距左侧:50%;}@media(最小宽度:768px)col-sm-3{宽度: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-9、.col-md-1、.col-md-10、.col-md-11、.col-md-12、.col-md-2、.col-md-5、.col-md-6、。