Hướng dẫn can javascript save a file? - javascript có thể lưu tệp không?

Question

Tôi có dữ liệu mà tôi muốn ghi vào một tệp và mở hộp thoại tệp cho người dùng để chọn nơi lưu tệp. Sẽ thật tuyệt nếu nó hoạt động trong tất cả các trình duyệt, nhưng nó phải hoạt động trong Chrome. Tôi muốn làm điều này tất cả các phía khách hàng.

Nội dung chính Show

JavaScript có thể lưu tệp văn bản không?
JavaScript có thể đọc và ghi tệp không?
Làm thế nào chúng tôi lưu tệp tải lên trong javascript?
JavaScript được lưu là gì?

Về cơ bản tôi muốn biết những gì cần đặt trong chức năng này:

saveFile: function(data)
{
}

Khi hàm lấy dữ liệu, người dùng chọn một vị trí để lưu tệp và tạo một tệp ở vị trí đó với dữ liệu đó.

Sử dụng HTML cũng tốt, nếu điều đó có ích.

Isherwood

55.2K16 Huy hiệu vàng108 Huy hiệu bạc150 Huy hiệu đồng16 gold badges108 silver badges150 bronze badges

Đã hỏi ngày 15 tháng 11 năm 2012 lúc 19:56Nov 15, 2012 at 19:56

user1756980user1756980user1756980

3.6974 Huy hiệu vàng16 Huy hiệu bạc13 Huy hiệu đồng4 gold badges16 silver badges13 bronze badges

1

Một cải tiến rất nhỏ về mã của Awesomeness01 (không cần thẻ neo) với sự bổ sung như được đề xuất bởi TrueImage (hỗ trợ cho IE):

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

Được thử nghiệm để hoạt động đúng trong Chrome, Firefox và IE10.

Trong Safari, dữ liệu được mở trong một tab mới và người ta sẽ phải lưu thủ công tệp này theo cách thủ công.

Đã trả lời ngày 14 tháng 6 năm 2015 lúc 17:09Jun 14, 2015 at 17:09

16

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}

<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

Và sau đó bạn sẽ tải xuống tệp bằng cách đặt thuộc tính tải xuống trên thẻ neo.

Lý do tôi thích điều này hơn là tạo URL dữ liệu là vì bạn không phải tạo một URL dài lớn, bạn chỉ có thể tạo URL tạm thời.

Đã trả lời ngày 30 tháng 3 năm 2015 lúc 5:52Mar 30, 2015 at 5:52

Awesomeness01Awesomeness01Awesomeness01

2.2611 Huy hiệu vàng18 Huy hiệu bạc17 Huy hiệu đồng1 gold badge18 silver badges17 bronze badges

4

Chọn vị trí để lưu tệp trước khi tạo nó là không thể. Nhưng có thể, ít nhất là trong Chrome, để tạo các tệp chỉ bằng JavaScript. Dưới đây là một ví dụ cũ về việc tạo tệp CSV. Người dùng sẽ được nhắc tải xuống. Điều này, thật không may, không hoạt động tốt trong các trình duyệt khác, đặc biệt là IE.

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3\nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>

Đã trả lời ngày 15 tháng 11 năm 2012 lúc 20:08Nov 15, 2012 at 20:08

Matt Greermatt GreerMatt Greer

59,9K17 Huy hiệu vàng122 Huy hiệu bạc123 Huy hiệu đồng17 gold badges122 silver badges123 bronze badges

4

Đối với trình duyệt mới nhất, như Chrome, bạn có thể sử dụng API tệp như trong hướng dẫn này:

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);

Đã trả lời ngày 15 tháng 11 năm 2012 lúc 20:05Nov 15, 2012 at 20:05

pdjotapdjotapdjota

3.1032 huy hiệu vàng23 Huy hiệu bạc33 Huy hiệu đồng2 gold badges23 silver badges33 bronze badges

2

function SaveBlobAs(blob, file_name) {
    if (typeof navigator.msSaveBlob == "function")
        return navigator.msSaveBlob(blob, file_name);

    var saver = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    var blobURL = saver.href = URL.createObjectURL(blob), 
        body = document.body;

    saver.download = file_name;

    body.appendChild(saver);
    saver.dispatchEvent(new MouseEvent("click"));
    body.removeChild(saver);
    URL.revokeObjectURL(blobURL);
}

Đã trả lời ngày 12 tháng 10 năm 2019 lúc 16:37Oct 12, 2019 at 16:37

Đã thử điều này trong bảng điều khiển, và nó hoạt động.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));

Jahid

20,5K8 Huy hiệu vàng89 Huy hiệu bạc105 Huy hiệu Đồng8 gold badges89 silver badges105 bronze badges

Đã trả lời ngày 11 tháng 4 năm 2015 lúc 9:47Apr 11, 2015 at 9:47

Netsi1964Netsi1964Netsi1964

3.0241 Huy hiệu vàng25 Huy hiệu bạc17 Huy hiệu đồng1 gold badge25 silver badges17 bronze badges

Bạn không thể làm điều này hoàn toàn trong JavaScript. JavaScript chạy trên trình duyệt chưa có đủ sự cho phép (đã có các đề xuất) vì lý do bảo mật.

Thay vào đó, tôi khuyên bạn nên sử dụng tải xuống:

Một thư viện JavaScript + Flash nhỏ cho phép tạo và tải xuống các tệp văn bản mà không cần tương tác máy chủ.

Bạn có thể thấy một bản demo đơn giản ở đây nơi bạn cung cấp nội dung và có thể kiểm tra chức năng lưu/hủy/xử lý lỗi/lỗi.

Đã trả lời ngày 15 tháng 11 năm 2012 lúc 20:02Nov 15, 2012 at 20:02

AamiraamirAamir

5.2442 Huy hiệu vàng29 Huy hiệu bạc47 Huy hiệu đồng2 gold badges29 silver badges47 bronze badges

0

Đối với Chrome và Firefox, tôi đã sử dụng phương pháp JavaScript thuần túy.

.

function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}

Ghi chú, Caveats và Weasel-Words:

Tôi đã thành công với mã này ở cả máy khách Chrome và Firefox chạy trong môi trường Linux (Maipo) và Windows (7 và 10).
Tuy nhiên, nếu
```
// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}
```
2 lớn hơn MB, đôi khi Chrome (chỉ đôi khi) bị mắc kẹt trong bản tải xuống của chính nó mà không có bất kỳ dấu hiệu thất bại nào; Firefox, cho đến nay, đã không thể hiện hành vi này. Nguyên nhân có thể là một số hạn chế về blob trong Chrome. Thành thật mà nói, tôi chỉ không biết; Nếu bất cứ ai có bất kỳ ý tưởng làm thế nào để sửa (hoặc ít nhất là phát hiện), xin vui lòng đăng. Nếu sự bất thường tải xuống xảy ra, khi trình duyệt Chrome được đóng, nó sẽ tạo ra một chẩn đoán như
Mã này không tương thích với Edge hoặc Internet Explorer; Tôi chưa thử opera hoặc safari.

Đã trả lời ngày 22 tháng 2 năm 2018 lúc 1:28Feb 22, 2018 at 1:28

StreamSaver là một giải pháp thay thế để lưu các tệp rất lớn mà không phải giữ tất cả dữ liệu trong bộ nhớ. Thực tế nó mô phỏng mọi thứ mà liều máy chủ khi lưu một tệp nhưng tất cả các phía máy khách với nhân viên dịch vụ.
In fact it emulates everything the server dose when saving a file but all client side with service worker.

Bạn có thể lấy người viết và viết thủ công của Uint8arr

Có một vài ví dụ giới thiệu:

Cách lưu nhiều tệp dưới dạng zip

Đường ống dẫn đầu từ ví dụ

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

3 hoặc

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

4 đến Streamsaver

Viết thủ công vào luồng có thể ghi khi bạn gõ một cái gì đó
hoặc mã hóa video/âm thanh

Đây là một ví dụ ở dạng đơn giản nhất:

const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

Nếu bạn muốn lưu một BLOB, bạn sẽ chuyển nó thành ReadableStream

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

0

Đã trả lời ngày 31 tháng 5 năm 2019 lúc 19:41May 31, 2019 at 19:41

Vô tậnEndless

31.3k11 Huy hiệu vàng104 Huy hiệu bạc127 Huy hiệu đồng11 gold badges104 silver badges127 bronze badges

1

JavaScript có thể lưu tệp văn bản không?

Sử dụng thư viện JavaScript FileSaver để tạo và lưu tệp văn bản. 'FileSaver' là thư viện JavaScript mà chúng ta có thể sử dụng để tạo tệp văn bản trong Vanilla JavaScript. Người dùng có thể sử dụng CDN của thư viện để sử dụng nó với HTML và JavaScript. Người dùng nên sử dụng cú pháp dưới đây để sử dụng thư viện FileSaver.. The 'FileSaver' is the JavaScript library that we can use to create a text file in vanilla JavaScript. Users can use the CDN of the library to use it with HTML and JavaScript. Users should use the below syntax to use the FileSaver library.

JavaScript có thể đọc và ghi tệp không?

Các phương thức WriteFile () được sử dụng để đọc và ghi một tệp bằng JavaScript.Tệp được đọc bằng FS.hàm readfile (), là một phương thức sẵn có.Kỹ thuật này đọc toàn bộ tệp vào bộ nhớ và lưu trữ nó trong bộ đệm.. The file is read using the fs. readFile() function, which is an inbuilt method. This technique reads the full file into memory and stores it in a buffer.

Làm thế nào chúng tôi lưu tệp tải lên trong javascript?

Bây giờ bạn đã sẵn sàng để tạo một trang web trong node.js cho phép người dùng tải lên các tệp lên máy tính của bạn:..

Bước 1: Tạo một biểu mẫu tải lên.Tạo một tệp Node.js ghi biểu mẫu HTML, với một trường tải lên: ....

Bước 2: Phân tích tệp đã tải lên.....

Bước 3: Lưu tệp ..

JavaScript được lưu là gì?

Các tệp JavaScript được lưu trữ với tiện ích mở rộng .js.Bên trong tài liệu HTML, bạn có thể nhúng mã JavaScript bằng các thẻ hoặc bao gồm tệp JS.Tương tự như các tệp CSS, các tệp JS có thể được bao gồm trong nhiều tài liệu HTML để tái sử dụng mã.. js extension. Inside the HTML document, you can either embed the JavaScript code using the tags or include a JS file. Similar to CSS files, JS files can be included in multiple HTML documents for code reusability.

programming javascript file-saver Js write file Open file JavaScript