HTML使用JS打印页面
是指通过JavaScript代码来实现在网页上打印页面的功能。具体步骤如下：
- 首先，在HTML文件中引入JavaScript代码。可以通过
<script>标签将JavaScript代码嵌入到HTML文件中，或者通过外部JavaScript文件进行引入。 - 在JavaScript代码中，使用
window.print()方法来触发打印功能。该方法会弹出打印对话框，用户可以选择打印机和打印设置。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Print Page</title>
<script>
function printPage() {
window.print();
}
</script>
</head>
<body>
<h1>Print Page Example</h1>
<button onclick="printPage()">Print</button>
</body>
</html>在上面的示例中，当用户点击"Print"按钮时，printPage()函数会被调用，从而触发打印功能。
HTML使用JS打印页面的优势在于可以通过JavaScript代码来控制打印的内容和样式，实现更加灵活的打印功能。这在需要自定义打印布局或者只打印特定部分内容时非常有用。
应用场景包括但不限于：
- 在网页上提供打印按钮，方便用户将网页内容打印出来。
- 在电子商务网站上，提供订单打印功能，方便用户保存订单信息。
- 在报表系统中，提供打印功能，方便用户将报表内容打印出来。
腾讯云相关产品中，与HTML使用JS打印页面相关的产品包括云服务器（ECS）、云函数（SCF）等。这些产品可以提供稳定的计算资源和运行环境，用于部署和运行网页应用程序。具体产品介绍和链接如下：
- 云服务器（ECS）：提供可扩展的计算能力，用于部署和运行网页应用程序。了解更多信息，请访问云服务器产品介绍。
- 云函数（SCF）：无服务器计算服务，可以用于运行JavaScript代码片段，包括处理网页打印功能所需的代码。了解更多信息，请访问云函数产品介绍。
请注意，以上只是腾讯云提供的一些相关产品，其他云计算品牌商也提供类似的产品和服务。
相关·内容
1回答
我有一个打印html页面的servlet。我想，这些网页自动循环使用的js脚本。因此，我加载了一个html页面，3秒后它会刷新，然后加载另一个html页面(由同一个servlet打印)。
在servlet中：-读取存储正在打印的页面的索引的会话；-基于此索引，打印页面并更新索引(如果打印最后一页，索引将增加或返回0)-将索引存储在div元素中，以便我可以通过javascript函数找到它，并使用js函数刷新html页面。
out.println("<div id=\"storedDiv\">");
int indexRefresh=
浏览 15提问于2018-02-16得票数 0
我在一些测试中使用Selenium和Java。我必须从javascript中打印的页面html代码非常有用，可以发出警告：
js.executeScript("alert($('html').html());");
但是，当我使用返回时，在Eclipse中没有任何打印：
js.executeScript("return $('html').html();");
我做错了什么，我如何打印(使用System.out.print)在Javascript返回的html结果？谢谢，不，我不想使用源代码。
浏览 0提问于2014-08-08得票数 1
回答已采纳
我正在使用zend lucene搜索引擎，我有一个名为title的文本字段，它的值作为一个完整的结构化html文档打印在搜索结果页面中，下面是我的代码：
在创建中添加字段：
$doc->addField(Zend_Search_Lucene_Field::Text('title',CHtml::encode($post->title), 'utf-8'));
在“搜索结果”页面中打印该字段：
<?php echo $query->highlightMatches(CHtml::encode($result->title)); ?&
浏览 2提问于2014-12-31得票数 1
回答已采纳
因此，通常我只会在用户与某件事情或某个事件发生交互后使用JS来修改dom。出于某种原因，这似乎是正确的。
但我正在开发一个基于小部件的应用程序，其中小部件需要自己绘制(打印)的功能，当页面加载时我可以使用js方法打印它们时，通过初始的http请求发送小部件的html感觉是多余的。
我应该尽量避免在页面加载时打印带有JS的html元素作为规则，还是它只是一个优化的问题？
浏览 0提问于2014-07-07得票数 0
回答已采纳
3回答
我有一个python程序，我想使用Node JS在HTML页面上打印该程序的输出。python脚本是使用'child_process‘调用的。我想在HTML页面上打印't‘的值。有什么办法可以做到吗？
script.py
import time
t=0
def main():
while 1:
t =t+1
print t
time.sleep(2)
# Start process
if __name__ == '__main__':
main()
在这里，我想每隔2秒打印一次't‘的值
浏览 2提问于2017-03-18得票数 1
我正在运行一个node.js服务器。在节点中，我需要并运行模块，使用
var h = require('h.js');
h.hello();
这将将Hello打印到控制台。但是，我也希望能够从浏览器中的页面(entrypage.html)运行来自entrypage.html的代码。我试着通过
<script type="text/javascript" src="/node_modules/h.js"></script>
但是，当在localhost上运行时，这会产生404错误。
GET http://localhost:
浏览 4提问于2016-03-14得票数 0
回答已采纳
当我通过Node服务器启动HTML页面时(即，在浏览器中导航到localhost:3000 )，根据页面Javascript文件(如下所示)，没有任何内容打印到控制台。但是，当我直接从文件夹中打开HTML文件时，"Hi“按预期打印到控制台。
这是Node服务器Javascript：
var http = require('http');
var fs = require('fs');
fs.readFile('./index.html', function(err, html) {
if (err) {
thro
浏览 0提问于2016-04-17得票数 0
我正在尝试理解如何在外部包含JavaScript，以便将代码打印到页面。
当我将JavaScript直接插入页面代码时，它会打印"hello“
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">document.write("hello");</script>
</body>
</html>
但是，当我将相同代码放到外部文件中说"
浏览 2提问于2012-03-13得票数 1
回答已采纳
1回答
我有下面的例子(简单的) HTML文件在这里的页面包括4个主要区域header，left-column，righ-column和footer。此外，它还包括两个@media元素screen和print。
当我打印页面时，@media screen{...}样式只能调用并打印整个页面。例如，如果我想打印除right-column之外的所有区域，我会在right-column中添加类似.noprint {display:none;}的内容
我想知道的是，我是否可以只使用CSS打印1到2个区域(这5个区域中)？如果这是不可能的，并且需要JS，那么完成这项工作的最小JS代码是什么？
例如，当我打印页面
浏览 1提问于2014-03-24得票数 0
我尝试使用HTML、JS、QZ制作一个静态的简单页面，它可以将模拟数据打印到LQ-310打印机中。
我一直在跟踪如何从注册JS。然而，我仍然弹出了如下消息：
我已经更改了从服务器端到客户端的流，以签署和删除这个弹出，但没有任何效果。
注意：
我成功地打印了我要打印的页面
问题回购：
浏览 37提问于2022-10-11得票数 1
回答已采纳
4回答
我正在尝试打印一个使用Node.js在我的服务器上生成的HTML页面。我将页面带到客户端作为对AJAX请求的响应，并将其保存在javascript变量中。
var resp_json = printRequest.getResponseJson();
现在，我正在尝试打印呈现的页面(即没有标记)，而不是要发送的DOM对象。
我读过关于window.print()的文章，但它只在浏览器中打印当前页面。有谁能给我个办法。
另外，在节点上生成HTML页面是正确的方法，或者应该是任何其他类型的文档。页面应该在节点处动态生成，最终结果应该是打印的文档。提前鸣谢！！
我正在使用闭包库，不要问为什么，这已经
浏览 6提问于2013-06-01得票数 1
回答已采纳
3回答
我有一个页面，作为我们网站上的一个页面的打印页和电子邮件版本的双重。用户无法找到该页面，但会在iframe中加载该页面，并根据用户通过GET加载该页面时按下的按钮来打印或发送电子邮件。即。?purpose=print ?purpose=email
现在，打印函数触发JS window.pint()，而电子邮件函数使用PHP html mail。为了获得整个页面的内容，我使用了OB函数
ob_end_start();
// page content
ob_get_contents();
ob_end_clean();
不过，这会影响我的print函数和页面上的其他JS。有没有其他方法可以获取页面
浏览 2提问于2011-09-20得票数 0
回答已采纳
2回答
我正在使用printThis.js，并尝试使用angularjs打印html。我的代码是
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.Html = '<div><p>Pakistan</p></div>';
$scope.printMe = function (){
$dvPrint = $($scope.Html);
$dvPrint.print
浏览 18提问于2016-01-21得票数 0
在Chromium中，'console.log()‘允许您打印到错误控制台，但只能从嵌入在html中的javascript或本地计算机上的.js文件中打印。
对于调试包含在远程机器上的.js文件和页面中的Javascript，您有什么变通方法？
浏览 0提问于2010-12-15得票数 0
我想知道当您在不同的浏览器(IE9++)中打印html页面时会发生什么。
不同的浏览器是否刷新页面，重新执行javascript (意味着重新执行某些服务器调用)？
如何知道您正在刷新-if -用于JS中的打印？
浏览 4提问于2014-01-14得票数 2
回答已采纳
1回答
使用css只打印隐藏内容
、、、
我正在构建一个web应用程序，当用户点击一个按钮时，它需要打印一个报表。在页面上看不到报表中的任何内容，只有当用户单击按钮时才会创建该内容。我最初的想法是简单地打开一个新窗口，设置内容，然后在打印后关闭窗口。但是，这不是一个选项，因为用户使用的浏览器在kiosk模式下无法打开新的选项卡/窗口。要求报表需要打印，而不需要从当前页面重定向。只有报表本身应该打印，不能包含当前页面的任何内容。
据我所知，这篇文章已经在这里贴了好几次了，但我看了很多这样的帖子，就像我现在一样。
当我单击该按钮并打印该页时，它将打印一个空白页。我不知道为什么这不管用。
这是我到目前为止所拥有的
HTML
<html
浏览 0提问于2017-04-11得票数 3
回答已采纳
1回答
我正在使用jQuery来验证表单。我在html的头上有：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
我的脚本上有utf-8：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/ja
浏览 3提问于2012-05-25得票数 7
回答已采纳
1回答
想象一下网站上的一个页面，该页面有许多元素直接从服务器后台以html格式打印，而其他元素则通过基于JSON的数据通过JS打印。在第一次加载页面时，它带来了php在响应中打印的所有HTML布局和元素。在同一请求中，部分打印了一些JSON，以便JS函数和templates..After可以通过对JSON rest api的另一个请求更新该JSON
这是一个很好的实践吗？？这样做的主要原因是为了避免在第一次加载页面时发出两个请求……想象一下$data_array是一个巨大的数据对象
echo $entire_page_html;
echo '<script>'.&
浏览 2提问于2014-11-25得票数 0
1回答
下面的页面不能像预期的那样工作。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="js/jquery.js"></script>
</head>
<body>
<script>
$('body').k
浏览 5提问于2013-01-27得票数 0
1回答
我正在尝试呈现由python google地图库生成的html输出，其中包含JS代码。我正在传递显示带有html_map变量的google map的部分，如下所示：
html = t.render(Context({'html_map':html_map}))
return HttpResponse(html)
但是，页面显示的不是地图，而是js代码(即直接打印)。下图显示了以下内容：
我该如何解决这个问题呢？
浏览 3提问于2013-02-14得票数 0
回答已采纳
我正在开发一个与电子node.js的桌面应用程序，并使用打印超文本标记语言页面的库打印HTML元素。正确处理了打印HTML，但在选择打印机(Microsoft XPS文档写入器)后，给我一个下载(将打印输出另存为) XPS文件选项。但我不想打开此选项，我想禁用或阻止下载。下面是我在项目中使用的代码
var PHE = require("print-html-element")；
PHE.printElement( document.getElementById(‘发票’))；
浏览 4提问于2020-05-19得票数 0
我的app.js中有一个变量，我想在不删除页面其他文本的情况下将其打印到我的HTML页面中。
示例：
var test = 'hello';
在这里，我只想在我的index.ejs页面中打印hello。
浏览 78提问于2017-02-01得票数 1
我正在尝试从default.js文件中打印出一个变量。这个变量会一直计数到一个数字，我想把这个数字打印到html页面上。
所以就像现在一样，我有：
We found <script type="text/javascript">
var $tempCountPlaces;
document.write($tempCountPlaces); </script> places for you!
<div id="places_list">
<script type="text/ja
浏览 0提问于2014-05-13得票数 1
3回答
使用pdf.js打印
、、、
我正在使用pdf.js嵌入一个页面的PDF单页，我希望能够打印的PDF，而不是整个HTML页面。
这个是可能的吗？
浏览 9提问于2013-01-18得票数 6
回答已采纳
1回答
使用print.js自定义页边距
、、、、
我试图打印付款收据使用热POS打印机使用Print.js库。我可以使用printjs成功地打印页面。但是根据A4页面，打印有额外的页边距。
有没有办法打印它，以适应58毫米与页边距？
另外，如果给出了使用JavaScript打印的任何替代方案，这将是非常有帮助的。以下是我的工作。
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<di
浏览 6提问于2020-12-30得票数 0
回答已采纳
我正在试着用简单的计算器做页面。我用js做了一个计算器，现在，当我点击按钮的时候，我想把参数从js传递给django。在那里计算它们并在重定向页面上打印。
我有重定向页面的问题。当我没有在表单中放置按钮时，js脚本调用calc view，但不重定向页面。我想重定向页面，并在那里打印结果。
html代码：
<form action="calc/" method="post">
{% csrf_token %}
<input id='btn' type="submit" value="CALC
浏览 0提问于2019-04-03得票数 0
我正在试着打印一个html页面。我使用的是angular.js。我有一个http请求获取数据。我有一个问题，打印区域没有用第一个http请求更新：
http.post(url,data).then(function(result) {
$scope.data = result.data;
print($("#printarea").html());
});
有人知道为什么会这样吗？如何在DOM更新后调用我的打印函数？
浏览 1提问于2016-03-21得票数 0
有多个帖子处理这些主题的一部分，但没有一个把它们放在一起。
在给定的页面上，我希望创建一个新的IFRAME，向它添加一些JavaScript，它将把页面打印到打印机上，并在其中添加一些将被打印的HTML。
下面是我在现场演示的尝试。它打印，但打印父页面，而不是IFRAME。
我怎么才能把它打印出来？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Print IFRAM
浏览 1提问于2014-01-09得票数 1
回答已采纳
4回答
我这样设计我的php产品页面模板：
索引：
<!DOCTYPE html>
<html>
<head>
<link href="/user/admin/templates/css/bootstrap.min.css" rel="stylesheet">
<script src="/user/admin/templates/js/jquery-1.10.1.min.js"></script>
</head>
<body>
<?PHP incl
浏览 3提问于2014-10-20得票数 2
5回答
我想在html页面中打印一条消息，其中消息是用链接到html文件的angularjs编写的。
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src="../scripts/angular.js"></script>
<script src="../scripts/angular.min.js"></
浏览 8提问于2016-07-14得票数 0
回答已采纳
我是一名javascript和chrome devtools新手。我们有一个包含如下内容的页面：
<head>
..
<script type="text/javascript" src=”path/to/some/external/script1.js>
..
</head>
<body>
… some HTML
<script type="text/javascript”>
..some inline javascript code here
</script>
...some more HT
浏览 0提问于2017-06-14得票数 2
我使用了一些css文件和js库(bootstrap、packry等)。在我的母版页中。页面上有一个按钮，当你点击它时，它会发送一个ajax请求，并在当前页面的div上打印响应：
jQuery.post("index.php", "some_post_data", function (data)
{
jQuery('#mydiv').html(data);
});
我调用的页面需要那些我已经包含在我的母版页中的库，但是当我在div中打印响应时，它仍然显示js错误和无样式的对象。如果我将这些资源添加到第二个页面，它将工作，但我不想这样做。
我是不是
浏览 0提问于2014-10-28得票数 0
我使用的是Hightcharts.js 4.0.1
它工作得很好，但是打印时图表的大小需要与显示在HTML文档中的图表的大小不同。
我如何设置它，以便当图表打印，它会达到100%的页面宽度和高度？
浏览 2提问于2016-09-14得票数 1
回答已采纳
我正在尝试使用ids= DIV1将文本添加到两个DIV1中，并使用document.write()命令在html页面(home.html)中使用document.write()命令从js页面main.js添加文本。单击html页面中的按钮时，相应的文本必须出现在hmtl页面中。
代码如下所示。我一直收到一个错误: document.write可以是eval的一种形式。有没有可能使用document.write()并打印div部分中的文本。
HTML代码：
<head>
<script src="main.js" type="text/javascr
浏览 0提问于2019-02-16得票数 0
我使用npm install print-js --save在我的vue项目中安装了printJS Print Preview现在可以成功显示，但问题是它正在打印整个页面以及侧面板和滚动条。我像这样实现了它： <template>
<b-modal>
<div id="print-form">
<table style="border-collapse: collapse; width: 100%" border="1px">
</table>
浏览 87提问于2021-01-25得票数 0
1回答
我使用@media print来打印html页面。
在简单的@media页面中，html打印效果很好。
但是当我调用javascript时，@media css不能在文档上工作。
我的javascript代码是
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function
浏览 5提问于2012-12-26得票数 1
回答已采纳
下面有包含JS文件的HTML页面的代码。函数d()接收24个字符的字符串，包括3不可打印的字符 (ASCII 005)，并计算包含多少个字符。这个号码是用一个警告()显示的。
Google Chrome:结果是正确显示了24。
Google (JS调试器)：结果正确显示24。
Internet 9:结果正确显示24。
Internet 9 (JS调试器)：只显示21 (24 -3不可打印)。
我真的需要这个来和I一起工作。有什么想法吗？谢谢
TEST.HTML
<html>
<head>
<meta http-equiv="Cont
浏览 2提问于2012-03-11得票数 0
回答已采纳
我希望访问JSON数据文件中的数据，使用javascript文件将其打印到HTML页面。到目前为止，它返回的是“未定义的”，我不知道为什么。这是我文件中的代码：
template.html：
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript" src="populate.js"></script>
</head>
<body>
<script>
docum
浏览 4提问于2016-12-09得票数 1
回答已采纳
我有一个HTML页面，我把它发送到浏览器，它包含几个脚本标记。
这是我的index.html文件：
<body>
<div id="app"></div>
<script src="src/index.js"></script>
<script>
window.test = true;
</script>
</body>
</html>
这是我的src/index.js文件：
<script&g
浏览 5提问于2022-02-10得票数 0
回答已采纳
1回答
将节点的变量访问到html文件中
、、、、
我有一个index.html文件和一个app.js nodejs文件。我在app.js中有一个变量，它是名称，希望在我的index.html页面中打印这个变量。
码
var name = "Utsav";
var HTTP = require('HTTP');
var fs = require('fs');
function onRequest(req, res){
fs.readFile('index.html', function(err, data) {
res.writeHead(200, {&
浏览 2提问于2020-03-10得票数 1
如何打印以字符串格式显示的$GLOBALS？
下面是一个非常简单的演示，有时我需要打印一个复杂页面的$GLOBALS，并且有很多html代码在变量中，它们显示为html，而我只希望它们是字符串，如何做到呢？
<pre>
<?php
$html='<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
print_r($GLOBALS);
浏览 0提问于2013-03-30得票数 1
回答已采纳
我正在调用历史接口，可以通过JavaScript在console.log中打印10个结果。现在我想将这些数据打印到一个HTML页面中。如何在HTML中显示结果？ chrome.history.search({'text': '', 'maxResults': 10},callback);
function callback(data){
console.log(data);
} 这就是js文件中的所有代码。我需要帮助才能进一步处理。我刚刚开始使用JavaScript。
浏览 53提问于2019-01-28得票数 0
1回答
我使用window.print() Javascript函数来打印我的HTML页面，但它在打印或打印预览中默认包含了Page URL和date in footer。
任何快速的解决方案，可能是JS中的某个补丁或其他什么？
浏览 3提问于2011-04-22得票数 0
回答已采纳
我试图让HTML文件打印一个javascript文件的输出，但似乎不起作用--我只是得到了一个空白页面。
我的超文本标记语言文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="sketch.js"> setup()</script>
</head>
<body>
<div id="fog"
浏览 29提问于2018-07-16得票数 -1
回答已采纳
1回答
我试图将数据从页面上的javascript传递到我的django project.But中的另一个视图，但该视图似乎没有被调用。我想要做的是，使用JS，我只想从包含JS的页面中获取数据，并将其从django视图打印到控制台。 html页面上的js： <script>
var URL="{% url 'projects:Unread' %}"
function Unread(){
var data = {'count': '5', 'X-csrfmiddlewar
浏览 25提问于2019-03-02得票数 3
回答已采纳
我正在尝试编写一个脚本，从烧瓶应用程序中获取用户名，并自动将其呈现为模板。基本上，我在layout.html中有这一行：
<div class="sidebar-heading" id= "my_username"> {% block sidebar %} Start Bootsrap {% endblock %} </div>
然后，作为我的主页的index.html获得用户名：
{% block sidebar %} {{ username }} {% endblock %}
<script src= "static/
浏览 5提问于2020-07-13得票数 0
2回答
这就是我的Html页面在打印视图中的外观。
我需要把它放在新的页面上，当它插入到2中时，需要在div下面插入这些元素(这是我正在为其他预定义的新页面所做的事情)。
<div style='page-break-before: always'>
但是我不能这样做，因为这些内容是动态的，我也不知道哪个HTML元素会落在这里。
如果我设法在页面断点跟踪HTML元素，我将简单地将分页代码放在它的上方。这需要用jQuery在html页面上完成，因为打印视图不支持js。
我试过这样做，但在这里也失败了。看起来打印视图不支持position: absolute。
$(d
浏览 0提问于2018-07-24得票数 4
回答已采纳
我有包含Jsonp函数的Jsonp代码。无论这段Js Src代码在哪里打印，我必须首先检查"api标记“是否已经打印，如果它执行了api函数，如果"api标记”尚未打印，则等待标签在屏幕上打印，然后执行api函数。
例如，我有这样的代码
<html>
<head>
<!-- js code - contain Jsonp functions -->
<script type="text/javascript" src="jsonp.js"></script>
&l
浏览 3提问于2011-10-09得票数 0
回答已采纳
这里有一个SSCCE演示了我的问题。在页面的顶部，打印$_GET。当第一次加载页面时，打印空数组Array()是可以理解的。
但是form的action属性有一个空值，这意味着页面是提交给自己的，method的值是GET，所以表单由GET提交。
因此，当表单通过GET提交到页面本身时，现在打印在页面顶部的$_GET数组不能是空的。哦，但它是！这就是问题所在。
当提交表格时，
打印在页面顶部的$_GET数组为空。Array ()
一个?被附加到该URL。例如，在表单提交之前，页面的URL为http://localhost/Test/index.php.提交表单后，页面重新加载，URL变为
浏览 0提问于2017-07-27得票数 1
回答已采纳
我是JavaScript的初学者。所以这个问题可能听起来很傻。据我所知，window.print()在窗口中打印文档的innerHTML标记中的内容或主体。在下面的代码片段中，
我的HTML页面：
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
&l
浏览 0提问于2018-04-13得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
