window.print() 没有打印整个页面

IT技术 javascript jquery
2021-03-05 06:57:10

我有一个页面 截屏

我想打印此页。在打印按钮上,我正在使用这样的东西

<input id="print" type="submit" onclick="window.print();" />

但问题是它没有打印整个页面。喜欢它只打印当前在视图中。当我点击打印按钮然后直到Email:tahir@7-cs.com页面打印。它不会打印滚动条下方的文本。

滚动条下方的文字

我怎样才能打印整个文本。就像假设我有一个非常大的页面并且我正在使用标签来容纳我的页面。当点击打印按钮时,我想包括整个页面,包括标签。我该怎么做?

谢谢

4个回答

您应该使用单独的 css 文件来打印页面或使用 css3 媒体查询:

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

创建 css 打印文件时,使用百分比值是最佳选择。

body, html, #wrapper {
    width: 100%;
}

或在您的主 css 文件中:

@media print {
      body, html, #wrapper {
          width: 100%;
      }
}
@Basit,是的,浏览器使用 css 打印样式表来打印页面。这样您就可以完全控制元素的样式。
2021-04-23 06:57:10
我有一个包含在我的页面上的 css 文件。我将这些行添加到我的文件中@media print {body, html{width: 100%;}}我在我的页面上什么也没做。我所理解的意思是在正文中打印任何内容哦 html 文档?是吗?但它仍然没有打印整个 body,意味着 <body>..</body> 里面的所有元素
2021-04-25 06:57:10
@Basit 当您将 100% 设置为 body 时,请确保将百分比值设置为其他元素,例如 #sidebar 40% 使用大像素值会溢出设计。
2021-05-03 06:57:10
我很高兴能帮到你,你可以在你的打印部分添加一些样式来覆盖滚动条jsfiddle.net/nAFSN/1
2021-05-05 06:57:10
谢谢,您的意思是我必须制作一个 css 文件 print.css。而我不想包含在打印中的内容,给它们提供 id,然后将它们的显示设置为无。<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>在我的页面上包含此声明后,当我单击打印按钮时,浏览器将使用此 print.css 文件打印页面。是吗?
2021-05-11 06:57:10

利用

  body,html { margin-top:0%;
   display:block;
   height:100%;}

使用这个 CSS

@media print{ 
    body, html, #page-container, .scrollable-page, .ps, .panel {
        height: 100% !important;
        width: 100% !important;
        display: inline-block;
    }
}

尝试使用 CSS 打印样式表,看看谷歌的一些例子

关于为什么它实际上不打印整个页面,我假设您在打印对话框中缺少一个说明打印将如何完成的设置。