image1-popup.component.ts 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import { HttpClient } from '@angular/common/http';
  2. import { Component, Input } from '@angular/core';
  3. import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
  4. import * as mammoth from 'mammoth';
  5. @Component({
  6. selector: 'app-image1-popup',
  7. templateUrl: './image1-popup.component.html',
  8. styleUrls: ['./image1-popup.component.scss'],
  9. standalone: true,
  10. imports: [IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon,]
  11. })
  12. export class Image1PopupComponent {
  13. @Input() imageUrl: string = '';
  14. @Input() description: string = '';
  15. content: any = null;
  16. constructor(private http: HttpClient,private modalController: ModalController) {}
  17. ngOnInit() {this.loadAndParseWordFile();}
  18. // 加载并解析本地 Word 文件
  19. // 加载并解析本地 Word 文件
  20. loadAndParseWordFile() {
  21. // 从本地 assets 文件夹获取文件
  22. const fileName = 'ssbt.docx'; // 请替换为你实际的文件名
  23. this.http.get(`assets/${fileName}`, { responseType: 'arraybuffer' })
  24. .subscribe(
  25. (arrayBuffer: ArrayBuffer) => {
  26. console.log('Received arrayBuffer:', arrayBuffer); // 调试日志,查看是否成功加载
  27. // 使用 mammoth 提取文本
  28. mammoth.extractRawText({ arrayBuffer: arrayBuffer })
  29. .then((result: any) => {
  30. this.content = {
  31. text: result.value,
  32. images: []
  33. };
  34. console.log('Extracted Text:', result.value); // 输出解析的文本内容
  35. })
  36. .catch((err: any) => {
  37. console.error('Error parsing Word file:', err);
  38. });
  39. // 使用 mammoth 将 Word 转换为 HTML
  40. mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
  41. .then((result: any) => {
  42. console.log('Converted HTML:', result.value); // 输出转换的 HTML
  43. const imgMatches = result.value.match(/<img.*?src="([^"]+)"/g);
  44. if (imgMatches) {
  45. this.content.images = imgMatches.map((img: string) => {
  46. const match = img.match(/src="([^"]+)"/);
  47. return match ? match[1] : '';
  48. });
  49. }
  50. console.log('Extracted Images:', this.content.images);
  51. })
  52. .catch((err: any) => {
  53. console.error('Error parsing images from Word file:', err);
  54. });
  55. },
  56. (error) => {
  57. console.error('Error loading Word file:', error); // 加载文件时出现错误
  58. }
  59. );
  60. }
  61. close() {
  62. this.modalController.dismiss();
  63. }
  64. }