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

Ви можете використовувати URI даних. Підтримка браузера змінюється; див. Вікіпедію . Приклад:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Октет-потік повинен змусити запит на завантаження. В іншому випадку він, ймовірно, відкриється в браузері.

Для CSV ви можете використовувати:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Спробуйте демонстрацію jsFiddle .

Просте рішення для готових браузерів HTML5 ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Використання

download('test.txt', 'Hello world!');

Усі вищезазначені рішення працювали не у всіх браузерах. Ось що, нарешті, працює в IE 10+, Firefox та Chrome (і без jQuery чи будь-якої іншої бібліотеки):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Зауважте, що, залежно від вашої ситуації, ви можете також зателефонувати за URL.revokeObjectURL після видалення elem. Відповідно до документів для URL.createObjectURL :

Кожен раз, коли ви викликаєте createObjectURL (), створюється нова URL-адреса об'єкта, навіть якщо ви вже створили один і той же об’єкт. Кожен з них повинен бути звільнений, зателефонувавши за URL.revokeObjectURL (), коли вони вам більше не потрібні. Браузери автоматично випускають їх, коли документ завантажується; однак для оптимальної продуктивності та використання пам'яті, якщо є безпечні часи, коли ви можете явно їх розвантажувати, слід це зробити.

Усі вищенаведені приклади добре працюють у хромі та IE, але не виходять із Firefox. Не забудьте приєднати якір до тіла та зняти його після клацання.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Я із задоволенням використовую FileSaver.js . Його сумісність досить хороша (IE10 + та все інше), і користуватися нею дуже просто:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

У IE11 +, Firefox 25+ та Chrome 30+ працює наступний метод:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

Дивіться це в дії: http://jsfiddle.net/Kg7eA/

Firefox та Chrome підтримують URI даних для навігації, що дозволяє нам створювати файли, переходячи до URI даних, в той час як IE не підтримує його в цілях безпеки.

З іншого боку, IE має API для збереження краплі, який можна використовувати для створення та завантаження файлів.

Це рішення витягується безпосередньо з сховища github tiddlywiki (tiddlywiki.com). Я використовував tiddlywiki майже в усіх браузерах, і це працює як принадність:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Github repo: Завантажте модуль збереження

Рішення, яке працює над IE10: (мені потрібен був файл csv, але досить змінити тип і ім'я файлу на txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Якщо ви просто хочете перетворити рядок, який буде доступний для завантаження, ви можете спробувати це за допомогою jQuery.

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

Пакет 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')

Як згадувалося раніше, зберігач файлів - це чудовий пакет для роботи з файлами на стороні клієнта. Але, з великими файлами це не дуже добре. 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()

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

Станом на квітень 2014 року, API FileSytem можуть не стандартизуватися в W3C. Хтось, хто дивиться на рішення з краплями, повинен з обережністю нити.

HTML5 скелі піднімаються вгору

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

На основі відповіді @Rick, яка була дуже корисною.

dataЯкщо ви хочете поділитися ним таким чином, вам потрібно відкинути рядок :

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

`Вибачте, що не можу коментувати відповідь @ Rick через мою нинішню низьку репутацію в StackOverflow.

Редагувати пропозицію поділяв і відкинуто.

Ми можемо використовувати URL-адресу api, зокрема URL.createObjectURL () та Blob api для кодування та завантаження майже нічого.

Якщо завантаження невелике, це працює добре:

document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""

Якщо завантаження величезне, замість використання DOM, кращий спосіб - створити елемент посилання з параметрами завантаження та здійснити клацання.

Зверніть увагу, що елемент посилання не додається до документа, але натискання все одно працює! Це можливо створити завантаження багатьох сотень Mo таким чином.

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.id = "download"
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})  

<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>

Бонус! Завантажуйте будь-які циклічні об’єкти , уникайте помилок:

TypeError: значення циклічного об'єкта (Firefox) TypeError: Перетворення

кругова структура для JSON (Chrome і Opera) TypeError: Circular

посилання в аргументі значення не підтримується (Edge)

Використання https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

У цьому прикладі завантаження documentоб'єкта як json.

/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}


document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()

Ви навіть можете зробити це краще, ніж просто URI - використовуючи Chrome, ви також можете запропонувати ім’я, яке буде містити файл, як пояснено в цьому дописі про блог щодо іменування завантаження при використанні URI .

Ця функція нижче працювала.

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

У IE10 +, Edge, Opera, FF та Chrome працює наступний метод:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

Отже, просто зателефонуйте до функції:

saveDownloadedData('test.txt', 'Lorem ipsum');

Для мене це працювало чудово, з тим самим ім'ям файлу та розширенням завантажувались

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

'title' - це ім'я файлу з розширенням, тобто sample.pdf,waterfall.jpg і т.д ..

"file64" - це вміст base64, подібний до цього, тобто Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Я б використав <a></a>тег, а потім встановив href='path'. Після цього помістіть зображення між <a>елементами, щоб я мав змогу побачити його наочне зображення. Якщо ви хочете, ви можете створити функцію, яка змінитьhref так, що вона не буде просто тим самим посиланням, а буде динамічною.

Дайте <a>тег idтакож, якщо ви хочете отримати доступ до нього за допомогою JavaScript.

Починаючи з версії HTML:

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
     <img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

Тепер із JavaScript:

*Create a small json file*;

const array = [
     "mp3/tupac_shakur-how-do-you-want-it.mp3",
     "mp3/spice_one-born-to-die.mp3",
     "mp3/captain_planet_theme_song.mp3",
     "mp3/tenchu-intro.mp3",
     "mp3/resident_evil_nemesis-intro-theme.mp3"
];

//load this function on window
window.addEventListener("load", downloadList);

//now create a function that will change the content of the href with every click
function downloadList() {
     var changeHref=document.getElementById("mp3Anchor");

     var j = -1;

     changeHref.addEventListener("click", ()=> {

           if(j < array.length-1) {
               j +=1;
               changeHref.href=""+array[j];
          }
           else {
               alert("No more content to download");
          }
}

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