.NET Razor 页面在尝试使用 JavaScript window.print() 时被破坏

Question

我的 .NET 应用程序中有这个剃须刀页面（它并不漂亮，但它是客户想要的，因为它看起来像是他们多年来一直使用的报告）

但是当用户点击打印时，它看起来像这样：

如您所见，我的很多专栏都被推到页面的一侧或由于某种原因重新排列。现在我并不是真正的前端开发人员，所以我假设我在创建这个页面时犯了一些错误。我究竟能做些什么来解决这个问题？为什么会发生这种情况？

详情页

@model Roadway_History.Models.Statewide

<!--            CUSTOM CSS          -->
<link href="~/Styles/Documents/DetailsStyle.css" type="text/css" rel="stylesheet">
<!--            GOOGLE ICONS          -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

@{
    ViewBag.Title = "Details";
}

<div class="container-fluid text-center topLabel">
    <div class="borderline">
        <h4 class="title"><strong>DETAIL RECORD - RP ROADWAY HISTORY FILE</strong></h4>
        <div class="row">
            <div class="col-md-1">
                <input class="text-left" type="button" onclick="javascript:window.print()" value="Print" runat="server" />
            </div>
            <div class="col-md-11">
                <p class="text-right">
                    <u>Current Date:</u>
                    <script>document.write(new Date().toLocaleDateString());</script>
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 text-left">
            <h5><strong>COUNTY:</strong> <span class="box-shadow px-3">@Html.DisplayFor(model => model.COUNTY)</span></h5>
        </div>
        <div class="col-md-3 text-right">
            <h5><strong>District:</strong>@Html.DisplayFor(model => model.District)</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-left">
            <h5><strong>Route No:</strong><span class="box-shadow px-4">@Html.DisplayFor(model => model.RouteNo)</span></h5>
        </div>
        <div class="col-md-4">
            <h5><strong>Sign System:</strong><span class="box-shadow px-4">@Html.DisplayFor(model => model.SignSys)</span></h5>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-left">
            <h5><strong>LocalName:</strong></h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-left">
            <h5 class="box-shadow px-3">@Html.DisplayFor(model => model.LocalName)</h5>
        </div>
        <div class="col-md-8"></div>
    </div>
    <div class="row">
        <div class="col-md-2 text-right">
            <h5><strong>Supp Des:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.SuppDes)</h5>
        </div>
        <div class="col-md-2 text-right">
            <h5><strong>Method:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.Method)</h5>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-2 text-left">
            @Html.DisplayFor(model => model.Duplicate_OK)
            <label class="form-check-label" for="duplicateCheck"><strong>Duplicate OK</strong></label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 text-right">
            <h5><strong>Date:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>What date??</h5>
        </div>
        <div class="col-md-2 text-right">
            <h5><strong>Original Location:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.OriginalL)</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-2 text-right">
            <h5><strong>Original D:</strong></h5>
        </div>
        <div class="col-md-6 text-left">
            <h6>@Html.DisplayFor(model => model.OriginalD)</h6>
        </div>
    </div>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>DOCUMENTS</strong></h5>
    </div>
    <h6 class="text-left">TABLE GOES HERE</h6>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>PROJECTS</strong></h5>
    </div>
    <h6 class="text-left">@Html.DisplayFor(model => model.Projects)</h6>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>COMMENTS</strong></h5>
    </div>
    <h6 class="text-left">@Html.DisplayFor(model => model.Comments)</h6>
</div>

<p style="margin-top: 20px">
    @Html.ActionLink("Back to List", "Index")
</p>

DetailsS​​tyle.css

.topLabel {
    margin-top: 50px;
}

.borderline {
    border-bottom: 4px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 40px
}

.box-shadow {
    margin-top: 40px;
    box-shadow: 0.15rem 0.15rem 0.25rem #000000;
}

Answer 1

并非所有 CSS 都可以打印。通常我所做的是有一个普通版本，然后是@media print {} 版本，以便我可以改进打印时的外观。例如，按钮之类的东西在打印过程中应该是可见的。