如何为我的 html 表单制作打印预览和打印按钮

嗨，目前我正在处理一个带有一些字段的 html 表单，我所需要的只是获得带有填充答案的表单的打印预览，稍后它应该在单击打印按钮时打印出来。任何人都可以帮我解决这个问题，如果可以的话，我将非常感谢你。

这是您可以参考的示例。网页代码：

    <html>
   <body  id="printarea">
        <table class="tble">
            <tr>
                <td>
                    Student Name
                </td>
                <td>
                    John Sypon
                </td>
            </tr>
           <tr>
                <td>
                       Student Rollnumber
                    </td>
                    <td>
                        R001
                    </td>
            </tr>
            <tr>
                <td>
                    Student Address
                </td>
                <td>
                    132 Kane Street Toledo OH 43612.
                </td>
            </tr>
            <tr>
                 <td>
                    <input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
                </td>
                <td>
                    <input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
                </td>
            </tr>
        </table>
    </body>
    </html>

并包含此 css 链接：

<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />

现在打印.css文件：

@media print /*--This is for Print--*/
{
    .btn
    {
        display: none;
    }
    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
        -webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/
    }
}
@media screen /*--This is for Print Preview Screen--*/
{
    .btn
    {
        display: none;
    }
    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
    }
  }

和风格.css

@media screen /*--This is for Screen--*/
{
    .btn
    {
        background-color: #AFAFAF;
        display: block;
    }
    .tble
    {
        background-color: #E5E5E5;
        border: 1px solid #CD853F;
    }
}

现在包括这个javascript代码：

<script type="text/javascript">
/*--This JavaScript method for Print command--*/
    function PrintDoc() {
        var toPrint = document.getElementById('printarea');
        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
        popupWin.document.write(toPrint.innerHTML);
        popupWin.document.write('</html>');
        popupWin.document.close();
    }
/*--This JavaScript method for Print Preview command--*/
    function PrintPreview() {
        var toPrint = document.getElementById('printarea');
        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')
        popupWin.document.write(toPrint.innerHTML);
        popupWin.document.write('</html>');
        popupWin.document.close();
    }
</script>

我希望这个答案有所帮助!!

尝试，

$('button').on('click',function(){
    print();
});

对于打印预览，您可以分别尝试使用HTML，CSS和JavaScript进行打印和打印预览

你可以使用 javascript 方法 window.print（）

相关内容

最新更新

热门标签：