Блог

Главная - Вопросы по программированию - React: как отобразить текстовый / html http-ответ?

React: как отобразить текстовый / html http-ответ?

#reactjs #typescript #axios #httpresponse

#reactjs #typescript #axios #httpresponse

Вопрос:

Я создаю приложение, которое загружает файл .xls на сервер, а ответ представляет собой текстовый / html-ответ. Я хотел бы просмотреть ответ (точно так же, как в инструменте разработчика). Что-то вроде:

         axios.post(config.serverUrl   "/file", formData)
            .then(response => {

                //Preview response code
            }

Я пытался dangerouslySetInnerHTML={{ __html: {response.data} }} , но это не сработало.

Пример ответа:

 <!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

Предварительный просмотр должен выглядеть следующим образом:

 <!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

Комментарии:

1. Можете ли вы привести краткий пример ответа, а также желаемое поведение?

Ответ №1:

Вы можете использовать dangerouslySetInnerHTML для прямой настройки HTML:

  <div dangerouslySetInnerHTML={response} />