网页中通过JS调用window.print()打印问题？

最新推荐文章于 2024-04-16 10:30:05 发布

CodeCxz

最新推荐文章于 2024-04-16 10:30:05 发布

阅读量3.7k

点赞数

分类专栏：技术前端js 文章标签： boostrap3. print打印图片不显示

本文链接：https://blog.csdn.net/cfxxt/article/details/85417889

版权

技术同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端js

1 篇文章 0 订阅

订阅专栏

在软件项目开发中，通常我们要实现打印功能，打印当前页面等打印需求，我们一般会使用window.print来打印。

1.在页面的代码头部处加入JavaScript：
<script language=javascript>
function doPrint() { 
   bdhtml=window.document.body.innerHTML; 
   sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
   eprnstr="<!--endprint-->"; //结束打印标识字符串
   prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
   prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
   window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
   window.print(); //调用浏览器的打印功能打印指定区域
   window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
}
</script>

html页面中我们这样写：

<html>
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="xxx" />
<meta name="description" content="xx" />
<head>
 
</head>
<body>
<table align="center" class="ml70">
        <tbody>
            <tr>
                <td colspan="8">
                    <div align="center">
                        <b><span >不打印的内容部分</span></b></div>
                    <div>
            </tr>
        </tbody>
    </table>
    <a href="#" onclick="javascript:history.back(1); event.returnValue=false">
        << 返回</a><br />
            <!--startprint-->
            <br />
            <table align="center" class="ml70">
                <tbody>
                    <tr>
                        <td colspan="8">
                            <div align="center">
                                <b><span >需要要打印的内容部分</span></b></div>
                            <div>
                    </tr>
                </tbody>
            </table>
            <!--endprint-->
            <input type="button" value="打印" onClick="doPrint()" />

</body>
</html>

以上是常见的一种打印方式，有时候我们需要在打印的时候带背景图片，或者水印。

@media print {
	.layout {
		background: url(../images/watermark.png) repeat;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
}

如果你在页面中使用了boostrap3.x版本，背景图片就会打印不出来，而且打印的内容如果用到了table，表格会加粗显示失去了美化好的css样式，我们就需要分析boostrap3.x的打印样式@media print{}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

有这样一句 color: #000 !important; background: transparent !important;会是背景图片显示不出来，去掉之后显示正常。

CodeCxz

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页中通过JS调用window.print()打印问题？

在软件项目开发中，通常我们要实现打印功能，打印当前页面等打印需求，我们一般会使用window.print来打印。1.在页面的代码头部处加入JavaScript：&lt;script language=javascript&gt;function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="&lt;...
复制链接

扫一扫