个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:28:57 31 4
gpt4 key购买 nike

我在我的应用程序中使用 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();

在打印窗口控制台上，它显示“无法加载资源:服务器响应状态为 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>

关于html - 使用 angular 2 组件中的 window.print() 将 CSS 类应用于打印窗口的 html 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44841793/

31 4 0
文章推荐： c++ - Rpp、Rinside 支持 R 包吗？
文章推荐： javascript - 锁定body滚动，但body中的某些div可以滚动
文章推荐： html - Foundation 4 (Zurb) 的各种问题 - 一页
文章推荐： javascript - 以 PDF 格式导出 HTML 数据表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com