İstemci tarafında bir metin dosyası oluşturmanın ve kullanıcıdan sunucuyla herhangi bir etkileşimde bulunmadan dosyayı indirmesini istememin bir yolu var mı? Makinelerine doğrudan yazamadığımı biliyorum (güvenlik ve hepsi), ancak onları kaydedip kaydetmelerini isteyebilir miyim?

Veri URI'lerini kullanabilirsiniz. Tarayıcı desteği değişiklik gösterir; Wikipedia'ya bakınız . Misal:

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

Octet-stream bir indirme istemini zorlamak içindir. Aksi takdirde, muhtemelen tarayıcıda açılır.

CSV için şunları kullanabilirsiniz:

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

JsFiddle demosunu deneyin .

HTML5'e hazır tarayıcılar için basit çözüm ...

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>

kullanım

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

Yukarıdaki tüm çözümler tüm tarayıcılarda çalışmadı. Son olarak IE 10+, Firefox ve Chrome'da (ve jQuery veya başka bir kütüphane olmadan) çalışanlar:

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);
    }
}

Durumunuza bağlı olarak, kaldırdıktan sonra URL.revokeObjectURL öğesini de aramak isteyebilirsinizelem . URL.createObjectURL dokümanlarına göre :

CreateObjectURL () öğesini her aradığınızda, aynı nesne için zaten bir tane oluşturmuş olsanız bile yeni bir nesne URL'si oluşturulur. Bunların her birinin artık ihtiyacınız olmadığında URL.revokeObjectURL () çağrılarak serbest bırakılması gerekir. Belge kaldırıldığında tarayıcılar bunları otomatik olarak serbest bırakır; ancak, optimum performans ve bellek kullanımı için, bunları açıkça kaldırabileceğiniz güvenli zamanlar varsa, bunu yapmalısınız.

Yukarıdaki örneklerin tümü krom ve IE'de iyi çalışır, ancak Firefox'ta başarısız olur. Lütfen gövdeye bir çapa eklemeyi ve tıkladıktan sonra çıkarmayı düşünün.

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);

Mutlu bir şekilde FileSaver.js kullanıyorum . Uyumluluğu oldukça iyidir (IE10 + ve diğer her şey) ve kullanımı çok basittir:

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

IE11 +, Firefox 25+ ve Chrome 30+ sürümlerinde aşağıdaki yöntem çalışır:

<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>

Bunu Eylemde görün: http://jsfiddle.net/Kg7eA/

Firefox ve Chrome, bir veri URI'sına giderek dosya oluşturmamıza izin verirken IE güvenlik açısından desteklemiyor.

Öte yandan IE, dosyaları oluşturmak ve indirmek için kullanılabilecek bir blob kaydetmek için API'ye sahiptir.

Bu çözüm doğrudan tiddlywiki'nin (tiddlywiki.com) github deposundan çıkarılır. Neredeyse tüm tarayıcılarda tiddlywiki kullandım ve bir cazibe gibi çalışıyor:

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: Tasarruf modülünü indirin

IE10 üzerinde çalışan bir çözüm: (Bir csv dosyasına ihtiyacım vardı, ancak türü ve dosya adını txt olarak değiştirmek yeterli)

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")

Bir dizeyi indirilmek üzere dönüştürmek istiyorsanız, bunu jQuery kullanarak deneyebilirsiniz.

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

Paket js-file-indir gelen github.com/kennethjiang/js-file-download tarayıcı desteği için kolları uç örnekleri:

Bu sayfada bahsedilen teknikleri nasıl kullandığını görmek için kaynağı görüntüleyin .

Kurulum

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

kullanım

import fileDownload from 'js-file-download'

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

fileDownload(data, 'filename.csv', 'text/csv')

Daha önce de belirtildiği gibi, dosya koruyucu , istemci tarafındaki dosyalarla çalışmak için harika bir pakettir. Ancak, büyük dosyalarla iyi sonuç vermez. StreamSaver.js , büyük dosyaları işleyebilen alternatif bir çözümdür (FileServer.js'de gösterilmiştir):

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();

Nisan 2014 itibariyle, FileSytem API'leri W3C'de standartlaştırılmamış olabilir. Çözüme blob ile bakan herkes dikkat etmelidir, sanırım.

HTML5 öne çıkıyor

FileSytem API'sindeki W3C Posta Listesi

@Rick cevabına dayanarak gerçekten yardımcı oldu.

dataBu şekilde paylaşmak istiyorsanız dizeyi kaydırmanız gerekir:

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

`` StackOverflow'daki mevcut düşük itibarım nedeniyle @ Rick'in cevabı hakkında yorum yapamıyorum.

Bir düzenleme önerisi paylaşıldı ve reddedildi.

Biz kullanabilirsiniz URL özellikle api URL.createObjectURL () ve Blob hemen her şeyi kodlamak ve indirmek için api .

İndirmeniz küçükse, bu iyi çalışır:

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 = ""

İndirme işleminiz çok büyükse, DOM kullanmak yerine daha iyi bir yol, indirme parametreleriyle bir bağlantı öğesi oluşturmak ve bir tıklamayı tetiklemektir.

Bağlantı öğesinin belgeye eklenmediğine, ancak tıklamanın yine de işe yaradığına dikkat edin! Bu, yüzlerce Mo'nın bu şekilde indirilmesini sağlamak mümkündür.

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>

Bonus! Herhangi bir döngüsel nesneyi indirin , hatalardan kaçının:

TypeError: döngüsel nesne değeri (Firefox) TypeError: Dönüştürme

JSON (Chrome ve Opera) TypeError: Dairesel şeklinde dairesel yapı

değer bağımsız değişkenindeki başvuru desteklenmiyor (Edge)

Https://github.com/douglascrockford/JSON-js/blob/master/cycle.js kullanma

Bu örnekte, documentnesneyi json olarak indirme .

/* 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'lerden daha iyisini bile yapabilirsiniz - Chrome'u kullanarak, URI'leri kullanırken indirme adlandırma hakkında bu blog yazısında açıklandığı gibi, dosyanın adını da önerebilirsiniz .

Aşağıdaki fonksiyon işe yaradı.

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

Aşağıdaki yöntem IE10 +, Edge, Opera, FF ve Chrome'da çalışır:

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);
    }
}

Yani, fonksiyonu çağırmanız yeterlidir:

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

Benim için bu mükemmel çalıştı, aynı dosya adı ve uzantısı indiriliyor

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

'title', uzantılı dosya adıdır, yani sample.pdf,waterfall.jpg vb ..

'file64' böyle bir şey temel64 içeriğidir, yani, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Bir <a></a>etiket kullanmak ve sonra ayarlayın href='path'. Daha sonra, <a>öğelerin arasına bir görüntü yerleştirin, böylece görmek için bir görselim olsun. İsterseniz, değiştirilecek bir işlev oluşturabilirsiniz.href yalnızca aynı bağlantı olmayacak, aynı zamanda dinamik .

Javascript ile erişmek istiyorsanız <a>etikete bir idde verin .

HTML Sürümünden Başlayarak:

<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>

Şimdi JavaScript ile:

*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");
          }
}

Dosya metin verileri içeriyorsa, kullandığım bir teknik, metni bir textarea öğesine yerleştirmek ve kullanıcının onu seçmesini sağlamaktır (textarea'yı ve ardından ctrl-A'yı tıklayın), ardından kopyalayıp ardından bir metin düzenleyicisine yapıştırarak yapıştırmaktır.