Почему локальный файл отображается поврежденным после загрузки с использованием javascript?

Добрый день,
Сценарий: у меня есть файл PDF в локальной системе, и когда пользователь нажимает кнопку, я хочу, чтобы он был загружен. Но после загрузки файл при открытии показывает, что он поврежден. При отправке этого запроса я заметил, что загружаемый файл имеет размер 1 КБ, а исходный размер файла составляет 28 КБ. Я не понял почему?
Я создаю файл excel в бэкэнде и сохраняю в местоположении пользователя, так как из-за огромных данных требуется много времени, поэтому после создания файла пользователь может загрузить файл.

Ниже приведены коды JS.

function download() {
    var filename="output.pdf";
    var element = document.createElement('a');
    var fileloc="C:\\ebooks\\PDF\\abc.pdf";
    element.setAttribute('href','data:text/plain;charset=utf-8, ' + 
    encodeURIComponent(fileloc));
    element.setAttribute('download', filename);
    document.body.appendChild(element);
    element.click();
}

Исходный файл хорош. Пожалуйста, поправьте меня, что я делаю неправильно.

Если вы уже знаете расположение документа, который у вас уже есть на диске C: ... почему скачать в первую очередь? Что вы подразумеваете под "местная система"? Сервер? Вы понимаете, что Браузер не может (если только не запущен с опасным флагом --allow-file-access-from-files) читать файлы с пользовательского диска - по понятным причинам..?

Roko C. Buljan 23.04.2022 10:24

Этот сценарий, о котором я прошу, является частью. Файл PDF или excel будет создан с сервера и сохранен в определенном месте из-за больших данных, файл excel занимает очень много времени, тогда я показываю последние 5 файлов для загрузки после создания файла. @RokoC.Buljan

Nadim 23.04.2022 10:33
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

URL-адрес схемы data:, который вы создаете, разрешается в простой текстовый документ (не PDF), содержащий текстC:\электронные книги\PDF\abc.pdf.

Вы сохраняете этот файл с расширением .pdf, поэтому, когда вы пытаетесь открыть его, программа чтения PDF пытается прочитать его как PDF (что не так).

Если вы хотите сохранить содержание файла по указанному вами пути, вам необходимо:

Попросите пользователя выбрать файл с помощью <input type="file"> (поскольку JS не разрешен доступ к файлам на диске пользователя, если он не выберет их явно и не сгенерирует URL-адрес с помощью метод FileReader.readAsDataURL().


Если вы создаете файл на сервере, как вы сказали, то нет необходимости создавать URL-адрес схемы data:, вы можете просто использовать URL-адрес схемы https:, который указывает на файл на сервере.

Веб-приложение находится на клиентской машине, и всякий раз, когда создается файл Excel, так как это занимает много времени и не хочет, чтобы пользователь ждал создания отчета, оно будет сохранено на той же машине, я показываю статус как отчет, доступный для загрузки, поэтому, когда пользователь нажмите кнопку загрузки. Я хочу, чтобы этот файл был выбран с той же машины и показан пользователю как загруженный. @Квентин

Nadim 23.04.2022 10:57

@Надим — Так нельзя. Политика безопасности в браузерах означает, что вы не можете получить доступ к локальным файлам (даже если веб-сервер находится на том же компьютере).

Quentin 23.04.2022 11:20

Спасибо, что разъяснили и подсказали мне. Я использую вызов API и в бэкэнде, используя apache IOutils, я копирую и отправляю потоки в ответ, а затем в js, используя blob, загружая файл. Пожалуйста, дайте +1 к моему вопросу, чтобы сделать Zero, и, возможно, это будет полезно для всех.

Nadim 23.04.2022 14:50

Другие вопросы по теме