Блог

Главная - Вопросы по программированию - Я пытаюсь загрузить локальный файл с помощью кнопки, но файл не может быть найден

Я пытаюсь загрузить локальный файл с помощью кнопки, но файл не может быть найден

#javascript #vue.js

Вопрос:

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

введите описание изображения здесь

И сценарий для кнопки выглядит следующим образом:

 download(){
      const link = document.createElement("a")
      link.href = "../../public/Programme robot/programme_palettisation_robot.tb"
      link.setAttribute("download", "programme_palettisation_robot.tb")
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      setTimeout(function() { URL.revokeObjectURL(link.href); },1500)
    }

Проблема в том, что когда я нажимаю на кнопку, она говорит, что файл не может быть найден.

введите описание изображения здесь

Вы можете мне в этом помочь?

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

1. Что вы пробовали до сих пор? Где ты застрял? Если этот файл хранится в public , почему бы не использовать правильную ссылку?

2. Вы можете проверить, какой URL он пытается использовать. Не используйте относительный путь, он здесь непригоден.

3. Файл хранится в public , и я попытался использовать такую ссылку: <a href="../../public/Programme robot/programme_palletisation_robot.tb" download>Télécharger</a>

4. @EstusFlask как я могу это сделать?

Ответ №1:

Я предполагаю, что вы используете интерфейс командной строки Vue. Vue запускает локальный сервер в режиме разработки, в основном создавая структуру, аналогичную той, которую вы видите в dist папке. Ваши ссылки href не анализируются webpack во время сборки, поэтому вы на самом деле пытаетесь загрузить файл relative из корневого каталога.

Поэтому использование абсолютного пути к файлу должно это исправить.

 link.href = "/Programme robot/programme_palettisation_robot.tb"

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

1. Я только что попробовал ваше решение, но у меня все еще есть моя проблема

2. Можно ли проверить, действительно ли файл существует, перейдя по http://localhost:WHATEVERYOURPORTIS/public/Programme robot/programme_palettisation_robot.tb ссылке, и посмотреть, правильно ли он загружается?

3. У меня есть это сообщение : vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path "/public/Programme robot/programme_palettisation_robot.tb" я думаю, что, возможно, я поместил свой файл не в то место, но я не понимаю, почему. В VSCode у меня есть файл в public папке моего проекта

4. Моя вина. Вы должны выполнить эмиссию /public , так как файлы, содержащиеся в этом каталоге, доступны из корневого каталога. Я скорректировал свой ответ.

5. Доступно ли это по адресу http://localhost:WHATEVERYOURPORTIS/Programme robot/programme_palettisation_robot.tb ?

Ответ №2:

Я нашел, в чем была проблема (я думаю). Файл, который я хотел загрузить, был .tb файлом, который, я думаю, не поддерживается VueJS. Я поместил этот файл в .zip папку, и теперь он работает.

Метки: ,