Javascript “如何打印特定的”；分区；asp.net core component.razor中的区域。。？_Javascript_Asp.net Core_Asp.net Blazor_Razor Components

Javascript “如何打印特定的”；分区；asp.net core component.razor中的区域。。？

javascript asp.net-core

Javascript “如何打印特定的”；分区；asp.net core component.razor中的区域。。？,javascript,asp.net-core,asp.net-blazor,razor-components,Javascript,Asp.net Core,Asp.net Blazor,Razor Components,在这里，我将我的基本应用程序的编码放在asp.net核心中，这是为print div编写的，id=“printableArea”。这个代码工作得很清楚 <input type="button" onclick="printDiv('printableArea')" value="print a div!" /> <div id="printableArea" class="stylesheet"> <table id="myTable" class="ta

在这里，我将我的基本应用程序的编码放在asp.net核心中，这是为print div编写的，

id=“printableArea”

。这个代码工作得很清楚

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
<div id="printableArea" class="stylesheet">
    <table  id="myTable" class="table">
         <thead>

            <tr>                 
                <th>Pipe Type</th>
                <th>DIA</th>
                <th>Laek Type</th>
            </tr>
        </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
    </table>
</div>

我这样解决：

在_Host.cshtml中，将此代码放入脚本部分：

<script type="text/javascript">

        function printDiv() {
            var divContents = document.getElementById("PrintDiv").innerHTML;
            var a = window.open('', '', 'height=500, width=500');
            a.document.write('<html>');
            a.document.write('<body > <br>');
            a.document.write(divContents);
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        }
    </script>

<input type="button" />
<div id="printableArea" >
<div>

@code{

}

<script type="text/javascript">

        function printDiv() {
            var divContents = document.getElementById("PrintDiv").innerHTML;
            var a = window.open('', '', 'height=500, width=500');
            a.document.write('<html>');
            a.document.write('<body > <br>');
            a.document.write(divContents);
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        }
    </script>

<div id="PrintDiv" class="row">
    <h1>Megatron</h1>
    <h3>Hola Mundo Megatron</h3>
    Here I put my design, for example an invoice.
</div>

<div class="row">
    <div class="col-4">
        <button class="btn btn-primary" @onclick="PrintAsiento">Imprimir DIV</button>
    </div>
</div>

public async Task PrintAsiento()
    {
        await IJS.InvokeVoidAsync("printDiv");
    }