HTML <object>- скачать файл, если он не может быть загружен

Question

У меня есть веб-приложение, которое обслуживает файлы для просмотра.Если это PDF, я просто прикрепляю его к элементу <object>.Тем не менее, приложение поддерживает файлы Word, Excel и PowerPoint.Я пытался найти способы их предварительного просмотра в Интернете, но, по-видимому, у нас нет подходящей технологии для этого (по крайней мере, изначально в браузере).Поэтому вместо этого я хочу, чтобы пользователь загружал файл для локального просмотра.

Внешний интерфейс построен с использованием React, а внутренний - с Spring Boot.В настоящее время все статические ресурсы, которые являются документами (PDF-файлы, документы, электронные таблицы и т. Д.), Обслуживаются в соответствии с параметром "/ document-files / **" ant-matcher.Кроме того, эти ресурсы можно просматривать только в частном порядке, а это означает, что вам необходимо войти в приложение, чтобы просмотреть их.Вот как выглядит часть моего файла SecurityConfig:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    String documentRootPath = "file:" + this.documentRootPath;
    registry.addResourceHandler("/resources/**").addResourceLocations("resources/");
    registry.addResourceHandler("/document-files/**").addResourceLocations(documentRootPath);
}

@Override
public void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests() // ant matchers below are api routes and the baseUri for serving documents
        .antMatchers("/clients/**", "/projects/**", "/documents/**", "/document-files/**").authenticated()
        .anyRequest().permitAll() //... additional method chaining omitted for brevity
}

Проблема, по-видимому, только во внешнем интерфейсе.Я не думаю, что это имеет какое-либо отношение к конфигурации, но я разместил это для справки.С этой конфигурацией я могу нормально скачивать и просматривать файлы PDF, используя <object>, но для всех остальных файлов файл не загружается, поэтому в <object> я добавляю ссылку, чтобы открыть файл следующим образом:

render() {
// some code omitted for brevity
    return (
        <Module>
            {!this.state.currDoc ? (
                <ul className={this.state.displayType}>{list}</ul>
            ) : (
                <object
                data={"/document-files" + this.state.filePath} 
                type={this.mimeTypes[document.fileType]}
                title={"Current Document: " + document.description + "." + document.fileType.toLowerCase()}>
                    {document.fileType === "PDF" ? "File could not be loaded!" : <div id="download-prompt">This file cannot be previewed online, click below to download and open locally.<a href={"http://localhost:3000/document-files" + this.state.filePath} download>Open</a></div>}
                </object>
            )}
        </Module>
    );
}

После нажатия появляется диалоговое окно «Сохранить как» с заполненным именем файла и правильным типом пантомимы, но после нажатия кнопки «Сохранить» Chrome отображает «Не удалось - файл отсутствует».Я попытался написать href с и без имени хоста.Я также попытался удалить атрибут загрузки, но он перенаправляет страницу обратно на себя.Я даже пробовал атрибут onLoad на <object>, но, видимо, это работает только для изображений.Я проверил вкладку «Сеть» на инструментах разработчика, и в нем нет записи о загружаемом файле, в отличие от PDF-файлов, в которых записан запрос.

Как я могу сделать так, чтобы файлы, отличные от PDF, загружались правильно с помощью этой настройки?

Answer 1

Благодаря javilobo8 GitHubGist я нашел способ загрузки файлов с помощью Axios, библиотеку которой я уже использовал в своем приложении для начала.Для быстрого ознакомления вот его код:

axios({
    url: 'http://localhost:5000/static/example.xlsx',
    method: 'GET',
    responseType: 'blob', // important
}).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
});

Кроме того, есть несколько способов работы с BLOB-объектами, в зависимости от того, используете ли вы IE, браузер, поддерживающий объект Blob HTML5, или другой браузер.Этот вопрос помогает разделить код на 3 части, чтобы сформировать dataUri для загрузки необработанных данных.После настройки моего <a> тэга я просто запускаю событие click и скачиваю файлы не в формате PDF!