文章/答案/技术大牛

发布

js 打印指定页面

在JavaScript中打印指定页面（通常指的是打印页面的特定部分）可以通过多种方式实现。以下是一些基础概念、方法及其应用场景：

基础概念

window.print()：这是浏览器内置的一个方法，用于调用浏览器的打印功能，默认情况下会打印整个页面。
CSS媒体查询：使用@media print可以在CSS中定义打印时的样式，比如隐藏某些元素、调整布局等。
DOM操作：通过JavaScript操作DOM，可以选择性地显示或隐藏页面元素，从而实现打印指定内容的目的。

方法

方法一：使用`window.print()`结合CSS媒体查询

在CSS中使用@media print定义打印样式，隐藏不需要打印的部分。

@media print {
  .no-print {
    display: none;
  }
}

在HTML中给不需要打印的元素添加no-print类。

<div class="no-print">这部分不会被打印</div>
<div>这部分会被打印</div>

调用window.print()方法触发打印。

window.print();

方法二：动态创建打印内容

使用JavaScript选择需要打印的内容，并将其复制到一个新的DOM元素中。

function printContent(elementId) {
  var content = document.getElementById(elementId).innerHTML;
  var printWindow = window.open('', '', 'height=400,width=600');
  printWindow.document.write('<html><head><title>打印内容</title>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(content);
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.print();
}

调用printContent函数并传入需要打印元素的ID。

printContent('printableArea');

应用场景

发票打印：只打印订单详情部分，不包括导航栏、页脚等。
报告生成：打印报表的特定部分，去除不必要的页面元素。
表单确认：在提交表单前，让用户打印确认信息。

可能遇到的问题及解决方法

问题：打印预览与实际打印效果不一致

原因：可能是由于CSS样式在打印时没有正确应用，或者浏览器默认的打印设置影响了页面布局。

解决方法：

仔细检查@media print中的样式规则，确保它们覆盖了所有需要调整的元素。
使用浏览器的打印预览功能进行测试，调整样式直到满意为止。

问题：打印内容缺失或错位

原因：可能是由于JavaScript操作DOM时出现问题，或者CSS样式在打印时没有正确加载。

解决方法：

确保JavaScript代码正确无误地选择了需要打印的内容，并且在打印窗口中正确加载。
检查CSS样式，确保所有需要的样式在打印时都已应用。

通过以上方法，你可以实现JavaScript中打印指定页面的功能，并根据具体需求进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

如果我的shtml页面被Javascript打印出来，Google会索引它的内容吗？

、、、

我有SHTML文件，我想实现以下内容：- 1 / 0 (in plain text) and depending on the result the JS either printsthe intended content or a captcha form.或-指定

浏览 3提问于2011-05-13得票数 0

回答已采纳

1回答

客户端JS模板-准备打印页面

、、

我需要解析XML数据并填充HTML(XML)或预编译的JS模板进行打印，然后将其发送到打印，所有这些工作都应该在客户端完成。如果我开始开发自己的库，应该使用什么方法？我主要使用Java，所以我不知道如何在JS上构建结构，是否可以在不同的文件中编写类，然后在一个JS中编译(我知道在JS类中是不可用的，但我们可以模仿类

浏览 3提问于2015-05-22得票数 0

2回答

在vueJS上使用PrintJS打印页面节

、

我使用npm install print-js --save在我的vue项目中安装了printJS Print Preview现在可以成功显示，但问题是它正在打印整个页面以及侧面板和滚动条。btn-primary btn-block">Print</button> </b-modal> import * as Printjs from "print-jspr

浏览 87提问于2021-01-25得票数 0

1回答

打印报表的指定页面

、

我希望根据输入到主窗体上的一个文本控件(根据从组合框中的选择自动填充)中输入的内容，仅打印指定的页面。例如，当ClientName控件显示为123,时，我只希望打印报表的1和4页。我试过使用DoCmd.PrintOut acPages，但这不是我想要的解决方案，因为它打印页面1-4，而不仅仅是1和4。为了清楚起见，我尝试将其编码到几个不同页面配对的命令按钮的OnClick事件中。

浏览 15提问于2019-08-05得票数 0

回答已采纳

1回答

使用隐藏的div方法将空白页发送到打印机

、、、、

这个资源来自于这里：<head> <script language="JavaScript"> $.getScript("printThis.j

浏览 1提问于2013-12-10得票数 0

回答已采纳

1回答

jQuery数据表扩展“打印”按钮以处理同一页上的多个表

、、

我在HTML页面中有1 to n表，并希望在一个流中打印所有这些表。jQuery数据传递一个“内建”打印按钮，但这只适用于指定的表。但是，必须有某种逻辑来收集行中的所有数据并打印它们。这是内置的打印按钮逻辑： dom: 'Bfrtip', 'print'} );这2分钟的js是使按钮工作所必

浏览 7提问于2022-03-16得票数 0

回答已采纳

1回答

从命令行运行chrome并推断页面何时完成加载

、、

我按照如下方式运行as，使其输出生成的汇编代码并加载指定的.html：有没有一种方法(命令行参数？)若要推断页面是否已完成加载，即所有程序集代码都已输出？理想情况下，通过stdout传递此信息。谢谢!

浏览 1提问于2018-05-03得票数 0

回答已采纳

2回答

动态加载外部JS并将响应写入div

、、、

我在我的页面中嵌入了一个很棒的提要。当我只是在div中添加脚本标记时，它显然会在JS的其余部分(在页面底部)之前加载。我想在所有其他js加载完毕后，将这个脚本动态加载到指定的div中。我尝试过getscript函数，但当我将它与.html()一起使用时，它肯定会破坏页面：$.getScript("http://feeds.delicious.com/v2

浏览 4提问于2011-04-11得票数 3

回答已采纳

1回答

如何使用css分别打印页面中的多个元素？

、、

我的页面结构是这样的 <body> <a href="#two">Two</a> <div class="two">My Content 2</div> <&

浏览 4提问于2012-02-13得票数 1

回答已采纳

2回答

<script src=> vs <script>document.write

、

我目前正在学习JS，我偶然发现了这两种不同的代码。<script src="js/add-content.js"></script><script>document.write('<h3>Welcome!</h3>');我的问题是，第二个代码是否删除了指向js文件的链接？还是因为我已经运行了“脚本src”代码，所以它仍然是链接的

浏览 8提问于2022-04-07得票数 1

1回答

使用打印按钮c# asp.net在网格视图中打印图像

、、、

如何从Gridview打印网格视图图像我想点击print，然后就可以打印图像了。

浏览 6提问于2011-12-08得票数 0

2回答

‘'nodejs web.js’工作，‘领班’没有

、、、

我正在开发一个网站，我想把它部署在localserver/heroku/aws上var http = require("http"),path = require("path"),fs = require("fs"), exten

浏览 3提问于2014-08-01得票数 2

5回答

如何仅打印一个特定的面板ID

、

我有一个aspx页面(使用visual studio 2010的c#)，在其中我有一个服务条款。我希望允许用户打印服务条款，而不必打印页面的其余部分。(页面的其余部分是各种其他信息)提前谢谢。

浏览 1提问于2010-10-14得票数 2

回答已采纳

1回答

是否有一个视图可以分别打印每个单独的响应？

我已经发布了一份调查报告，我可以在一个电子表格上看到所有的回复。

浏览 0提问于2017-12-05得票数 2

1回答

在JQPrint中更改页脚

、、、

我正在使用在我的页面上打印特定的div。它将打印页面的页脚设置为页面的URL (类似于在线打印大多数站点)。谢谢!

浏览 5提问于2011-05-19得票数 0

回答已采纳

1回答

检查是否将某些文本输出到屏幕PHP

、、、

例如，我有这样的代码：<body>error: no js<?php?></html> 我想要检测HTML是否打印出指定的<noscript>消息。这可以用PHP实现吗，或者在PHP页

浏览 2提问于2013-05-24得票数 1

回答已采纳

1回答

我有一个问题，与html打印功能。所以我的计划如下。我在/help-center/文件夹中有一个名为index.html的页面。所以我想做以下事情:正如你在图片中看到的，有一个“打印”链接。因此，当用户单击它时，它应该打印/help-center/pdf/terms.html文件。这是一个代码:打印此页我想这样做是为了设置参数以打印/help-center/terms.html页面图片：https

浏览 11提问于2020-12-10得票数 4

回答已采纳

1回答

为什么页面加载后和加载后元素的宽度会有所不同？

、

情况是，我想在页面加载后立即更改元素的大小。问题是元素没有改变，因为函数getSearchBarWidth返回的结果是负数。这里奇怪的是，console打印两个元素web_logo和menu的宽度值不正确；它们的宽度应该很小，但在console中，这两个元素的宽度等于父元素，这是一个导航栏。但后来，我在控制台中再次打印出两个元素的宽度，结果是正确的。有人能解释一下吗？更新:这似乎是因为我没有指定导航栏的宽度。那么，除了指定父元素的宽度之外，是否还有其他方法可以在页面加载后立即获得其子元

浏览 2提问于2015-04-10得票数 0

4回答