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 alarm="" let spray="" let broadcast="" let smoke="" if(this.datas.facilities.alarm){ alarm="有" }else{ alarm="无" } if(this.datas.facilities.spray){ spray="有" }else{ spray="无" } if(this.datas.facilities.broadcast){ broadcast="有" }else{ broadcast="无" } if(this.datas.facilities.smoke){ smoke="有" }else{ smoke="无" } 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+`

层数

`+this.datas.basicInfo.layer+`

建筑结构

`+this.datas.basicInfo.structure+`

占地面积

`+this.datas.basicInfo.coveredArea+`

总建筑面积

`+this.datas.basicInfo.builtUpArea+`

主要使用性质

`+this.datas.basicInfo.nature+`

毗邻建筑

东:`+this.datas.basicInfo.east+`

南:`+this.datas.basicInfo.south+`

西:`+this.datas.basicInfo.west+`

北:`+this.datas.basicInfo.north+`

辖区中队行驶路线及时间

`+this.datas.basicInfo.routeAndTime+`

单位内部主要消防设施

消防控制室

位置

`+this.datas.facilities.controlPosition+`

消防水源

消防水池数量

`+this.datas.facilities.poolNumbe+`

位置

`+this.datas.facilities.poolPosition+`

总容量

`+this.datas.facilities.poolCapacity+`

补给方式

室外其他水源

`+this.datas.facilities.waterSources+`

位置

`+this.datas.facilities.waterSourcesPosition+`

自动报警系统

`+alarm+`

自动喷水系统

`+spray+`

应急广播系统

`+broadcast+`

防排烟系统

`+smoke+`

室外消火栓数量

`+this.datas.facilities.hydrantsNumber+`

室外消火栓位置分布

`+this.datas.facilities.hydrantsPosition+`

消防泵

消火栓泵

数量:`+this.datas.facilities.pumpNumber+`

扬程:`+this.datas.facilities.pumpRange+`m

流量`+this.datas.facilities.pumpFlow+`L/S

水泵接合器

数量:

`+this.datas.facilities.pumpAdapter+`

喷淋泵

数量:`+this.datas.facilities.SprayPumpNumber+`

扬程:`+this.datas.facilities.SprayPumpRange+`m

流量:`+this.datas.facilities.SprayPumpFlow+`L/S

水泵接合器

数量:

`+this.datas.facilities.SprayPumpAdapter+`

消防电梯

数量及位置

`+this.datas.facilities.elevator+`

疏散楼梯

数量及位置

`+this.datas.facilities.stairs+`

安全出口

数量及位置

`+this.datas.facilities.Export+`

室内消火栓数量

`+this.datas.facilities.indoorHydrant+`

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

`+this.datas.facilities.standardIndoorHydrant+`

重点

提示

`+this.datas.tips+`

 

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