时间戳

首页 > 解决方案 > 在 MVC 项目中，为什么 jQuery print() 函数无法加载 css

jquery - 在 MVC 项目中，为什么 jQuery print() 函数无法加载 css

问题描述

在 MVC 项目中需要打印一个局部视图。对于使用以下 jQuery 语法的打印，它的工作正常问题是无法加载 CSS、引导程序和内联。

如何为 jQuery Print 功能启用 CSS？

在此处输入图像描述

jQuery打印功能

<script>

    $("document").ready(function (e) {


        $('body').on("click", "#btnPrint", function (e) {

            $.ajax({
                cache: false,
                async: true,
                type: 'GET',
                data: {},
                url: '/Home/QuickReportViewPDF',

                success: function (response) {
                    debugger;
                    var printWindow = window.open('', '', 'height=600,width=900');
                    printWindow.document.write('<html><head><title>Medical Hub</title>');
                    printWindow.document.write('</head><body >');
                    printWindow.document.write(response);
                    printWindow.document.write('</body></html>');
                    printWindow.document.close();
                    printWindow.print();
                },
                error: function (data) {


                }
            });
        });

    });


</script>

家庭控制器

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult QuickReportViewPDF()
        {
            return PartialView("~/Views/Home/Index.cshtml");
        }
    }

索引.chhtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>

    <button id="btnPrint" class="btn btn-primary">Print Report</button>
    <div class="row">
        <div class="col-md-12">
            <div id="first" class="redscore col-md-4" data-high="400" data-low="300" data-score="399" style="background-color: red;min-height: 20px; ">
                <div class="arrow"></div>
            </div>
            <div id="second" class="yelowscore col-md-4" data-high="299" data-low="200" data-score="399" style="background-color: yellow;min-height: 20px;">
                <div class="arrow"></div>
            </div>
            <div id="third" class="greenscore col-md-4" data-high="199" data-low="0" data-score="399" style="background-color: green;min-height: 20px; ">
                <div class="arrow"></div>
            </div>
        </div>
    </div>

    <script>

        $("document").ready(function (e) {


            $('body').on("click", "#btnPrint", function (e) {

                $.ajax({
                    cache: false,
                    async: true,
                    type: 'GET',
                    data: {},
                    url: '/Home/QuickReportViewPDF',

                    success: function (response) {
                        debugger;
                        var printWindow = window.open('', '', 'height=600,width=900');
                        printWindow.document.write('<html><head><title>Medical Hub</title>');
                        printWindow.document.write('</head><body >');
                        printWindow.document.write(response);
                        printWindow.document.write('</body></html>');
                        printWindow.document.close();
                        printWindow.print();
                    },
                    error: function (data) {


                    }
                });
            });

        });


    </script>

<style>
    #wrapper {
        display: flex;
        /*border: 1px solid black;*/
    }

    #first {
        background-color: red !important;
        border: 1px solid black;
    }

    #second {
        background-color: yellow !important;
        border: 1px solid black;
    }

    #third {
        background-color: green !important;
        border: 1px solid black;
    }
</style>


</body>
</html>

标签： jquerycss.netasp.net-mvc

解决方案

推荐阅读