table页面展示图片_（转载）html页面局部打印

最新推荐文章于 2022-10-22 19:38:35 发布

weixin_39612297

最新推荐文章于 2022-10-22 19:38:35 发布

阅读量772

点赞数

文章标签： table页面展示图片

本文链接：https://blog.csdn.net/weixin_39612297/article/details/111364401

版权

本文主要介绍如何在HTML页面中实现表格内容的展示，并确保在进行局部打印时图片能够正确显示。针对表格中图片的显示问题，提供了解决方案。

摘要由CSDN通过智能技术生成

<style> <!-- 看起来好看一些 -->
.table .text-center, 
.table .text-center th,
.table .text-center td { text-align:center; }
.table thead th { vertical-align:middle; }
.shebao_fail { color:#e74c3c; text-decoration:line-through; }
.suspend { color:#F93;  text-decoration:line-through; }

/* print style */

    caption h2 { font-size:22px; }
    .table { font-family:"宋体"; }
    .table .nowrap { white-space:nowrap; word-break:break-all; }
    
    .table-bordered { border:1px solid #333; border-left:0px solid #333; border-collapse:collapse; }
    .table th, .table td { border: 1px solid #333; } 
    .table-bordered th, .table-bordered td { border: 1px solid #333; }
    .table>thead>tr>th { border-bottom: 0px solid #333; }
    
    .table-condensed th, .table-condensed td { padding:0px 5px; }   
    .qihai_logo { position:relative; }
    .qihai_logo_gray { position:absolute; left:0px; top:-5px; z-index:-1; }
    #article_content img{height:auto !important}
    #article_content {word-wrap: break-word;}
        .btn {margin-top: 33px;}
</style>

</head>
<body>
<div class="wrap js-check-wrap">
     <!--startprint-->
     <div id="article_content"> <!--需要展示的数据 自行修改 我用的tp-->
        {$result['post_content']}
     </div>
     <!--endprint-->
     <div class="form-actions">
        <a class="btn btn-primary" onClick="doPrint()">打印</a>
    </div>
</div>
<script type="text/javascript">   
<!--打印操作-->    
function doPrint() {    
        bdhtml=window.document.body.innerHTML;    
        sprnstr="<!--startprint-->";    
        eprnstr="<!--endprint-->";    
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);    
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));    
        window.document.body.innerHTML=prnhtml; 
        window.print();    
        window.document.body.innerHTML=bdhtml; 
    }    
</script>
</body>
</html>