Anda dapat melakukan ini dalam JavaScript asli. Anda harus mem-parsing data Anda ke dalam format CSV yang benar (dengan asumsi Anda menggunakan array array untuk data Anda seperti yang telah Anda jelaskan dalam pertanyaan):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
atau cara yang lebih pendek (menggunakan fungsi panah ):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
Kemudian Anda dapat menggunakan JavaScript window.open
dan encodeURI
fungsinya untuk mengunduh file CSV seperti:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Edit:
Jika Anda ingin memberikan nama spesifik pada file Anda, Anda harus melakukan hal-hal sedikit berbeda karena ini tidak didukung mengakses data URI menggunakan
window.open
metode ini. Untuk mencapai ini, Anda dapat membuat
<a>
simpul DOM tersembunyi dan mengatur
download
atributnya sebagai berikut:
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
window.open
. Namun, Anda dapat membuat tautan tersembunyi yang memilikidownload
atribut yang disetel ke nama file yang Anda inginkan. Kemudian "mengklik" tautan ini akan mengunduh file dengan nama yang Anda inginkan, saya akan menambahkannya ke jawaban saya.document.body.appendChild(link);
untuk mendapatkan dukungan penuh dalam FF.data = [["Hello, world"]]
. Itu akan menampilkan dua kolom ketika harus menampilkan satu.encodeURIComponent()
fungsi atau sesuatu? Saya menggunakan Chrome sebagai browser.Berdasarkan jawaban di atas saya membuat fungsi ini yang telah saya uji pada IE 11, Chrome 36 dan Firefox 29
Misalnya: https://jsfiddle.net/jossef/m3rrLzk0/
sumber
window.open
dalamelse
darilink.download !== undefined
.link.style.visibility='hidden'
. B / c atribut DOM dibaca hanya. Rincian lebih lanjut dapat ditemukan di pembaruan.html5rocks.com/2015/04/... di bawah bagian "Menulis ke properti hanya-baca dalam mode ketat akan membuat kesalahan"Solusi ini harus bekerja dengan Internet Explorer 10+, Edge, versi lama dan baru dari Chrome, FireFox, Safari, ++
Jawaban yang diterima tidak akan berfungsi dengan IE dan Safari.
Menjalankan cuplikan kode akan mengunduh data tiruan sebagai csv
Kredit ke dandavis https://stackoverflow.com/a/16377813/1350598
sumber
setTimeout
.iframe
bagian tersebut dapat diganti hanya dengan location.href = ...URL.createObjectURL
(diakhiri denganURL
tidakUrl
).Saya datang ke sini mencari sedikit lebih banyak kepatuhan RFC 4180 dan saya gagal menemukan implementasi, jadi saya membuat (mungkin tidak efisien) satu untuk kebutuhan saya sendiri. Saya pikir saya akan membaginya dengan semua orang.
Semoga ini akan membantu seseorang di masa depan. Ini menggabungkan pengkodean CSV bersama dengan kemampuan untuk mengunduh file. Dalam contoh saya di jsfiddle . Anda dapat mengunduh file (dengan asumsi browser HTML 5) atau melihat output di konsol.
MEMPERBARUI:
Chrome sekarang tampaknya telah kehilangan kemampuan untuk menamai file. Saya tidak yakin apa yang terjadi atau bagaimana cara memperbaikinya, tetapi setiap kali saya menggunakan kode ini (termasuk jsfiddle), file yang diunduh sekarang dinamai
download.csv
.sumber
Solusi dari @Default berfungsi sempurna di Chrome (terima kasih banyak untuk itu!) Tapi saya punya masalah dengan IE.
Inilah solusinya (berfungsi pada IE10):
sumber
Di pembaruan Chrome 35, perilaku atribut unduhan berubah.
https://code.google.com/p/chromium/issues/detail?id=373182
untuk mengerjakan ini di chrome, gunakan ini
sumber
Bekerja untuk semua bahasa
sumber
Ini dia :
sumber
Orang-orang mencoba untuk membuat string csv mereka sendiri, yang gagal pada kasus tepi, misalnya karakter khusus dan semacamnya, tentu ini adalah masalah yang diselesaikan benar?
papaparse - gunakan untuk pengkodean JSON ke CSV.
Papa.unparse()
.Contoh penggunaan
https://github.com/mholt/PapaParse/issues/175 - Lihat komentar ini untuk diskusi dukungan browser.
sumber
Anda dapat menggunakan potongan kode di bawah ini untuk mengekspor larik ke file CSV menggunakan Javascript.
Ini menangani bagian karakter khusus juga
Berikut ini tautan ke jsfiddle yang berfungsi
sumber
sumber
Buat gumpalan dengan data csv. Yaitu
var blob = new Blob([data], type:"text/csv");
Jika browser mendukung penghematan yaitu gumpalan
if window.navigator.mSaveOrOpenBlob)===true
, maka simpan data csv menggunakan:window.navigator.msSaveBlob(blob, 'filename.csv')
Jika browser tidak mendukung penyimpanan dan pembukaan blob, maka simpan data csv sebagai:
Cuplikan Kode Lengkap:
sumber
Ada dua pertanyaan di sini:
Semua jawaban untuk pertanyaan pertama (kecuali yang oleh Milimetri) di sini sepertinya berlebihan. Dan yang oleh Milimetri tidak mencakup persyaratan altrenatif, seperti string di sekelilingnya dengan tanda kutip atau mengubah susunan objek.
Inilah pendapat saya tentang ini:
Untuk csv sederhana satu peta () dan gabungan () sudah cukup:
Metode ini juga memungkinkan Anda untuk menentukan pemisah kolom selain koma di gabungan dalam. misalnya tab:
d.join('\t')
Di sisi lain, jika Anda ingin melakukannya dengan benar dan menyertakan string dalam tanda kutip "", maka Anda dapat menggunakan beberapa sihir JSON:
jika Anda memiliki berbagai objek seperti:
sumber
.replace
harus menentukan kurung keriting vs kuadrat..replace
dilakukan pada string yang dikembalikan olehvalues()
yang mengambil objek dan mengembalikan array nilaivalues()
Metode tidak ditemukan ketika saya mencoba kode Anda.values()
secara eksplisitObject
. Saya mengoreksi contohnya.Banyak solusi roll-your-own di sini untuk mengkonversi data ke CSV, tetapi hampir semua dari mereka akan memiliki berbagai peringatan dalam hal jenis data yang akan mereka format dengan benar tanpa tersandung Excel atau sejenisnya.
Mengapa tidak menggunakan sesuatu yang sudah terbukti: Papa Parse
Kemudian gabungkan saja ini dengan salah satu solusi unduhan lokal di sini mis. yang oleh @ArneHB terlihat bagus.
sumber
Satu fungsi panah dengan ES6:
Kemudian :
Jika ada yang membutuhkan ini Reaksi,
react-csv
apakah ada untuk itusumber
react-csv
perpustakaan bekerja seperti pesona. Solusi hebat bagi siapa saja yang menggunakan modul.Inilah cara saya mengunduh file CSV di sisi klien dalam aplikasi Java GWT saya. Terima kasih khusus kepada Xavier John atas solusinya. Sudah diverifikasi untuk berfungsi di FF 24.6.0, IE 11.0.20, dan Chrome 45.0.2454.99 (64-bit). Saya harap ini sedikit menghemat waktu:
sumber
Berikut ini adalah solusi js asli.
sumber
Berikut adalah versi ramah Angular:
sumber
Jawaban di atas berfungsi, tetapi perlu diingat bahwa jika Anda membuka dalam format .xls, kolom ~~ mungkin ~~ dipisahkan dengan
'\t'
alih-alih','
, jawabannya https://stackoverflow.com/a/14966131/6169225 berfungsi dengan baik bagi saya, selama saya menggunakan.join('\t')
array bukan.join(',')
.sumber
Saya menggunakan fungsi ini untuk mengkonversi
string[][]
file ke file csv. Ini mengutip sel, jika mengandung a"
, a,
atau spasi putih lainnya (kecuali kosong):Catatan : tidak berfungsi di Internet Explorer <11 kecuali jika
map
polyfilled.Catatan : Jika sel berisi angka, Anda bisa menambahkan
cell=''+cell
sebelumnyaif (cell.replace...
untuk mengonversi angka menjadi string.Atau Anda dapat menulisnya dalam satu baris menggunakan ES6:
sumber
Saya akan merekomendasikan menggunakan perpustakaan seperti PapaParse: https://github.com/mholt/PapaParse
Jawaban yang diterima saat ini memiliki beberapa masalah termasuk:
sumber
Cukup coba ini, beberapa jawaban di sini tidak menangani data unicode dan data yang memiliki koma misalnya tanggal.
sumber
Unduh File CSV
sumber
Jika ada yang membutuhkan ini untuk knockout js, itu berfungsi baik dengan dasarnya solusi yang diusulkan:
html:
lihat model:
sumber
Saya menambahkan fungsi Xavier Johns untuk juga menyertakan header bidang jika perlu, menggunakan jQuery. Bit $ .each perlu diubah untuk loop javascript asli
sumber
Ini adalah jawaban yang dimodifikasi berdasarkan jawaban yang diterima di mana data akan berasal dari JSON.
sumber
Jika Anda mencari solusi yang sangat cepat, Anda juga dapat memberikan kesempatan ke perpustakaan kecil ini yang akan membuat dan mengunduh file CSV untuk Anda: https://github.com/mbrn/filefy
Penggunaannya sangat sederhana:
sumber