打印与页面相同的表

发布于 2025-02-11 08:54:04 字数 2648 浏览 2 评论 0原文

我想要单击图像右侧显示的打印按钮时，打印窗口显示了HTML页面中显示的同一表，现在我从按钮中删除所有类，因此您可以清楚地看到该代码

html表

    <div style="text-align: end;margin-bottom: 15px;">
        <button onclick="printPageArea('printableArea')" type="button" style="margin-right: 10px;">
            <i class="material-icons mdc-button__icon">receipt</i>
        </button>
        <button  type="button" title="Delete">
            <i class="material-icons mdc-button__icon">deleteoutline</i>
        </button>
    </div>
    <!-- DataTales Example -->
    <div id="printableArea" class="card shadow mb-4">
        <table class="table table-striped table-responsive-xxl">
            <thead>
                <tr class="header">
                     <th colspan="2"><img src="{% static 'img/logoprint.jpg' %}"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>7</td>
                </tr>
            </tbody>
        </table>
    </div>

我的javascript代码

<script>
    function printPageArea(areaID){
       var printContent = document.getElementById(areaID);
       var WinPrint = window.open('', '');
       WinPrint.document.write(printContent.innerHTML);
       WinPrint.document.close();
       WinPrint.focus();
       WinPrint.print();
       WinPrint.close();
    }
</script>

我的桌子看起来像

原文

I want when I click on print button shown in right side in image, print window show same table that shown in html page, right now I delete all class from button so you can see that code clearly

html table

    <div style="text-align: end;margin-bottom: 15px;">
        <button onclick="printPageArea('printableArea')" type="button" style="margin-right: 10px;">
            <i class="material-icons mdc-button__icon">receipt</i>
        </button>
        <button  type="button" title="Delete">
            <i class="material-icons mdc-button__icon">deleteoutline</i>
        </button>
    </div>
    <!-- DataTales Example -->
    <div id="printableArea" class="card shadow mb-4">
        <table class="table table-striped table-responsive-xxl">
            <thead>
                <tr class="header">
                     <th colspan="2"><img src="{% static 'img/logoprint.jpg' %}"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>7</td>
                </tr>
            </tbody>
        </table>
    </div>

my javascript code

<script>
    function printPageArea(areaID){
       var printContent = document.getElementById(areaID);
       var WinPrint = window.open('', '');
       WinPrint.document.write(printContent.innerHTML);
       WinPrint.document.close();
       WinPrint.focus();
       WinPrint.print();
       WinPrint.close();
    }
</script>

My table look like this

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋心╮凉 2025-02-18 08:54:04

最后，我知道了，只需在您的脚本中添加一些CSS，这将从打印窗口，

脚本函数中更改您的样式。

<script>
    function printPageArea(printableArea) {
        var mywindow = window.open('', 'PRINT');

        mywindow.document.write('<html><head>');
        mywindow.document.write('<style>\n' +
            'table {\n' +
            '  border-collapse: collapse;\n' +
            '  border-spacing: 0;\n' +
            '  width: 100%;\n' +
            '  border: 1px solid #ddd;\n' +
            '}\n' +
            '\n' +
            'th, td {\n' +
            '  text-align: left;\n' +
            '  padding: 16px;\n' +
            '}\n' +
            '\n' +
            'tr:nth-child(even) {\n' +
            '  background-color: #f2f2f2;\n' +
            '}</style>');
        mywindow.document.write('</head><body >');
        mywindow.document.write(document.getElementById(printableArea)
              .innerHTML);
        mywindow.document.write('</body></html>');

        mywindow.document.close();
        mywindow.focus(); 
        mywindow.print();
        mywindow.close();
        return true;
    }
</script>

finally I got it just add some CSS in your script this will change your style from print window,

script function

<script>
    function printPageArea(printableArea) {
        var mywindow = window.open('', 'PRINT');

        mywindow.document.write('<html><head>');
        mywindow.document.write('<style>\n' +
            'table {\n' +
            '  border-collapse: collapse;\n' +
            '  border-spacing: 0;\n' +
            '  width: 100%;\n' +
            '  border: 1px solid #ddd;\n' +
            '}\n' +
            '\n' +
            'th, td {\n' +
            '  text-align: left;\n' +
            '  padding: 16px;\n' +
            '}\n' +
            '\n' +
            'tr:nth-child(even) {\n' +
            '  background-color: #f2f2f2;\n' +
            '}</style>');
        mywindow.document.write('</head><body >');
        mywindow.document.write(document.getElementById(printableArea)
              .innerHTML);
        mywindow.document.write('</body></html>');

        mywindow.document.close();
        mywindow.focus(); 
        mywindow.print();
        mywindow.close();
        return true;
    }
</script>

回复收藏 0 原文

~没有更多了~