Question

我开发了一个angularjs web-app，我需要打印一个页面。所以：从主网页 - ＆gt; onclick i'window.open（）'一个新的选项卡，只包含我需要的打印元素 - ＆gt;在ctrl + p上打开chrome的prine预览并且bootstrap似乎不起作用，两个标题列（colmd-6），取全宽，它们是另一个而不是并排。

主要网页：

我使用window.open：

当用户点击打印图标（右上角）时，我使用window.open(..printfloorplan.html)来隔离布局图，到目前为止一直很好：

js片段：

        var newWin = window.open("/assets/modules/print/templates/printfloorplan.html");    
        var canvasImage = $scope.img_create(imgsrc,'floorplan','floorplan');
        //add canvas image to the DOM
        newWin.onload = function() {
            //here i update the DOM elements by:
           //newWin.document.getElementById('name).innerHtmle = val;
        };

printfloorplan.html （我在样式上使用media = print）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <LINK REL="stylesheet" TYPE="text/css" MEDIA="screen,print" HREF="../../../../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="../../../css/print.css">
    <title>print floorplan</title>
</head>
<body>
<div class="container" style="background-color: #d3d3d3;">
    <!--/*1st row `header`*/-->
    <div class="row" style="padding-bottom:10px;"> 
        <div class="col-md-6 a1"> 
            <table> 
                <tr> 
                    <td> 
                        <img id="logoframe" src="/assets/modules/login/img/start/logo_frame.png"> 
                        </td>
                    <td class="space" ><table>
                        <tr><td id="onomalabel"></td><td class="space" id="onomaevent"> <!-- onoma--></td></tr>
                        <tr><td id="datelabel"></td><td class="space" id="datestart"><!-- date--></td></tr>
                        <tr><td id="halllabel"></td><td class="space" id="hallname"><!-- aithousa--></td></tr>
                        </table></td>    
                    </tr>
                </table>
            </div>
        <div class="col-md-6 text-right a2" style="padding-top:22px"> 
            <img id="poweredbyLogo" src="/assets/modules/login/img/powered_by_logo_print.png" >
            </div>
        </div>
    <!--/*2nd row floorplan image*/-->
    <div class="row"> 
        <div class="col-md-12 text-center" id="floorplanimg"></div>
        </div>
    </div>
</body>
</html>

所以新窗口会按照我想要的方式打开，并带有所有样式

问题出现在Ctrl + p：

上

虽然我使用了media = print

，但似乎这里没有识别引导程序

任何帮助都将不胜感激，谢谢。

为什么Bootstrap样式在Chrome的打印预览中丢失了

主要网页：

我使用window.open：

问题出现在Ctrl + p：

0 个答案: