Có cách nào tôi có thể tạo một tệp văn bản ở phía máy khách và nhắc người dùng tải xuống mà không cần bất kỳ tương tác nào với máy chủ không? Tôi biết tôi không thể viết trực tiếp vào máy của họ (bảo mật và tất cả), nhưng tôi có thể tạo và nhắc họ lưu nó không?

Bạn có thể sử dụng URI dữ liệu. Hỗ trợ trình duyệt khác nhau; xem Wikipedia . Thí dụ:

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

Luồng octet là để buộc một dấu nhắc tải xuống. Nếu không, nó có thể sẽ mở trong trình duyệt.

Đối với CSV, bạn có thể sử dụng:

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

Hãy thử bản demo jsFiddle .

Giải pháp đơn giản cho các trình duyệt sẵn sàng 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>

Sử dụng

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

Tất cả các giải pháp trên không hoạt động trong tất cả các trình duyệt. Đây là những gì cuối cùng hoạt động trên IE 10+, Firefox và Chrome (và không có jQuery hoặc bất kỳ thư viện nào khác):

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

Lưu ý rằng, tùy thuộc vào tình huống của bạn, bạn cũng có thể muốn gọi URL.revokeObjectURL sau khi xóa elem. Theo các tài liệu cho URL.createObjectURL :

Mỗi lần bạn gọi createdObjectURL (), một URL đối tượng mới sẽ được tạo, ngay cả khi bạn đã tạo một URL cho cùng một đối tượng. Mỗi trong số này phải được phát hành bằng cách gọi URL.revokeObjectURL () khi bạn không còn cần chúng nữa. Các trình duyệt sẽ tự động giải phóng chúng khi tài liệu được tải; tuy nhiên, để sử dụng hiệu suất và bộ nhớ tối ưu, nếu có thời gian an toàn khi bạn có thể dỡ chúng một cách rõ ràng, bạn nên làm như vậy.

Tất cả các ví dụ trên chỉ hoạt động tốt trong chrome và IE, nhưng thất bại trong Firefox. Vui lòng xem xét việc gắn một mỏ neo vào cơ thể và loại bỏ nó sau khi nhấp chuột.

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

Tôi rất vui khi sử dụng FileSaver.js . Khả năng tương thích của nó khá tốt (IE10 + và mọi thứ khác), và nó rất đơn giản để sử dụng:

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

Phương pháp sau hoạt động trong IE11 +, Firefox 25+ và 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>

Xem điều này trong hành động: http://jsfiddle.net/Kg7eA/

Firefox và Chrome hỗ trợ URI dữ liệu để điều hướng, cho phép chúng tôi tạo tệp bằng cách điều hướng đến URI dữ liệu, trong khi IE không hỗ trợ cho mục đích bảo mật.

Mặt khác, IE có API để lưu một blob, có thể được sử dụng để tạo và tải xuống các tệp.

Giải pháp này được trích xuất trực tiếp từ kho lưu trữ github của tiddlywiki (tiddlywiki.com). Tôi đã sử dụng tiddlywiki trong hầu hết các trình duyệt và nó hoạt động như một cơ duyên:

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: Tải xuống mô-đun tiết kiệm

Giải pháp hoạt động trên IE10: (Tôi cần một tệp csv, nhưng nó đủ để thay đổi loại và tên tệp thành 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")

Nếu bạn chỉ muốn chuyển đổi một chuỗi có sẵn để tải xuống, bạn có thể thử điều này bằng jQuery.

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

Gói js-file-download từ github.com/kennethjiang/js-file-doad xử lý các trường hợp cạnh để hỗ trợ trình duyệt:

Xem nguồn để xem cách nó sử dụng các kỹ thuật được đề cập trên trang này.

Cài đặt

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

Sử dụng

import fileDownload from 'js-file-download'

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

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

Như đã đề cập trước đó, filesaver là một gói tuyệt vời để làm việc với các tệp ở phía máy khách. Nhưng, nó không làm tốt với các tệp lớn. StreamSaver.js là một giải pháp thay thế (được chỉ ra trong FileServer.js) có thể xử lý các tệp lớn:

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

Kể từ tháng 4 năm 2014, API FileSytem có thể không được tiêu chuẩn hóa trong W3C. Bất cứ ai nhìn vào giải pháp với blob nên thận trọng, tôi đoán.

Đá HTML5 đứng lên

Danh sách gửi thư của W3C trên API FileSytem

Dựa trên câu trả lời @Rick thực sự hữu ích.

Bạn phải cắt chuỗi datanếu bạn muốn chia sẻ nó theo cách này:

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

`Xin lỗi tôi không thể nhận xét về câu trả lời của @ Rick do danh tiếng thấp hiện tại của tôi trong StackOverflow.

Một đề nghị chỉnh sửa đã được chia sẻ và từ chối.

Chúng tôi có thể sử dụng URL api, cụ thể là URL.createObjectURL () và Blob api để mã hóa và tải xuống khá nhiều thứ.

Nếu tải xuống của bạn nhỏ, điều này hoạt động tốt:

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

Nếu tải xuống của bạn rất lớn, thay vì sử dụng DOM, cách tốt hơn là tạo thành phần liên kết với các tham số tải xuống và kích hoạt nhấp chuột.

Lưu ý rằng phần tử liên kết không được thêm vào tài liệu nhưng dù sao thì nhấp chuột vẫn hoạt động! Điều này có thể tạo ra một bản tải xuống của hàng trăm Mo theo cách này.

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>

Tặng kem! Tải xuống bất kỳ đối tượng tuần hoàn , tránh các lỗi:

TypeError: giá trị đối tượng tuần hoàn (Firefox) TypeError: Chuyển đổi

cấu trúc vòng tròn thành JSON (Chrome và Opera) TypeError: Thông tư

tham chiếu trong đối số giá trị không được hỗ trợ (Edge)

Sử dụng https://github.com/douglascrockford/JSON-js/blob/master/ Motorcycle.js

Trong ví dụ này, tải documentđối tượng dưới dạng 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()

Bạn thậm chí có thể làm tốt hơn một URI - sử dụng Chrome, bạn cũng có thể đề xuất tên mà tệp sẽ lấy, như được giải thích trong bài đăng trên blog này về cách đặt tên tải xuống khi sử dụng URI .

Chức năng dưới đây đã làm việc.

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

Phương pháp sau hoạt động trong IE10 +, Edge, Opera, FF và 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);
    }
}

Vì vậy, chỉ cần gọi hàm:

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

Đối với tôi điều này hoạt động hoàn hảo, với cùng tên tệp và phần mở rộng được tải xuống

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

'tiêu đề' là tên tập tin với phần mở rộng tức là, sample.pdf, waterfall.jpg, vv ..

'file64' là nội dung cơ sở 64 giống như thế này, vd Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Tôi sẽ sử dụng một <a></a>thẻ sau đó thiết lập href='path'. Sau đó, đặt một hình ảnh ở giữa các <a>yếu tố để tôi có thể có một hình ảnh để xem nó. Nếu bạn muốn, bạn có thể tạo một chức năng sẽ thay đổihref để nó không chỉ là cùng một liên kết mà là động.

Cung cấp <a>thẻ idcũng như nếu bạn muốn truy cập nó bằng javascript.

Bắt đầu với Phiên bản 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>

Bây giờ với 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");
          }
}

Nếu tệp chứa dữ liệu văn bản, một kỹ thuật tôi sử dụng là đặt văn bản vào thành phần textarea và yêu cầu người dùng chọn nó (nhấp vào textarea sau đó ctrl-A) sau đó sao chép bằng cách dán vào trình soạn thảo văn bản.