Hướng dẫn download base64 csv file javascript - tải xuống tệp csv base64 javascript

Tôi đang sử dụng một phương thức để tải xuống tệp CSV từ Base64.

var dlnk = document.getElementById("myDownloadButton");
dlnk.href = 'data:application/octet-stream;base64,' + myBase64;
dlnk.click();

Nó hoạt động cho đến khi tôi nhận ra rằng khi base64 quá dài, tôi có một vấn đề. Nó sẽ mở một trang màu trắng và nó sẽ không tải xuống tệp CSV của tôi. Tôi nghĩ đó là vì cơ sở của tôi64 quá dài.

Bạn có một giải pháp thay thế trong JavaScript hoặc trong Symfony 3?

Cảm ơn bạn

Đã hỏi ngày 27 tháng 3 năm 2018 lúc 10:32Mar 27, 2018 at 10:32

3

Giải pháp:

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

Đã trả lời ngày 27 tháng 3 năm 2018 lúc 13:20Mar 27, 2018 at 13:20

FascofascoFasco

2343 Huy hiệu bạc17 Huy hiệu đồng3 silver badges17 bronze badges

Bởi Ryan Florence, xuất bản 2010-04-04

Một phần của vấn đề đã di chuyển các bài viết từ cấu trúc trang web gốc ..

Tôi đã có một ứng dụng web (AKA: Sơ yếu lý lịch của tôi) Tôi đã viết để theo dõi chi phí kinh doanh, thanh toán, lập hóa đơn, v.v. trong ứng dụng là một số bảng chứa đầy dữ liệu. Kế toán của tôi thích tôi cho anh ấy một loạt các thứ ở định dạng Excel hoặc CSV. Tôi đã có một nút trên mỗi giao diện mở một cửa sổ mới với dữ liệu bảng tính bằng CSV.

Trước đây, ứng dụng đã sử dụng mã phía máy chủ để xuất CSV. Năm nay tôi quyết định tinker với mootools và base64 và xem liệu tôi có thể tránh được máy chủ hoàn toàn để tạo CSV không.

Base64 là gì?

Từ Wikipedia:

Các sơ đồ mã hóa Base64 thường được sử dụng khi cần phải mã hóa dữ liệu nhị phân cần được lưu trữ và chuyển qua phương tiện được thiết kế để xử lý dữ liệu văn bản. Điều này là để đảm bảo rằng dữ liệu vẫn còn nguyên vẹn mà không cần sửa đổi trong quá trình vận chuyển.

Success!

Cảm ơn webtoolkit.info cho mã tôi đã sử dụng để triển khai các phương thức mã hóa mootools Base64 này.

Tải xuống Base64 từ Forge Mootools.

Giải trình

Việc sử dụng Base64 khá đơn giản:

var str = "I am a string";
var data = str.toBase64();
var decoded = str.decodeBase64();

Sau đó, tôi đã có một phần mở rộng phần tử nhỏ để tạo CSV ra khỏi bảng, đôi khi tôi có lẽ nên phát hành trên Forge:

Element.implement({
  
  toCSV: function(row, field){
    var row = row || 'tr',
        field = field || 'td',
        csv = '';
    this.getElements(row).each(function(row){
      csv += row.getElements(field).map(function(td){ return '"'+td.get('text').replace(/(')+/,"\\'")+'"'; }).join(',') + "\n";
    });
    return csv;
  }
  
});

// usage
$('some_table').toCSV();

Thủ thuật thực sự là lấy cửa sổ mới chứa chuỗi:

var data = $('my_table').toCSV().toBase64();
window.open("data:text/csv;base64," + data, "csvWindow");

Thủ thuật tuyệt vời? Đúng! Trên thực tế, vì tôi đã sử dụng điều này, nó còn hơn cả một mẹo, nó thực sự khá tiện dụng. Điều duy nhất tôi mất là khả năng gửi tệp dưới dạng

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

7 thẳng đến thư mục tải xuống trong Safari.

Hỗ trợ / Hành vi trình duyệt

• IE8 - không làm việc, OFC, nhưng tôi không sử dụng nó cho ứng dụng thanh toán của mình nên tôi không quan tâm
• Chrome - không làm việc :(
• Safari - hoạt động tuyệt vời, mở dữ liệu trong một cửa sổ mới
• Firefox 3.6 - hoạt động tốt hơn với lời nhắc để lưu tệp, đó chính xác là những gì tôi muốn

Bình luận

Dường như có rất nhiều sự nhầm lẫn về cách tạo đúng một phía máy khách và tải xuống trong các trình duyệt hiện đại. Tôi biết cách làm điều đó (nó không khó, nhưng nó sử dụng API web hiện đại) và nó có khả năng là một bổ sung có giá trị cho thư viện.

Cái gì đó như:

Papa.download(Papa.parse(csv), "data.json");   // download JSON file
Papa.download(Papa.unparse(data), "data.csv"); // download CSV file

Có thể mất không quá 20-30 dòng mã. Tôi có nên làm điều đó không?

Ấn tượng của tôi là hiện tại nó không thể ở Safari: xem Eligrey/Filesaver.js#12. Tôi nghĩ rằng đó là một tính năng tuyệt vời, mặc dù, và sẽ hỗ trợ bao gồm nó với sự cảnh báo đó được ghi nhận.

Điều này dường như hoạt động trong tất cả các trình duyệt hiện đại:

var blob = new Blob([csvString]);
if (window.navigator.msSaveOrOpenBlob)  // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
    window.navigator.msSaveBlob(blob, "filename.csv");
else
{
    var a = window.document.createElement("a");
    a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
    document.body.removeChild(a);
}

Tôi đã sử dụng điều này cho một dự án tại công việc cuối cùng của tôi. Nếu không có sự phản đối, tôi sẽ rất vui khi xây dựng nó thành 4.2 hoặc một cái gì đó.

Phản, spapaseit, aindong, santhoshbabumr, saranya006, và 10 phản ứng khác với hooray biểu tượng cảm xúc

Vâng, làm ơn! Thư viện tuyệt vời. Nhưng vâng, thực sự rất khó để tìm thấy bất kỳ tài liệu rõ ràng nào về cách đưa papa.unparse (dữ liệu) vào tệp CSV

Có vẻ như điều này đã không đi đâu cả, nhưng thật tuyệt vời nếu nó hạ cánh trong một phiên bản mới. Tôi sẽ sử dụng đoạn trích của bạn trong lúc này, @mholt - cảm ơn!

Tôi đã không từ bỏ điều này - vẫn còn trong danh sách của tôi cho phiên bản tiếp theo, cùng với một triệu bản sửa lỗi nhỏ khác. Chỉ bận rộn với một dự án khác trong vài tháng qua. Gotta mã hóa web !!

Tuyệt vời, cảm ơn vì đã cập nhật và hoàn toàn hiểu!

Đây là những gì tôi đã thay đổi dựa trên bài viết của Google ở ​​đây: https://developers.google.com.com/web/updates/2012/06/don-t-build-blobs-construct-them?hl=en Không cần phải nối thêm và loại bỏ liên kết khỏi cơ thể.
Note that I do not need to append and remove the link from the body.

var csvData = new Blob([str], {type: 'text/csv;charset=utf-8;'});
var csvURL = window.URL.createObjectURL(csvData);
var tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'ActiveEvent_data.csv');
tempLink.click();

Connorstec, Theryan722, Adarshmadrecha, Neolivz, Giovanyr, Joshkopecek, Helendias, Lpracette, Chamss19, Baitun và 5 phản ứng thêm với Thumbs Up Emojicrosstyan phản ứng với Thumbus

Oooo, thật tuyệt. Cảm ơn! Sẽ cần kiểm tra khả năng tương thích của trình duyệt, nhưng tôi thích điều đó hơn.

Cập nhật: Khắc phục IE11

var csvData = new Blob([str], {type: 'text/csv;charset=utf-8;'});
var csvURL =  null;
if (navigator.msSaveBlob) {
    csvURL = navigator.msSaveBlob(csvData, 'download.cv');
} else {
    csvURL = window.URL.createObjectURL(csvData);
}
var tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'download.cv');
tempLink.click();

Ton-Tonton, Raza2022, Stakahashi, Sergeiminaev, Peteringram0, Keirodev, Iaincollins, Matejbransky, Harsh594, Baitun và 5 phản ứng khác với ngón tay cái

Đây là một cuộc thảo luận tuyệt vời !! Điều này đã giúp tôi rất nhiều .. Cảm ơn tất cả những người đã đóng góp cho chủ đề này.

👍 Có, đây sẽ là một bổ sung hữu ích vào API, xem xét API tệp HTML 5 mới hơn

Cảm ơn sự nỗ lực của bạn. Vui lòng xuất bản phiên bản 4.2 càng sớm càng tốt.

Tôi muốn, nhưng ngay bây giờ dự án này đang bị vắt kiệt bởi một dự án khác của tôi có tài trợ. (Phải trả các hóa đơn, bạn biết đấy.) Nếu ai đó sẵn sàng tài trợ cho việc phát triển dự án này thì tôi sẽ có thể dành thời gian vào đó sớm hơn!

Xin chào, tôi không thể giúp bạn. Tôi yêu công việc của bạn. Cảm tạ
I can not help you. I love your work. Thank

Vào Thứ Hai, ngày 8 tháng 2 năm 2016 lúc 11:27 tối, Matt Holt đã viết:

Tôi muốn, nhưng ngay bây giờ dự án này đang bị vắt kiệt bởi một dự án khác của tôi có tài trợ. (Phải trả các hóa đơn, bạn biết đấy.) Nếu ai đó sẵn sàng tài trợ cho việc phát triển dự án này thì tôi sẽ có thể dành thời gian vào đó sớm hơn!
project of mine that has funding. (Gotta pay the bills, you know.) If
somebody is willing to fund the development of this project then I will be
able to afford to put time into it sooner!

Xin chào, tôi không thể giúp bạn. Tôi yêu công việc của bạn. Cảm tạ
Reply to this email directly or view it on GitHub
#175 (comment).

Vào Thứ Hai, ngày 8 tháng 2 năm 2016 lúc 11:27 tối, Matt Holt đã viết:

- Trả lời email này trực tiếp hoặc xem nó trên GitHub #175 (Nhận xét).

Không sao đâu, cảm ơn bạn! Tôi sẽ cố gắng tìm kiếm tài trợ cho việc này trước khi kết thúc ...

Thật không may, không có giải pháp nào trong số này hoạt động trong Safari 9.0.3 vì những lý do tương tự @bluej100 được đăng ở trên. Tôi chỉ đã kiểm tra tất cả, và tất cả chúng vẫn mở văn bản thô trong tab Trình duyệt mới và không tải xuống.

Jesse, nó có thể hoạt động nếu bạn thay đổi "Text/CSV" thành "đính kèm/CSV", nhưng tên tệp sẽ chỉ là một mặc định.

Nếu bạn sử dụng công cụ nhấp chuột mới, thay vào đó, nó cũng sẽ hoạt động trên Internet Explorer và Edge (để bạn có thể mã hóa mã, mà không cần sử dụng MSSaveBeob). Trình duyệt duy nhất tôi có vấn đề để làm việc là Safati. Tôi không có bất kỳ ý tưởng nào về cách làm cho nó hoạt động ở đó.

var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
//IE11 & Edge
if (navigator.msSaveBlob) {
    navigator.msSaveBlob(csvData, exportFilename);
} else {
    //In FF link must be added to DOM to be clicked
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(csvData);
    link.setAttribute('download', exportFilename);
    document.body.appendChild(link);    
    link.click();
    document.body.removeChild(link);    
}

Tôi đang gặp vấn đề tương tự với Type = 'Ứng dụng/VND.MS-EXCEL'; Tôi đang sử dụng Safari 9.0.3 và giải pháp của bạn không hoạt động.

Đối với giải pháp trình duyệt hiện đại diễn ra như thế này, đã thử nghiệm: IE11, FF & Chrome

Tunnerniles, BusyUqboy, Alexus37, Moritzschaefer, AlteredStudio, Mikesmichael, Cheton, Bhousel, JamesKingdom, Bgth, và 23 đã phản ứng với Thumbs và 5 phản ứng khác với hooray biểu tượng cảm xúc

Bất kỳ tin tức về Safari? Không tìm thấy một giải pháp hợp lệ cho Safari ...

@Keemor Vậy điều này có cần phải được thêm vào tài liệu .Body vì lý do hỗ trợ không?
I ended up using a sub-form that will drop that content to a tiny PHP script, that will just stick a proper header and return right back. I didn't want to over-complicate API to adopt a set of methods for returning CSV.

HTML

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

0

JS

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

1

PHP

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

2

@Dannynoeloconnor đã quản lý để nó hoạt động trong Safari 9 trong một tháng (tôi đang sử dụng Angular nhưng nó có thể hoạt động mà không có) với:
managed to get it work in Safari 9 for a month (I'm using angular but it can work without) with:

This. $ window.open ('url_to_server_endpoint _? $ filename_param', '_elf');

Nhưng tôi nghĩ rằng bản cập nhật Safari cuối cùng đã phá hỏng nó. Không hoạt động nữa.

Không, xin lỗi:-/ Tôi đã không làm việc trong dự án này trong một thời gian, rất bận rộn với những thứ khác.

@Mholt Tôi có thể gửi PR, mã được kiểm tra bằng E11, FF Chrome & Safari 9

Chắc chắn, tôi có thời gian để nhìn nhanh vào PR.

@Raza2022 Có may mắn nào với yêu cầu kéo không? Đập đầu tôi chống lại vấn đề tương tự với Safari 9

_DOWDLOADCSV: function (csv) {var blob = new blob ([csv]); var a = window.document.createelement ("a"); a. a.download = "contact.csv"; tài liệu.body.AppendChild (a); một cái nhấp chuột(); tài liệu.body.removechild (a); }
var blob = new Blob([csv]);
var a = window.document.createElement("a");
a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
a.download = "contacts.csv";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}

Hoạt động cho Safari phiên bản 10.0 trở lên, Google Chrome phiên bản 54.0.2840,59 trở lên và Mozilla Firefox.

Đã sử dụng-Rest-client để khắc phục CORS và xác thực cơ bản trên máy chủ API.

Đã tạo một proxy nút và đặt các tiêu đề là:

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

3

Từ phía khách hàng, yêu cầu trỏ đến tuyến JS Node JS:

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

4

Chào mọi người,

Đối với tôi, dữ liệu đang được tải xuống trong tệp CSV, nhưng yêu cầu của tôi là thêm một đường viền vào bảng. Chỉ cho các nội dung trong tệp CSV.

Ai đó có thể giúp tôi ở đây không?

Cảm ơn, Amruta.
Amruta.

@AMRUTA1885 Tệp CSV không chứa bất kỳ kiểu nào (chỉ dữ liệu), vì vậy bạn nên tạo một bảng tính để thêm các kiểu vào bảng. Và đây là phạm vi của Papaparse.

Thật vậy, có những thư viện khác cung cấp chức năng này, vì vậy chúng ta không nên phát minh lại bánh xe. Xem #421 (bình luận) như và ví dụ.

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

5

Wihan, Pbowyer, Sardbaba, Sven5, Zrisher, Hackpoint, Bvaisvil, Bndynet, Joseaquino và Crosstyan đã phản ứng với ngón tay cái lên cảm xúc

@OrenMagen100 Mã của bạn đã khắc phục sự cố của tôi cho trình duyệt Firefox. Cảm ơn bạn rất nhiều.

Làm thế nào chúng ta có thể tải xuống các tệp CSV hoặc XLSX theo cách tùy chỉnh từ DB.? Phương tiện, tiêu đề trường Excel nên in đậm và nội dung của nó bằng chữ in nghiêng. có ai giúp được không...?
Means, excel fields heading should be in bold and its contents in italics. can anyone help...?

let csvContent = atob("YOUR BASE64");
var blob = new Blob([csvContent], {type: "data:application/octet-stream;base64"});
var url  = window.URL.createObjectURL(blob);
// you need to precise a front-end button to have a name
var dlnk = document.getElementById(nameFile);
dlnk.href = url;
dlnk.click();

5

Lưu lại ngày của tôi. và hoạt động trong Firefox