it-swarm.dev

تصدير بيانات جافا سكريبت إلى ملف CSV دون تفاعل الخادم

إذا كنا على خادم nodeJS ، فيمكننا كتابة رأس وتعيين نوع mime وإرساله:

res.header("Content-Disposition", "attachment;filename="+name+".csv"); 
res.type("text/csv");
res.send(200, csvString);

وبسبب الرؤوس ، سيقوم المستعرض بإنشاء تنزيل لملف CSV المحدد.

عندما يتم إنشاء بيانات مفيدة في المستعرض ، فإن أحد الحلول للحصول عليها في ملف CSV هو استخدام Ajax وتحميله على الخادم (وربما حفظه اختياريًا هناك) وجعل الخادم يرسله مرة أخرى باستخدام هذه الرؤوس ليصبح CSV تحميل مرة أخرى في المتصفح.

ومع ذلك ، أود الحصول على حل مستعرض بنسبة 100٪ لا يشمل لعبة كرة الطاولة.

لذا فقد حدث لي أن أحدهم يمكنه فتح نافذة جديدة ومحاولة تعيين الرأس بمكافئ علامة META.

لكن هذا لا ينفعني في Chrome الحديث.

أحصل على نافذة جديدة ، وهي تحتوي على csvString ، ولكنها لا تعمل كتحميل.

أعتقد أنه من المتوقع أن أحصل على تنزيل في علامة تبويب أسفل أو نافذة جديدة فارغة مع تنزيل في علامة تبويب أسفل.

أتساءل ما إذا كانت العلامات الوصفية صحيحة أو إذا كانت هناك حاجة إلى علامات أخرى أيضًا.

هل هناك طريقة لجعل هذا العمل دون التقيد بالخادم؟

JsFiddle لإنشاء ملف CSV في المتصفح (لا يعمل - نافذة المخرجات ولكن بدون تنزيل)

var A = [['n','sqrt(n)']];  // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.Push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));   // unquoted CSV row
}
var csvString = csvRows.join("\n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write('<meta name="content-type" content="text/csv">');
csvWin.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
csvWin.document.write(csvString);
75
Paul

هناك دائمًا خاصية HTML5 download :

تشير هذه السمة ، في حالة وجودها ، إلى أن المؤلف يعتزم استخدام الارتباط التشعبي لتنزيل مورد بحيث عندما يطلب المستخدم النقر فوق الارتباط ، سيُطلب منك حفظه كملف محلي.

إذا كانت السمة لها قيمة ، فسيتم استخدام القيمة كاسم للملف المملوء مسبقًا في "حفظ المطالبة" الذي يفتح عندما ينقر المستخدم على الرابط.

var A = [['n','sqrt(n)']];

for(var j=1; j<10; ++j){ 
    A.Push([j, Math.sqrt(j)]);
}

var csvRows = [];

for(var i=0, l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));
}

var csvString = csvRows.join("%0A");
var a         = document.createElement('a');
a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'myFile.csv';

document.body.appendChild(a);
a.click();

كمان

تم اختباره في Chrome و Firefox ، ويعمل بشكل جيد في أحدث الإصدارات (اعتبارًا من يوليو 2013).
يعمل في Opera أيضًا ، ولكنه لا يقوم بتعيين اسم الملف (في يوليو 2013)}.
لا يبدو أنه يعمل في IE9 (مفاجأة كبيرة) (في يوليو 2013)}.

يمكن العثور على نظرة عامة حول المتصفحات التي تدعم سمة التنزيل هنا
بالنسبة للمتصفحات غير الداعمة ، يتعين على المرء تعيين الرؤوس المناسبة على جانب الخادم.


يبدو أن هناك اختراق لـ IE10 و IE11 ، والذي لا يدعم سمة download(Edge لا يزال)}.

var A = [['n','sqrt(n)']];

for(var j=1; j<10; ++j){ 
    A.Push([j, Math.sqrt(j)]);
}

var csvRows = [];

for(var i=0, l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));
}

var csvString = csvRows.join("%0A");

if (window.navigator.msSaveOrOpenBlob) {
    var blob = new Blob([csvString]);
    window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv');
} else {
    var a         = document.createElement('a');
    a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
    a.target      = '_blank';
    a.download    = 'myFile.csv';
    document.body.appendChild(a);
    a.click();
}
156
adeneo

تعملadeneo answer على فايرفوكس وكروم ... لـ IE يمكن استخدام أدناه.

if (window.navigator.msSaveOrOpenBlob) {
  var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
    type: "text/csv;charset=utf-8;"
  });
  navigator.msSaveBlob(blob, 'FileName.csv');
}
27
Manu Sharma

شاهد إجابة adeneo ، لكن لا تنسَ encodeURIComponent!

a.href     = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString);

أيضًا ، كنت بحاجة إلى القيام بـ "\ r\n" ليس فقط "\ n" لمحدد الصف.

var csvString = csvRows.join("\r\n");

كمان معدّل: http://jsfiddle.net/7Q3c6/

15
user2608223

بمجرد حزمت رمز JS للقيام بذلك إلى مكتبة صغيرة:

https://github.com/AlexLibs/client-side-csv-generator

يتم توفير التعليمات البرمجية والتوثيق والعروض التوضيحية/الملعب على جيثب.

استمتع :)

طلبات السحب هي موضع ترحيب.

7
Alexander

راجع إجابة adeneo ، ولكن لجعل هذا العمل في Excel في جميع البلدان ، يجب عليك إضافة "SEP = ،" إلى السطر الأول من الملف. سيؤدي ذلك إلى تعيين الفاصل القياسي في Excel ولن يظهر في المستند الفعلي

var csvString = "SEP=, \n" + csvRows.join("\r\n");
1
Thyselius

يمكننا بسهولة إنشاء/تصدير ملف Excel مع أي فاصل (في هذه الإجابة أستخدم فاصل الفاصلة) باستخدام javascript. لا أستخدم أي حزمة خارجية لإنشاء ملف Excel.

    var Head = [[
        'Heading 1',
        'Heading 2', 
        'Heading 3', 
        'Heading 4'
    ]];

    var row = [
       {key1:1,key2:2, key3:3, key4:4},
       {key1:2,key2:5, key3:6, key4:7},
       {key1:3,key2:2, key3:3, key4:4},
       {key1:4,key2:2, key3:3, key4:4},
       {key1:5,key2:2, key3:3, key4:4}
    ];

for (var item = 0; item < row.length; ++item) {
       Head.Push([
          row[item].key1,
          row[item].key2,
          row[item].key3,
          row[item].key4
       ]);
}

var csvRows = [];
for (var cell = 0; cell < Head.length; ++cell) {
       csvRows.Push(Head[cell].join(','));
}
            
var csvString = csvRows.join("\n");
let csvFile = new Blob([csvString], { type: "text/csv" });
let downloadLink = document.createElement("a");
downloadLink.download = 'MYCSVFILE.csv';
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
0
Pulkit Aggarwal