Просмотр полной версии : Как распечатать/выгрузить файл на диск?
Здравствуйте.
Известно, что прочитать содержимое файла с диска можно с помощью элемента <input type='file'>.
Как выгрузить файл в папку "Загрузки" тоже известно.
Следующий js код создает blob с текстом 'Hello, world!' и выгружает его в текстовый файл hello.txt
let tag_a = document.createElement('a');
tag_a.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
tag_a.href = URL.createObjectURL(blob);
tag_a.click();
Но выгрузка файла происходит в папку "Загрузки".
А как сделать так, чтобы файл сохранялся НЕ в папку "Загрузки", а в ту папку, которую я укажу?
То есть, как выбрать директорию для сохранения файла?
Многие сайты в интернете это делают.
Пример 1.
Ресурс для рисования диаграмм
https://app.diagrams.net/
Тут как в Windows приложении есть меню файл->сохранить как..
Пример 2.
Письмо из электронной почты можно распечатать либо на принтер, либо в pdf файл на диск, при этом директорию для файла можно выбрать.
Буду рад любой подсказке.
Пишу на PHP и JavaScript.
Vlasenko Fedor
11.01.2021, 16:23
То есть, как выбрать директорию для сохранения файла?
настраивается индивидуально для каждого клиента в настройках браузера
То, что папку "Загрузки" можно где-то прописать я не сомневаюсь, но вопрос не в этом. Сама веб-страница или веб-приложение позволяет открыть диалог обозревателя папок и выбрать директорию, в которую я хочу сохранить файл. Как они это делают?
Vlasenko Fedor
11.01.2021, 16:42
Как они это делают?
используют настройки браузера
Вы хотите сказать, что JavaScript позволяет менять настройки браузера ??? Могу я попросить вас поделиться ссылкой на материал о данной функциональности?
Vlasenko Fedor
11.01.2021, 16:52
Нет не может. Клиент не может указывать папку для сохранения
Папка сохранения и параметры автоматического сохранения находятся в настройках браузера
Раз клиент не может указать папку, тогда остаются первоначальные вопросы:
1. какой демон отображает окно обозревателя директорий?
2. кто загружает файл на диск клиента именно в ту директорию, которая была указана?
Это все делает серверный код?
Как серверный код может заставить отобразить windows-диалог выбора папок на клиенте?
Как серверный код может заставить клиента загрузить себе файл в определенную директорию?
1. какой демон отображает окно обозревателя директорий?
2. кто загружает файл на диск клиента именно в ту директорию, которая была указана?
Все это делает браузер.
В настройках браузера ставите галочку - всегда запрашивать папку для скачивания.
Например в Хроме
Настройки -> Дополнительные -> Скачанные файлы.
Там можно или задать постоянную папку или включить флажок "Всегда указывать место для скачивания"
Либо мы разговариваем о разных вещах, либо я слишком тупой.
Я вас очень прошу, зайдите по ссылке
https://app.diagrams.net/
При создании новой диаграммы браузер спрашивает директорию где я хочу ее создать. При этом в настройках браузера папка "загрузки" у меня задана железно, и все файлы которые я просто скачиваю по ссылкам вопросов не задают.
MallSerg
12.01.2021, 03:06
У меня не спрашивает но на всякий случай.
<a onclick = "alert ( showSaveFilePicker() )"> window.showSaveFilePicker();</a>
https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker
.
У меня не спрашивает но на всякий случай.
<a onclick = "alert ( showSaveFilePicker() )"> window.showSaveFilePicker();</a>
Это работает. А дальше что? В указаный файл записать надо.
Я пробовал такой вариант (как указано в примерах)
const fh = await window.showSaveFilePicker();
const ws = await fh.createWritable();
await ws.write(blob);
await ws.close();
Строки 1, 2 работают
Строка 3 вылетает с ошибкой.
В сети находил вопросы на такое поведение. Только ответов не нашел.
В каком браузере не спрашивает?
У меня Хром спрашивает, Мозила - нет.
Занятная штука получается
Вот такой простой код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<button id="but">Save</button>
<script>
const saveToFile = async (str) => {
const blob = new Blob([str], {type: 'text/plain'});
const fh = await window.showSaveFilePicker();
const ws = await fh.createWritable();
await ws.write(blob);
await ws.close();
}
const str ='Строка строка ..... строка'
document.getElementById('but').addEventListener('c lick', ()=> {
saveToFile (str)
.then ( _ => console.log('Записано!') )
})
</script>
</body>
</html>
Работает как надо. Спрашивает имя файла и записывает в него строчку.
Но если в это время открыты отладочные средства Хрома, то все вылетает с ошибкой
"TypeError: This writable stream writer has been released and cannot be used to monitor the stream's state"
на await ws.write(blob);
(На сайте https://app.diagrams.net/ - тоже самое - в отладчике вылетает с ошибкой)
PS. Но если в отладчике после остановке на ошибке жать "продолжить", то все срабатывает.
В Файрфоксе этих функций нет вообще.
В мобильном Хроме тоже не работает.
VORAA, СПАСИБО ВАМ ОГРОМНОЕ.
А то я уже было отчаялся.
Интересно, в cбербанк онлайн при печати чека в pdf, каким механизмом они пользуются. Вроде сбер во всех браузерах работает. Или для вывода на печать используется какой-то свой API?
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot