如何使用Angular8在单击打印选项时显示完整的html内容
Angular是一种流行的前端开发框架，它可以帮助开发人员构建现代化的Web应用程序。在Angular 8中，要实现在单击打印选项时显示完整的HTML内容，可以按照以下步骤进行操作：
- 首先，确保已经安装了Node.js和Angular CLI。可以通过在命令行中运行以下命令来检查它们的安装情况：
node -v
ng version- 创建一个新的Angular项目。在命令行中运行以下命令：
ng new print-app
cd print-app- 在Angular项目中创建一个组件。在命令行中运行以下命令：
ng generate component print- 打开
print.component.html文件，并添加一个按钮和一个要打印的HTML内容。例如：
<button (click)="print()">打印</button>
<div id="print-content">
<!-- 这里是要打印的HTML内容 -->
</div>- 打开
print.component.ts文件，并在组件类中添加一个print()方法。该方法将在单击按钮时触发打印操作。例如：
import { Component } from '@angular/core';
@Component({
selector: 'app-print',
templateUrl: './print.component.html',
styleUrls: ['./print.component.css']
})
export class PrintComponent {
print() {
const printContent = document.getElementById('print-content').innerHTML;
const printWindow = window.open('', '', 'width=600,height=600');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>打印</title>
</head>
<body>
${printContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
}在上述代码中，我们首先获取要打印的HTML内容，然后创建一个新的浏览器窗口，并将HTML内容写入该窗口。最后，我们调用print()方法来触发打印操作。
- 在
app.module.ts文件中，将PrintComponent添加到declarations数组中：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PrintComponent } from './print/print.component';
@NgModule({
declarations: [
AppComponent,
PrintComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- 运行应用程序。在命令行中运行以下命令：
ng serve- 打开浏览器，并访问
http://localhost:4200。将会看到一个包含打印按钮的页面。单击按钮时，将会弹出一个新的窗口显示要打印的HTML内容，并触发打印操作。
这是使用Angular 8在单击打印选项时显示完整的HTML内容的基本步骤。根据实际需求，你可以进一步定制打印样式和内容。
相关·内容
我在Angular8应用程序上工作，基于下拉菜单的选择，我必须打印当前的整个html，根据下拉菜单的选择进行打印，如演示中所示。但在这里，我无法看到选定的下拉值，而且显示在右侧的内容也被隐藏，当内容很大时，我在附加评论部分添加了滚动，当我单击打印时，我可以看
浏览 29提问于2020-09-22得票数 0
我有一个本地版本的Drupal 7和Xampp在windows上。当我将字段添加到节点的内容类型时，无论我将字段放在内容类型> myType > Manage字段中的顺序如何，最后都会看到字段的出现。在中，字段的顺序是：
浏览 3提问于2012-09-17得票数 0
我在Google的打印对话框中使用fauture save as pdf打印。该网站有两个显示选项: 1.非展开和2.展开。在第二个选项中，将给出锻炼的解决方案。当我们访问网站时，第一个选项是默认的，而要激活第二个选项，我们需要单击右上角的加号：我不明白为什么PDF文档的字体大小<
浏览 2提问于2020-05-22得票数 1
回答已采纳
7回答
当我查看页面的页面源(例如：)时，页面中没有太多的代码/信息。例如，在链接的页面上，页面源中没有显示任何类信息。，这是为什么？我如何访问完整(firebug )？我能用php/javascript来做吗？
浏览 9提问于2010-12-09得票数 2
我必须配置我的网页打印整个html生成的文档，通过按ctrl +p，我只能看到屏幕上显示的内容(类似于屏幕截图)。如果我在浏览器的屏幕上看到这一点，并按下ctrl + p，
浏览器将尝试打印的内容是：(只有1页)
如何配置当我执行ctrl +p或单击浏览器的打印选项时</e
浏览 0提问于2021-06-17得票数 0
1回答
我正在使用打印HTML内容作为PDF文档在角9应用程序中。我使用角度组件和引导带进行造型。我使用和排序、过滤和分页选项来向用户显示数据。默认情况下，mat-table是分页的，每页有10条记录，可以根据需要进行更改。因此，每当用户单击链接到Print(ngx-print)的mat-table按钮时，分页就会消失，数据源中的所有记录都会被打
浏览 1提问于2020-04-15得票数 0
在Google中，您可以单击菜单项，然后选择一个操作。例如，您可以单击“格式”菜单项，然后单击“对齐”>“左”以使文本左对齐。有什么方法可以看到当你这样做的时候什么代码在运行？
浏览 0提问于2013-10-28得票数 4
回答已采纳
4回答
我理解，当使用视图时，从单个节点的网格字段自然是不可能的，而且只有当每个字段来自不同的节点时，我们才能显示网格。
是否有一个模块允许视图基于来自同一个\单一\唯一节点的字段生成网格？我显然更喜欢一种只使用视图的方法，但是如果没有简单的\自动的方法来做到这一点而不安装外部模块，那就更好了。
浏览 0提问于2015-10-24得票数 5
回答已采纳
我试图从一个网页上抓取数据，而firebug显示了我想要提取的数据，但是当我右键单击“显示源代码”时，它没有显示在源代码中。casper有casper.GrabHTML方法吗，比如机械化和
浏览 2提问于2014-05-22得票数 1
回答已采纳
当im在我的html {{user.firstName}}中使用它时，数据是显示的，但是当我在html {{user?.firstName}}中使用它时，数据不是显示，而是没有错误，但是当我单击一个按钮时，显示的是数据。大家好，我使用metronic和angular8
<em
浏览 1提问于2020-01-08得票数 0
回答已采纳
我试图从一个url中提取并打印所有td标签的文本内容，该url拥有多个选项卡，这些选项卡显示页面的某些元素，并在单击时隐藏所有其他选项卡的内容(https://www.encodeproject.org具体地说，我正在尝试从"File Details“选项卡中提取所有td标签(在页面中间看到的完整<
浏览 24提问于2021-08-03得票数 1
回答已采纳
我使用过angular8中的bootstrap4选项卡。现在，如果我没有在第一个选项卡(即，user选项卡)中填写详细信息并单击submit，则必须禁用other选项卡，一旦单击submit按钮，则必须启用其他选项卡。此处基于点击其他页签，必须加载other页签中的内容，如果未点击other页签，则others页签中的详细信息一定不能填写。我试过
浏览 1提问于2020-02-15得票数 0
1回答
如何删除彩色盒关闭动画？
我显示了大量的缩略图；单击时，会显示一个包含完整内容的彩色框，其中包含指向上述内容的彩色框幻灯片的链接。当幻灯片颜色框关闭时，我将重新打开原始的完整内容，但关闭动画清楚地表明，幻灯片在内容重新打开之前已关闭。当我在初始化选项中将转换
浏览 2提问于2012-12-10得票数 0
回答已采纳
2回答
打印标签选择选项中的值
、、、
我不知道为什么，但当我单击打印按钮时，打印预览总是在标签选择选项上显示第一个选项<!><script type="text/javascript">{
var html="<html</
浏览 4提问于2013-04-18得票数 1
回答已采纳
我用这个代码从循环中打印post内容(Wordpress)内容显示没有问题，但当我使用阅读更多选项时，选项不工作，内容显示完整
浏览 33提问于2018-07-07得票数 0
我有一个使用HTML & JavaScript构建的Windows 8应用程序。它有一个ListView，显示从JSON数据源生成的位置的动态列表。如何从ListView打印完整的列表&当
浏览 0提问于2012-10-23得票数 4
1回答
我在使用JQuery方面相当有能力，而且通常可以让大多数事情都能处理一些杂乱无章的事情。我试着搜索这个问题，但是要么我搜索错了术语，要么没有公开的解决方案。在为订单表单页准备print.css文件时，有人问我是否可以删除文本输入并打印出它们的值，同样，还有一个包含地址的SELECT菜单。在进行研究时，我确实遇到了.val()方法(现在称为.fieldValue() )和.serializeArray()，因此我想我知
浏览 5提问于2012-09-19得票数 3
我正在执行jquery ajax搜索，并在datalist选项中打印响应，现在我想在单击datalist中的选项时触发一个事件，这些选项是ajax调用的返回值，当我在输入字段上编写一些内容时，它会显示选项中的值，但当我单击它时，我想显示一个警告框。<html>
&
浏览 5提问于2016-05-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
