কীভাবে জাভাস্ক্রিপ্ট অ্যারে তথ্য সিএসভিতে (ক্লায়েন্ট দিকে) রফতানি করবেন?

511

আমি জানি এই প্রকৃতির অনেক প্রশ্ন রয়েছে তবে জাভাস্ক্রিপ্ট ব্যবহার করে আমার এটি করা দরকার। আমি Dojo 1.8অ্যারেতে সমস্ত বৈশিষ্ট্য সম্পর্কিত তথ্য ব্যবহার করছি এবং রাখছি , যা দেখতে এটির মতো দেখাচ্ছে:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

কোনও ধারণা কীভাবে আমি CSVক্লায়েন্টের পক্ষে এটি রফতানি করতে পারি ?

javascript  csv  export  client-side  dojo-1.8 
— Sam007
সূত্র

উত্তর:

837

আপনি এটি স্থানীয় জাভাস্ক্রিপ্টে করতে পারেন। আপনাকে যথাযথ সিএসভি ফর্ম্যাটে আপনার ডেটা পার্স করতে হবে (ধরে নিবেন যে আপনি নিজের ডেটার জন্য অ্যারের অ্যারে ব্যবহার করছেন যা আপনি প্রশ্নে বর্ণনা করেছেন):

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

বা আরও ছোট উপায় ( তীর ফাংশন ব্যবহার করে ):

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

তারপরে আপনি সিএসভি ফাইলটি ডাউনলোড করতে জাভাস্ক্রিপ্ট window.openএবং encodeURIফাংশনগুলি ব্যবহার করতে পারেন :

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

সম্পাদনা:

আপনি যদি নিজের ফাইলটিকে একটি নির্দিষ্ট নাম দিতে চান তবে আপনাকে কিছুটা আলাদাভাবে করতে হবে কারণ window.openপদ্ধতিটি ব্যবহার করে কোনও ডেটা ইউআরআই অ্যাক্সেস করা समर्थित নয় । এটি অর্জনের জন্য, আপনি একটি লুকানো <a>ডোম নোড তৈরি করতে পারেন এবং এর downloadবৈশিষ্ট্যটি নীচে সেট করতে পারেন :

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".
— ডিফল্ট
সূত্র
4
আমি যা জানি, তা ব্যবহার করে করার কোনও উপায় নেই window.open। তবে, আপনি একটি গোপন লিঙ্ক তৈরি করতে পারেন যা আপনার পছন্দসই downloadফাইলটির নামের সাথে একটি অ্যাট্রিবিউট সেট করে। তারপরে এই লিঙ্কটিতে "ক্লিক" করা আপনার নিজের নামে ফাইলটি ডাউনলোড করবে, আমি এটি আমার উত্তরে যুক্ত করব।
— ডিফল্ট
14
document.body.appendChild(link);এফএফ-এ আমার সম্পূর্ণ সমর্থন পেতে আমাকে যুক্ত করতে হয়েছিল।
— হার্ডবাইট
9
এই উত্তরটি ভুল: এটি ক্ষেত্রে ব্যর্থ হবে data = [["Hello, world"]]। এটি দুটি কলামকে আউটপুট দেবে যখন এটির একটি আউটপুট হবে should
— aredridel
18
এটি ~ 7000 সারিগুলির মতো কাজ করে। তবে এই ত্রুটিটি দেওয়া শুরু করে: NETWORK_INVALID_REQUEST । অন্য কোনও সংস্থাও কি এই সমস্যার মুখোমুখি হচ্ছে? encodeURIComponent()ফাংশন বা কোনও কিছুর উপরে ডেটাগুলির কোনও উচ্চতর সীমা আছে ? আমি ক্রোমটিকে ব্রাউজার হিসাবে ব্যবহার করছি।
— অভিদেমন
13
@ অ্যাবিডেমন উত্তরটি হ'ল যে কোনও বৃহতের জন্য আপনাকে একটি ব্লব টাইপ ব্যবহার করতে হবে যা এটি দুর্দান্ত কাজ করবে, যেমন: ব্লব = নতুন ব্লব ([সিএসভিসিন্টেন্ট], {প্রকার: "পাঠ্য / সিএসভি";); href = উইন্ডো। URL.createObjectURL (ব্লব); আরো বিস্তারিত: stackoverflow.com/a/19328891/1854079
— mdubez
256

উপরের উত্তরের উপর ভিত্তি করে আমি এই ফাংশনটি তৈরি করেছিলাম যা আমি আইই 11, ক্রোম 36 এবং ফায়ারফক্স 29 এ পরীক্ষা করেছি 

function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

উদাহরণস্বরূপ: https://jsfiddle.net/jossef/m3rrLzk0/

— জেভিয়ার জন
সূত্র
6
ফল-ব্যাক পারে window.openএকটি ইন elseএর link.download !== undefined।
— মিঃইলো
2
এটি একটি দুর্দান্ত কোড piece সিসি-বাই-এসএ-এর ডিও ডিফল্টের চেয়ে বেশি উদারতার সাথে আপনি এই লাইসেন্সটি দিতে কোনও সুযোগ চান? উদাহরণস্বরূপ, সিসি 0, এমআইটি, বিএসডি, অ্যাপাচি, এক্স 11। । । meta.stackexchange.com/questions/12527/…
— জোসেফ_মরিস
1
বেশ কয়েকটি ওয়েব অ্যাপ্লিকেশনগুলিতে এক্সেল এক্সপোর্ট বাস্তবায়নের জন্য আমি এই পদ্ধতিটি ব্যবহার করছি। তবে ক্রম 43+ এখন প্রোটোটাইপ শৃঙ্খলে DOM বৈশিষ্ট্য সরিয়ে নিয়েছে। একটি ব্যতিক্রম নিক্ষেপ করা হয় link.style.visibility='hidden'। বি / সি ডোম বৈশিষ্ট্যটি কেবল পঠনযোগ্য। আরও বিশদ বিবরণ আপডেটে পাওয়া যাবে। html5rocks.com/2015/04/… বিভাগের অধীনে "কঠোর মোডে কেবলমাত্র পঠনযোগ্য বৈশিষ্ট্যগুলিতে লেখার ফলে ত্রুটি ঘটবে"
— ব্লেইস
1
এই প্রতিক্রিয়াটি এখন পর্যন্ত সেরা। এটিতে বিশেষ অক্ষর এবং প্রথম বন্ধনী যুক্ত মামলা রয়েছে।
— ভ্লাদিমির কস্তভ
2
আমি এই উত্তরের ডাউনলোড বিভাগটি ব্যবহার করেছি এবং এটি ক্রোমে ভালভাবে কাজ করেছে, ধন্যবাদ!
— লিরান এইচ
77

এই সমাধানটি ইন্টারনেট এক্সপ্লোরার 10+, এজ, ক্রোম, ফায়ারফক্স, সাফারি, ++ এর পুরানো এবং নতুন সংস্করণগুলির সাথে কাজ করা উচিত

গৃহীত উত্তর IE এবং সাফারির সাথে কাজ করবে না।

// Example data given in question text
var data = [
  ['name1', 'city1', 'some other info'],
  ['name2', 'city2', 'more info']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(';');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
  var a = document.createElement('a');
  mimeType = mimeType || 'application/octet-stream';

  if (navigator.msSaveBlob) { // IE10
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) { //html5 A[download]
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
  }
}

download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');
স্নিপেট প্রসারিত করুন

কোড স্নিপেট চালানো সিএসভি হিসাবে মক ডেটা ডাউনলোড করবে

ডান্ডাভিসকে ক্রেডিট https://stackoverflow.com/a/16377813/1350598

— আর্ন এইচ। বিট্টুবেক
সূত্র
1
(খুব কমপক্ষে, এইচটিএমএল 5 কোড) ছাড়াই কাজ করে setTimeout।
— জেদীশুয়াগুই
@ স্টাবর্নশোয়াগুই শীতল তারপর আমি উদাহরণ কোডটি থেকে সেটটাইমআউটটি সরিয়ে দেব :)
— আর্ন এইচ বিটুবেক
সর্বশেষতম ক্রোম, আইই এবং ফায়ারফক্সে কাজ করে। ধন্যবাদ!
— ওয়ালা
একমাত্র সত্যিকারের ক্রস ব্রাউজার সমাধান এখানে। নোট করুন এটি সাফারি 10.10 এবং মোবাইল সাফারিতে কাজ করে। যাইহোক, iframeবিভাগটি কেবলমাত্র অবস্থানের দ্বারা প্রতিস্থাপন করা যেতে পারে
— ড্যান
2
দ্রষ্টব্য: ফাংশনটিতে একটি টাইপ রয়েছে, এটি আসলে URL.createObjectURL(শেষ হয় URLনা Url)।
— নাথান হিঙ্কে
35

আমি এখানে আরও কিছুটা আরএফসি 4180 সম্মতি খুঁজছিলাম এবং আমি কোনও বাস্তবায়ন খুঁজে পেতে ব্যর্থ হয়েছি, তাই আমি নিজের প্রয়োজনে একটি (সম্ভবত অদক্ষ) তৈরি করেছি made আমি ভেবেছিলাম সবার সাথে শেয়ার করব।

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

আশা করি এটি ভবিষ্যতে কাউকে সাহায্য করবে। এটি ফাইল ডাউনলোডের ক্ষমতার পাশাপাশি সিএসভির এনকোডিং উভয়কেই একত্রিত করে। আমার উদাহরণে jsfiddle । আপনি ফাইলটি ডাউনলোড করতে পারেন (এইচটিএমএল 5 ব্রাউজার ধরে) বা কনসোলে আউটপুট দেখতে পারেন।

হালনাগাদ:

ক্রোম এখন ফাইলটির নামকরণের ক্ষমতা হারিয়েছে বলে মনে হচ্ছে। কী ঘটেছে বা কীভাবে এটি ঠিক করা যায় তা সম্পর্কে আমি নিশ্চিত নই, তবে যখনই আমি এই কোডটি ব্যবহার করি (jsfiddle সহ) ডাউনলোড করা ফাইলটির নাম দেওয়া হয়েছে এখন download.csv।

— Uxonith
সূত্র
ক্রিস ভাল ধরা, আমি এটি সংখ্যার ডেটা দিয়ে পরীক্ষা করিনি :)
— অক্সনিথ
আমি জানি না শেষ নাল চেকটি প্রয়োজনীয়ভাবে প্রত্যাশিত আচরণ কিনা। নাল একটি খালি স্ট্রিংয়ের চেয়ে খুব আলাদা। যদি কেউ এটি প্রয়োগ করে থাকে তবে আমি একটি কাস্টম নাল মান (যেমন: '[[নুল]]') সুপারিশ করব would অপরিজ্ঞাত জন্য একটি ব্যতিক্রম এছাড়াও পছন্দসই হতে পারে, কিন্তু আমি খালি স্ট্রিং সঙ্গে নাল প্রতিস্থাপন না করার পরামর্শ দিচ্ছি।
— অক্সোনিথ
আমি পরীক্ষা করে দেখেছি যে আপনি সঠিক। এটি ক্রোম এবং অপেরাতে কাজ করছে বলে মনে হচ্ছে। সাফারি কন্টেন্ট সহ একটি পৃষ্ঠা খুলবে। ইন্টারনেট এক্সপ্লোরার ... ভাল এটি আই। আমার পরিস্থিতির জন্য, আমি আমার সিএসভি সার্ভারটি তৈরি করতে যাচ্ছি এবং দুঃখের সাথে সেভাবে পরিবেশন করছি।
— অক্সোনিথ
33

@ ডিফল্টের সমাধান ক্রোমে নিখুঁতভাবে কাজ করে (এর জন্য অনেক ধন্যবাদ!) তবে আইই নিয়ে আমার সমস্যা ছিল।

এখানে একটি সমাধান রয়েছে (আই 10 তে কাজ করে):

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")
— Dzarek
সূত্র
23

ক্রোম 35 আপডেটে, ডাউনলোড বিশিষ্ট আচরণটি পরিবর্তন করা হয়েছিল।

https://code.google.com/p/chromium/issues/detail?id=373182

এটি ক্রোমে কাজ করতে এটি ব্যবহার করুন 

var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();
— মনু
সূত্র
1
— গ্যাব্রিয়েল
এটি এই মুহুর্তে সঠিক উত্তর, গ্রহণযোগ্য হিসাবে চিহ্নিত করা হয় না!
— মেও
17

সব ভাষার জন্য কাজ করা

        function convertToCsv(fName, rows) {
        var csv = '';
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            for (var j = 0; j < row.length; j++) {
                var val = row[j] === null ? '' : row[j].toString();
                val = val.replace(/\t/gi, " ");
                if (j > 0)
                    csv += '\t';
                csv += val;
            }
            csv += '\n';
        }

        // for UTF-16
        var cCode, bArr = [];
        bArr.push(255, 254);
        for (var i = 0; i < csv.length; ++i) {
            cCode = csv.charCodeAt(i);
            bArr.push(cCode & 0xff);
            bArr.push(cCode / 256 >>> 0);
        }

        var blob = new Blob([new Uint8Array(bArr)], { type: 'text/csv;charset=UTF-16LE;' });
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fName);
        } else {
            var link = document.createElement("a");
            if (link.download !== undefined) {
                var url = window.URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", fName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }
        }
    }



    convertToCsv('download.csv', [
        ['Order', 'Language'],
        ['1', 'English'],
        ['2', 'Español'],
        ['3', 'Français'],
        ['4', 'Português'],
        ['5', 'čeština'],
        ['6', 'Slovenščina'],
        ['7', 'Tiếng Việt'],
        ['8', 'Türkçe'],
        ['9', 'Norsk bokmål'],
        ['10', 'Ελληνικά'],
        ['11', 'беларускі'],
        ['12', 'русский'],
        ['13', 'Українська'],
        ['14', 'հայերեն'],
        ['15', 'עִברִית'],
        ['16', 'اردو'],
        ['17', 'नेपाली'],
        ['18', 'हिंदी'],
        ['19', 'ไทย'],
        ['20', 'ქართული'],
        ['21', '中国'],
        ['22', '한국어'],
        ['23', '日本語'],
    ])
— সর্দার দিদান
সূত্র
চিত্তাকর্ষক! (+1 টি)। বন্ধু স্ট্যাকওভারফ্লোতে স্বাগতম!
— রন লিফশিটস
আপনি দয়া করে আমাকে বুঝতে সাহায্য করতে পারেন যে ইউটিএফ -16 কোড ব্লক কী এবং এখানে কী ব্যবহার করা হয়?
— 1009
হাই মার 1009 এটি কয়েকটি ভাষার জন্য প্রয়োজনীয়। উদাহরণস্বরূপ, সিরিলিক বর্ণমালা।
— সর্দার দিদান
13

এই নাও : 

<!doctype html>  
<html>  
<head></head>  
<body>
<a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>

<script type="text/javascript">  
    var stockData = [
        {
            Symbol: "AAPL",
            Company: "Apple Inc.",
            Price: "132.54"
        },
        {
            Symbol: "INTC",
            Company: "Intel Corporation",
            Price: "33.45"
        },
        {
            Symbol: "GOOG",
            Company: "Google Inc",
            Price: "554.52"
        },
    ];

    function convertArrayOfObjectsToCSV(args) {
        var result, ctr, keys, columnDelimiter, lineDelimiter, data;

        data = args.data || null;
        if (data == null || !data.length) {
            return null;
        }

        columnDelimiter = args.columnDelimiter || ',';
        lineDelimiter = args.lineDelimiter || '\n';

        keys = Object.keys(data[0]);

        result = '';
        result += keys.join(columnDelimiter);
        result += lineDelimiter;

        data.forEach(function(item) {
            ctr = 0;
            keys.forEach(function(key) {
                if (ctr > 0) result += columnDelimiter;

                result += item[key];
                ctr++;
            });
            result += lineDelimiter;
        });

        return result;
    }

    window.downloadCSV = function(args) {
        var data, filename, link;

        var csv = convertArrayOfObjectsToCSV({
            data: stockData
        });
        if (csv == null) return;

        filename = args.filename || 'export.csv';

        if (!csv.match(/^data:text\/csv/i)) {
            csv = 'data:text/csv;charset=utf-8,' + csv;
        }
        data = encodeURI(csv);

        link = document.createElement('a');
        link.setAttribute('href', data);
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
       }
</script>  
</body>  
</html>
— মধুলিকা মুখোপাধ্যায়
সূত্র
1
দুর্দান্ত উত্তর। আমি এটিকে একটি কারণে গ্রহণযোগ্য উত্তর হিসাবে উত্সাহিত করছি কারণ সমস্ত কিছুকে একটি একক কলামে ফেলেছে। এটি এটিকে সমস্ত পৃথক কলামে বিভক্ত করে এবং JSON এর মতো ডেটা ফর্ম্যাট সমর্থন অবিশ্বাস্যভাবে কার্যকর।
— হোসার 17
লিঙ্কটি যখন নথির বডিতে প্রথমে যুক্ত করা হয় এবং তারপরে ক্লিক করা হয় তখন এটি কাজ করে। এবং তারপরে এটি ডোম থেকে সরানো হবে।
— জে দুবলাল
1
উত্তম উত্তর, কেবলমাত্র ত্রুটিটি হ'ল যখন ডেটাতে একটি কলাম ডিলিমিটার থাকে তখন এটি সঠিকভাবে কাজ করে না "," যেমন ঠিকানা: '10 অসীম লুপ লেন, রুম 56 ', লেনের পরে কমা লক্ষ্য করুন। আমি আপনাকে পরামর্শ দিয়েছি যে ডেপুটি সিএসভিতে রূপান্তর করতে পাপাপার্স লিঙ্কটি ব্যবহার করুন তবে প্রকৃত ফাইল ডাউনলোডের জন্য উপরের ডাউনলোডের সিএসভি পদ্ধতিটি ব্যবহার করুন
— ফিলি
এটি আমার জন্য নিখুঁত কাজ করে। কেবল একটি সমস্যা আছে, আমার কাছে অ্যারেতে কিছু নম্বর রয়েছে যেমন '000002342' তবে সিএসভিতে রফতানি করা হলে নেতৃস্থানীয় শূন্যগুলি সরিয়ে ফেলা হয়। এটি রোধ করার কোনও উপায় আছে কি?
— আকাশ ধাওয়ান
13

ভাবেন লোকেরা তাদের নিজস্ব সিএসভি স্ট্রিং তৈরি করার চেষ্টা করছে যা প্রান্তের ক্ষেত্রে যেমন ব্যর্থ হয়, যেমন বিশেষ অক্ষর এবং এগুলি, এটি অবশ্যই একটি সমাধান সমস্যা?

পাপ্পর্সে - জেএসএন থেকে সিএসভি এনকোডিংয়ের জন্য ব্যবহার করুন। Papa.unparse()।

import Papa from "papaparse";

const downloadCSV = (args) => {  

  let filename = args.filename || 'export.csv';
  let columns = args.columns || null;

  let csv = Papa.unparse({ data: args.data, fields: columns})
  if (csv == null) return;

  var blob = new Blob([csv]);
  if (window.navigator.msSaveOrOpenBlob)  // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
      window.navigator.msSaveBlob(blob, args.filename);
  else
  {
      var a = window.document.createElement("a");
      a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
      a.download = filename;
      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);
  }

}

ব্যবহারের উদাহরণ

downloadCSV({ 
  filename: 'filename.csv',
  data: [{'a': '1', 'b': 2'}],
  columns: ['a','b']
});

https://github.com/mholt/PapaParse/issues/175 - ব্রাউজার সমর্থন আলোচনার জন্য এই মন্তব্যটি দেখুন।

— গ্লেন থম্পসন
সূত্র
10

জাভাস্ক্রিপ্ট ব্যবহার করে আপনি সিএসভি ফাইলে অ্যারে এক্সপোর্ট করতে নীচের কোডের টুকরোটি ব্যবহার করতে পারেন।

এটি পাশাপাশি বিশেষ অক্ষরের অংশ পরিচালনা করে

var arrayContent = [["Séjour 1, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
var csvContent = arrayContent.join("\n");
var link = window.document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));
link.setAttribute("download", "upload_data.csv");
link.click();

এখানে কাজ jsfiddle লিঙ্ক

— বিগনেশ সুব্রমনিয়ান
সূত্র
1
বিশেষ চরিত্রগুলির সেরা উত্তর
— আলেজান্দ্রো
# (হ্যাশট্যাগ) কাজ করে না!
— নাক্রেস
7 
//It work in Chrome and IE ... I reviewed and readed a lot of answer. then i used it and tested in both ... 

var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    var blob = new Blob([CSV], { type: 'text/csv;charset=utf-8;' });
    var url = URL.createObjectURL(blob);            
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style = "visibility:hidden";
}

if (navigator.msSaveBlob) { // IE 10+
   link.addEventListener("click", function (event) {
     var blob = new Blob([CSV], {
       "type": "text/csv;charset=utf-8;"
     });
   navigator.msSaveBlob(blob, fileName);
  }, false);
}

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

//Regards
— Mauri
সূত্র
6

সিএসভি ডেটা দিয়ে একটি ব্লব তৈরি করুন .ie var blob = new Blob([data], type:"text/csv");

যদি ব্রাউজারটি ব্লবগুলি if window.navigator.mSaveOrOpenBlob)===trueসংরক্ষণ করতে সহায়তা করে তবে সিএসভি ডেটা ব্যবহার করে এটি সংরক্ষণ করুন: window.navigator.msSaveBlob(blob, 'filename.csv')

যদি ব্রাউজার ব্লবগুলি সংরক্ষণ এবং খোলার পক্ষে সমর্থন না করে তবে সিএসভি ডেটা হিসাবে সংরক্ষণ করুন: 

var downloadLink = document.createElement('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);

সম্পূর্ণ কোড স্নিপেট:

var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
     type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveBlob(blob, filename);
} else {
    var downloadLink = document.element('<a></a>');
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', filename);
    downloadLink.attr('target', '_blank');  
    document.body.append(downloadLink); 
    downloadLink[0].click(); 
}
— Liyosi
সূত্র
5

এখানে দুটি প্রশ্ন রয়েছে:

  1. অ্যারে কে সিএসভি স্ট্রিং-এ রূপান্তর করবেন কীভাবে
  2. ফাইলটিতে স্ট্রিংটি কীভাবে সংরক্ষণ করবেন to

এখানে প্রথম প্রশ্নের সমস্ত উত্তর (মিলিমেট্রিকের একটি ব্যতীত) এখানে ওভারকিল বলে মনে হচ্ছে। এবং মিলিমিট্রিকের দ্বারা উত্থাপূর্ণ স্ট্রিংগুলি কোটের সাথে চারপাশের স্ট্রিংগুলি বা বস্তুর অ্যারে রূপান্তরিত করার মতো নয় alt

এখানে আমার গ্রহণ করা হয়:

একটি সাধারণ সিএসভির জন্য একটি মানচিত্র () এবং একটি যোগদান () যথেষ্ট:

    var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
    var csv = test_array.map(function(d){
        return d.join();
    }).join('\n');

    /* Results in 
    name1,2,3
    name2,4,5
    name3,6,7
    name4,8,9
    name5,10,11

এই পদ্ধতিটি আপনাকে অভ্যন্তরীণ যোগে কমা ব্যতীত কলাম বিভাজক নির্দিষ্ট করার অনুমতি দেয়। উদাহরণস্বরূপ একটি ট্যাব:d.join('\t')

অন্যদিকে আপনি যদি এটিটি সঠিকভাবে করতে চান এবং "" উদ্ধৃতিগুলিতে স্ট্রিংগুলি আবদ্ধ করতে চান, তবে আপনি কিছু জেএসএন যাদু ব্যবহার করতে পারেন:

var csv = test_array.map(function(d){
       return JSON.stringify(d);
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ]
                                   // brackets from each line 

/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

যদি আপনার মতো বস্তুর অ্যারে থাকে:

var data = [
  {"title": "Book title 1", "author": "Name1 Surname1"},
  {"title": "Book title 2", "author": "Name2 Surname2"},
  {"title": "Book title 3", "author": "Name3 Surname3"},
  {"title": "Book title 4", "author": "Name4 Surname4"}
];

// use
var csv = data.map(function(d){
        return JSON.stringify(Object.values(d));
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, '');
— কনস্টানটিন
সূত্র
যদি আমার ভুল না হয় তবে আমি বিশ্বাস করি যে .replaceকোঁকড়া বনাম বর্গাকার বন্ধনী নির্দিষ্ট করা উচিত।
— অ্যারোনবারটেল
.replaceফেরত স্ট্রিংয়ের মাধ্যমে সম্পন্ন হয় values()যা দ্বারা একটি বস্তু নেয় এবং মানগুলির একটি অ্যারে প্রদান করে
— কনস্ট্যান্টিন
values()আমি আপনার কোডটি চেষ্টা করার পরে পদ্ধতিটি খুঁজে পাওয়া যায় নি।
— অ্যারোনবারটেল
ধন্যবাদ! Chrome এ এটি values()স্পষ্টভাবে কল না করেই কাজ করে Object। আমি উদাহরণ সংশোধন।
— কনস্টান্টিন
5

ডেটা সিএসভিতে রূপান্তর করার জন্য এখানে আপনার নিজের সমাধানগুলি প্রচুর পরিমাণে রয়েছে তবে কেবলমাত্র তাদের সকলেরই এক্সেল বা পছন্দগুলি ট্রিপ না করে সঠিকভাবে ফর্ম্যাট করবেন এমন ডেটার ধরণের ক্ষেত্রে বিভিন্ন ক্যাভেট থাকবে।

কেন প্রমাণিত কিছু ব্যবহার করবেন না: পাপা পার্সে

Papa.unparse(data[, config])

তারপরে এটিকে এখানে স্থানীয় ডাউনলোড সমাধানগুলির সাথে একত্রিত করুন উদাহরণস্বরূপ। @ আরনএইচবি এর একটি ভাল দেখাচ্ছে।

— জন রিক্স
সূত্র
4

ES6 সহ একটি তীর ফাংশন:

const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) =>  row.join(',')).join(`\n`)}`
);

তারপরে: 

window.open(
  dataToCsvURI(
   [["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
  )
);

যদি কারও এটির প্রয়োজন হয় reactjs, react-csvতার জন্য আছে

— আবদেনর টউমি
সূত্র
3
react-csvগ্রন্থাগার একটি যাদুমন্ত্র মত কাজ করে। মডিউল ব্যবহার করে যে কেউ জন্য দুর্দান্ত সমাধান।
— ম্যাট পার্লিলা
এটি সিএসভি ফাইলের অভ্যন্তরে কমা সহ যে ক্ষেত্রগুলি রয়েছে সেগুলি পর্যবেক্ষণ করতে ব্যর্থ।
— ২৩
2

আমার জাভা জিডব্লিউটি অ্যাপ্লিকেশনে আমি কীভাবে ক্লায়েন্টের পাশে সিএসভি ফাইলগুলি ডাউনলোড করব তা এখানে। জাভিয়ার জন তার সমাধানের জন্য বিশেষ ধন্যবাদ এটি এফএফ 24.6.0, আইই 11.0.20, এবং ক্রোম 45.0.2454.99 (bit৪-বিট) এ কাজ করার জন্য যাচাই করা হয়েছে। আমি আশা করি এটি কারও কিছুটা সময় সাশ্রয় করেছে:

public class ExportFile 
{

    private static final String CRLF = "\r\n";

    public static void exportAsCsv(String filename, List<List<String>> data) 
    {
        StringBuilder sb = new StringBuilder();
        for(List<String> row : data) 
        {
            for(int i=0; i<row.size(); i++)
            {
                if(i>0) sb.append(",");
                sb.append(row.get(i));
            }
            sb.append(CRLF);
        }

        generateCsv(filename, sb.toString());
    }

    private static native void generateCsv(String filename, String text)
    /*-{
        var blob = new Blob([text], { type: 'text/csv;charset=utf-8;' });

        if (navigator.msSaveBlob) // IE 10+
        { 
            navigator.msSaveBlob(blob, filename);
        } 
        else 
        {
            var link = document.createElement("a");
            if (link.download !== undefined) // feature detection
            { 
                // Browsers that support HTML5 download attribute
                var url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", filename);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }-*/;
}
— জাস্টিন স্টেইন
সূত্র
1

এখানে একটি কৌণিক বন্ধুত্বপূর্ণ সংস্করণ:

  constructor(private location: Location, private renderer: Renderer2) {}

  download(content, fileName, mimeType) {

    const a = this.renderer.createElement('a');

    mimeType = mimeType || 'application/octet-stream';

    if (navigator.msSaveBlob) {

      navigator.msSaveBlob(new Blob([content], {
        type: mimeType
      }), fileName);
    }
    else if (URL && 'download' in a) {

      const id = GetUniqueID();

      this.renderer.setAttribute(a, 'id', id);
      this.renderer.setAttribute(a, 'href', URL.createObjectURL(new Blob([content], {
        type: mimeType
      })));

      this.renderer.setAttribute(a, 'download', fileName);

      this.renderer.appendChild(document.body, a);

      const anchor = this.renderer.selectRootElement(`#${id}`);

      anchor.click();

      this.renderer.removeChild(document.body, a);
    }
    else {
      this.location.go(`data:application/octet-stream,${encodeURIComponent(content)}`);
    }
  };
— Chrillewoodz
সূত্র
1

উপরের উত্তরগুলি কাজ করে, তবে মনে রাখবেন যে আপনি যদি .xls ফর্ম্যাটে খোলেন, কলামগুলি '\t'instead এর পরিবর্তে আলাদা করা যেতে পারে ',', উত্তরগুলি https://stackoverflow.com/a/14966131/6169225 ভালভাবে কাজ করেছে আমার জন্য, যতক্ষণ না আমি .join('\t')পরিবর্তে অ্যারে ব্যবহার করেছি .join(',')।

— Marquistador
সূত্র
.xls ফাইলের জন্য ভাল কাজ করে, বিটিডাব্লু আমার একটি ছোটখাটো সমস্যা আছে, যখন পাঠ্যটি খুব দীর্ঘ এবং গ্রিডের আকারটি ছাড়িয়ে যায় শীটটি শীটটি খুব ভাল দেখাচ্ছে না, সমাধান করার কোনও ইঙ্গিত?
— গ্যাব্রিয়েল আঞ্জালদো
1

আমি string[][]একটি সিএসভি ফাইলে রূপান্তর করতে এই ফাংশনটি ব্যবহার করি । এটি কোনও কক্ষকে উদ্ধৃত করে, যদি এতে একটি ", একটি ,বা অন্যান্য শ্বেত স্পেস থাকে (ফাঁকা বাদে):

/**
 * Takes an array of arrays and returns a `,` sparated csv file.
 * @param {string[][]} table
 * @returns {string}
 */
function toCSV(table) {
    return table
        .map(function(row) {
            return row
                .map(function(cell) {
                    // We remove blanks and check if the column contains
                    // other whitespace,`,` or `"`.
                    // In that case, we need to quote the column.
                    if (cell.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + cell.replace(/"/g, '""') + '"';
                    }
                    return cell;
                })
                .join(',');
        })
        .join('\n'); // or '\r\n' for windows

}

দ্রষ্টব্য : mapপলিফিল্ড না থাকলে ইন্টারনেট এক্সপ্লোরার <11 এ কাজ করে না ।

দ্রষ্টব্য : যদি ঘরগুলিতে সংখ্যা থাকে তবে আপনি সংখ্যাগুলিকে স্ট্রিংয়ে রূপান্তর করতে cell=''+cellআগে যুক্ত করতে পারেন if (cell.replace...।

অথবা আপনি এটি ES6 ব্যবহার করে একটি লাইনে লিখতে পারেন:

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
— Michael_Scharf
সূত্র
1

আমি পাপাপার্সের মতো একটি লাইব্রেরি ব্যবহার করার পরামর্শ দেব: https://github.com/mholt/PapaParse

গৃহীত উত্তরে বর্তমানে একাধিক সমস্যা রয়েছে:

  • ডেটাতে কমা থাকলে এটি ব্যর্থ হয়
  • এটি ব্যর্থ হয় যদি ডেটাতে একটি লাইন ব্রেক থাকে
  • এটি (ধরণের) ব্যর্থ হয় যদি ডেটাতে একটি উদ্ধৃতি চিহ্ন থাকে
— ফাল ট্যান্ডেটজকি
সূত্র
1

এটিকে সহজভাবে চেষ্টা করে দেখুন, এখানে কয়েকটি উত্তর ইউনিকোড ডেটা এবং ডেটা পরিচালনা করছে না উদাহরণস্বরূপ কমা রয়েছে।

function downloadUnicodeCSV(filename, datasource) {
    var content = '', newLine = '\r\n';
    for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
        var line = datasource_1[_i];
        var i = 0;
        for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
            var item = line_1[_a];
            var it = item.replace(/"/g, '""');
            if (it.search(/("|,|\n)/g) >= 0) {
                it = '"' + it + '"';
            }
            content += (i > 0 ? ',' : '') + it;
            ++i;
        }
        content += newLine;
    }
    var link = document.createElement('a');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
— ইমল হাসরঙ্গ পেরের
সূত্র
1

সিএসভি ফাইল ডাউনলোড করুন

  let csvContent = "data:text/csv;charset=utf-8,";
  rows.forEach(function (rowArray) {
    for (var i = 0, len = rowArray.length; i < len; i++) {
      if (typeof (rowArray[i]) == 'string')
        rowArray[i] = rowArray[i].replace(/<(?:.|\n)*?>/gm, '');
      rowArray[i] = rowArray[i].replace(/,/g, '');
    }

    let row = rowArray.join(",");
    csvContent += row + "\r\n"; // add carriage return
  });
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "fileName.csv");
  document.body.appendChild(link);
  link.click();
— Vik2696
সূত্র
1

নিম্নলিখিত একটি নেটিভ js সমাধান।

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = [
    ['111', '222', '333'],
    ['aaa', 'bbb', 'ccc'],
    ['AAA', 'BBB', 'CCC']
  ];
  for (const row of rows) {
    const rowData = [];
    for (const column of row) {
      rowData.push(column);
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
<button onclick="export2csv()">Export array to csv file</button>
স্নিপেট প্রসারিত করুন

— dabeng
সূত্র
আমার জন্য পুরোপুরি কাজ। ধন্যবাদ!
— শ্রীজানি ঘোষ
0

নকআউট জেএসের জন্য কারও যদি এটির প্রয়োজন হয় তবে এটি মূলত প্রস্তাবিত সমাধানের সাথে ঠিক কাজ করে:

এইচটিএমএল:

<a data-bind="attr: {download: filename, href: csvContent}">Download</a>

মডেল দেখুন:

// for the download link
this.filename = ko.computed(function () {
    return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
    if (!this.csvLink) {
        var data = ko.unwrap(this.data),
            ret = 'data:text/csv;charset=utf-8,';

        ret += data.map(function (row) {
            return row.join(',');
        }).join('\n');

        return encodeURI(ret);
    }
}, this);
— Milimetric
সূত্র
0

আমি জ্যাভিয়ার জনস ফাংশনে যোগ করেছি ফিল্ড শিরোনামগুলি অন্তর্ভুক্ত করতে প্রয়োজনে, jQuery ব্যবহার করুন। দেশি জাভাস্ক্রিপ্ট লুপের জন্য ea .আচ বিটটির পরিবর্তন প্রয়োজন

function exportToCsv(filename, rows, headers = false) {
    var processRow = function (row) {
        row = $.map(row, function(value, index) {
            return [value];
        });
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            if(i == 0 && j == 0 && headers == true){
                var ii = 0;
                $.each(rows[i], function( index, value ) {
                    //console.log(index);
                    var fieldName = index === null ? '' : index.toString();
                    //console.log(fieldName);
                    var fieldResult = fieldName.replace(/"/g, '""');
                    //console.log(fieldResult);
                    if (fieldResult.search(/("|,|\n)/g) >= 0){
                        fieldResult = '"' + fieldResult + '"';
                    }
                    //console.log(fieldResult);
                    if (ii > 0){
                        finalVal += ',';
                        finalVal += fieldResult;
                    }else{
                        finalVal += fieldResult;
                    }
                    ii++;
                    //console.log(finalVal);
                });
                finalVal += '\n';
                //console.log('end: '+finalVal);
            }
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0){
                result = '"' + result + '"';
            }
            if (j > 0){
                finalVal += ',';
                finalVal += result;
            }else{
                finalVal += result;
            }
        }
        return finalVal + '\n';
    };
    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }
    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    }else{
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}
— বিআইএম
সূত্র
0

এটি গ্রহণযোগ্য উত্তরের উপর ভিত্তি করে একটি পরিবর্তিত উত্তর, যেখানে জেএসএন থেকে ডেটা আসবে।

            JSON Data Ouptut:
             0 :{emails: "SAMPLE Co., peter@samplecompany.com"}, 1:{emails: "Another CO. , ronald@another.com"}


            JS:
            $.getJSON('yourlink_goes_here', { if_you_have_parameters}, function(data) {
            var csvContent = "data:text/csv;charset=utf-8,";
            var dataString = '';
             $.each(data, function(k, v) {
                dataString += v.emails + "\n";
             });

            csvContent += dataString;

            var encodedUri = encodeURI(csvContent);
            var link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "your_filename.csv");
            document.body.appendChild(link); // Required for FF

            link.click();
        });
— রোনাল্ড জি
সূত্র
0

আপনি যদি খুব দ্রুত সমাধানের সন্ধান করেন তবে আপনি এই ছোট লাইব্রেরিকেও একটি সুযোগ দিতে পারেন যা আপনার জন্য সিএসভি ফাইল তৈরি এবং ডাউনলোড করবে: https://github.com/mbrn/filefy

ব্যবহার খুব সহজ:

import { CsvBuilder } from 'filefy';

var csvBuilder = new CsvBuilder("user_list.csv")
  .setColumns(["name", "surname"])
  .addRow(["Eve", "Holt"])
  .addRows([
    ["Charles", "Morris"],
    ["Tracey", "Ramos"]
  ])
  .exportFile();
— ম্লাদেন মিত্রোভিক
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.