import { Component, Renderer2, OnDestroy, AfterViewInit, ElementRef, OnInit, ViewChild } from '@angular/core'; import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { asBlob } from 'html-docx-js-typescript' // 要保存这个docx文件推荐引入file-saver哦,你可以用npm i -D file-saver来安装 import { saveAs } from 'file-saver' @Component({ selector: 'app-unit-details', templateUrl: './unit-details.component.html', styleUrls: ['./unit-details.component.scss'] }) export class UnitDetailsComponent implements OnInit { @ViewChild('box') box: ElementRef; constructor(private fb: FormBuilder, private renderer: Renderer2, private el: ElementRef) { this.validateForm = this.fb.group({ userName: [''], email: [''], password: [''], confirm: [''], comment: [''] }); } datas= { basicInfo: { name: "", addr: "", phone: "", total: "", height: "", layer: "", structure:"", coveredArea:"", builtUpArea:"", nature:"", east:"", south:"", west:"", north:"", routeAndTime:"", }, facilities:{ controlPosition:"", poolNumbe:"", poolPosition:"", poolCapacity:"", supplyMode:"", waterSources:"", waterSourcesPosition:"", alarm:false, spray:false, broadcast:false, smoke:false, hydrantsNumber:"", hydrantsPosition:"", pumpNumber:"", pumpRange:"", pumpFlow:"", pumpAdapter:"", SprayPumpNumber:"", SprayPumpRange:"", SprayPumpFlow:"", SprayPumpAdapter:"", elevator:"", stairs:"", Export:"", indoorHydrant:"", standardIndoorHydrant:"" }, tips:"" } aaa = true validateForm!: FormGroup; ngOnInit(): void { console.log(666,this.datas); } submitForm(value: { userName: string; email: string; password: string; confirm: string; comment: string }): void { for (const key in this.validateForm.controls) { this.validateForm.controls[key].markAsDirty(); this.validateForm.controls[key].updateValueAndValidity(); } console.log(value); } resetForm(e: MouseEvent): void { e.preventDefault(); this.validateForm.reset(); for (const key in this.validateForm.controls) { this.validateForm.controls[key].markAsPristine(); this.validateForm.controls[key].updateValueAndValidity(); } } validateConfirmPassword(): void { setTimeout(() => this.validateForm.controls.confirm.updateValueAndValidity()); } exportClick() { let box=`

`+this.datas.basicInfo.name+`基本情况

单位基本情况

单位名称

`+this.datas.basicInfo.name+`

单位地址

`+this.datas.basicInfo.addr+`

联系电话

`+this.datas.basicInfo.phone+`

人员总数

`+this.datas.basicInfo.total+`

建筑高度

`+this.datas.basicInfo.height+`

层数

建筑结构

占地面积

总建筑面积

主要使用性质

毗邻建筑

东:

南:

西:

北:

辖区中队行驶路线及时间

单位内部主要消防设施

消防控制室

位置

消防水源

消防水池数量

位置

总容量

补给方式

室外其他水源

位置

自动报警系统

自动喷水系统

应急广播系统

防排烟系统

室外消火栓数量

室外消火栓位置分布

消防泵

消火栓泵

数量:

扬程:m

流量L/S

水泵接合器

数量:

喷淋泵

数量:

扬程:m

流量:L/S

水泵接合器

数量:

消防电梯

数量及位置

疏散楼梯

数量及位置

安全出口

数量及位置

室内消火栓数量

标准层室内消火栓数量及位置

重点

提示

 

` // return const htmlString = ` Document `+ this.box.nativeElement.innerHTML + ` ` const fileData = asBlob(htmlString).then((data: any) => { saveAs(data, 'file.docx') // 保存为docx文件 }) } back() { window.history.back() } }