Angular将富文本内容变成txt文件上传以及回显

1. 富文本内容formData上传

// 富文本内容
const richTextContent = document.getElementById('richTextEditor').textContent;

// 创建一个Blob对象
const blob = new Blob([richTextContent], { type: 'text/plain' });

// 创建一个FormData对象，将Blob对象添加到其中
const formData = new FormData();
formData.append('file', blob, 'richText.txt');

管道pipe解析回显

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Pipe({
  name: 'fileContent'
})
export class FileContentPipe implements PipeTransform {
  constructor(private http: HttpClient) {}

  transform(fileUrl: string): Promise<string> {
    return this.http
      .get(fileUrl, { responseType: 'text' })
      .toPromise()
      .then(data => {
        return data;
      })
      .catch(() => {
        return 'Error loading content';
      });
  }
}


'https://your-server/your-file.txt' | fileContent | async

最好用ng的dom扫描器扫描一下，防止ssr和xss攻击导致富文本样式丢失

2. 判断是不是合法的http路径

function isValidHttpUrl(url: string): boolean {
  if (!url) {
    return false;
  }

  // 使用正则表达式检查是否以 http:// 或 https:// 开头
  const httpPattern = /^http(s)?:///;
  return httpPattern.test(url);
}