Как создать файл в памяти для загрузки пользователем, но не через сервер? - PullRequest
Новая
       75

Как создать файл в памяти для загрузки пользователем, но не через сервер?

743 голосов
/ 08 сентября 2010

Можно ли как-нибудь создать текстовый файл на стороне клиента и предложить пользователю загрузить его без какого-либо взаимодействия с сервером?Я знаю, что не могу написать напрямую на их машину (безопасность и все), но могу ли я создать и предложить им сохранить ее?

Ответы [ 19 ]

7 голосов
/ 17 мая 2017

Как упоминалось ранее, filesaver - отличный пакет для работы с файлами на стороне клиента. Но это не очень хорошо с большими файлами. StreamSaver.js - это альтернативное решение (которое указано в FileServer.js), которое может обрабатывать большие файлы: 

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()
6 голосов
/ 05 февраля 2019

Пакет js-file-download с github.com / kennethjiang / js-file-download обрабатывает крайние случаи для поддержки браузера:

Просмотр источника , чтобы увидеть, как он использует методы, упомянутые на этой странице.

Установка 

yarn add js-file-download
npm install --save js-file-download

Использование 

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')
5 голосов
/ 07 сентября 2015

На основе ответа @Rick, который был действительно полезен.

Вы должны указать строку data, если хотите поделиться ей следующим образом: 

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

` Извините, я не могу комментировать ответ @ Rick из-за моей низкой репутации в StackOverflow.

Предложение изменить было отправлено и отклонено.

5 голосов
/ 20 января 2015

По состоянию на апрель 2014 года API-интерфейсы FileSytem могут быть не стандартизированы в W3C. Я полагаю, что любой, кто смотрит на решение с помощью blob, должен соблюдать осторожность.

HTML5 поднимается вверх

Список рассылки W3C в FileSytem API

3 голосов
/ 07 апреля 2013

Вы даже можете сделать один лучше, чем просто URI - используя Chrome, вы также можете предложить имя файла, как описано в этом посте о присвоении имени загрузке при использовании URI .

1 голос
/ 25 февраля 2019

Эта функция работает ниже. 

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }
0 голосов
/ 08 сентября 2010

Если файл содержит текстовые данные, я использую технику, чтобы поместить текст в элемент textarea и сделать так, чтобы пользователь выделил его (щелкните текстовое поле, затем ctrl-A), затем скопируйте, а затем вставьте в текстовый редактор.

0 голосов
/ 17 октября 2018

Для меня это сработало идеально, с тем же именем файла и расширением загружается

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'title' - это имя файла с расширением т.е.и т. д.

'file64' - это содержимое base64, например, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

0 голосов
/ 08 сентября 2010

Это на самом деле возможно - используйте Flash.

Вы можете сгенерировать контент с помощью JS, а затем инициализировать некоторые флэш-переменные или просто сделать все внутри флэш-фильма.

Пожалуйста, посмотритена это для некоторых важных замечаний.

Страница:
...