Angular [Innerhtml] визуализирует статические файлы, отличные от ответа webapi

Необходимо отображать содержимое HTML-файла в DIV, работает в статическом файле, происходит сбой в динамическом файле.

Что работает:

У меня есть файл EML, который, как я подозревал, мне пришлось проанализировать. Переименовываем расширение файла в HTML, что приятно визуализирует его несколько прилично, все теги удаляются и корректно форматируются, если подаются из статического файла

public getOneFileStatic(fn: string): Observable<any> {
    return this.http.get(fn, { responseType: 'text' })
      .pipe(tap(_ => console.log('== getOneFileStatic ')));
  }

и называется просто:

svc.getOneFileStatic('/assets/files/eml-test.html')
            .subscribe(x => {                        
                    this.theinner = x;
                });

и шаблон

<div class="card-block">
      <div [innerHTML]="theinner | safeHtml" style="width: 100%"></div>
</div>

Что нет, и показывает необработанный текст с тегами

Затем попробовал динамический способ вернуться из вебапи:

public getOneFile(fn: string): Observable<any> {
    return this.http.get( this.baseUrl + '/api/ServerFiles/GetStream/' + fn , { responseType: 'text' })
      .pipe(tap(_ => console.log('== getOneFile '))
      );
  }

Результаты - это поток текста со всеми тегами и содержимым MIME, сохраненными как есть.

Я смотрел в

Я проверил заголовки содержимого и попробовал: текст, блоб и т. Д., А также приложение / октет. Но все они выглядят хорошо и отображаются в сыром виде с тегами HTML, которые никогда не соблюдаются.

Заголовки: когда подается статический файл

Referrer Policy: no-referrer-when-downgrade
HTTP/1.1 304 Not Modified
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
ETag: W/"cb81-Rb8BCAxZvy4eWO/lkggYEFPkXzo"
Date: Wed, 16 Jan 2019 21:33:45 GMT
Connection: keep-alive

когда встречается динамический файл:

HTTP/1.1 200 OK
Date: Thu, 17 Jan 2019 00:52:35 GMT
Content-Type: text/html
Server: Kestrel
Content-Length: 97197
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200

Примечание: в случае статического заголовка Content-Type нет. Но мне нужно указать один код в моем сервере при потоковой передаче файлового содержимого, например Kestrel и в.Net Code.

Источник

0 ответов

Вы можете попробовать очистить полученный необработанный текст с помощью тегов.

Посмотрите пример Angular Sanizitation API (простой, но может быть достаточно).

Источник
Другие вопросы по тегам