義碼閣

需求:
網頁上的線條圖(chart)追加下載來源資料功能

由於使用的套件沒提供這功能，只好自己另外寫，還好網路已有高手有類似需求且分享過程。

程式碼:

//將字串轉為csv，註:檔案小可用此方法

//labels: "Apple,Banana";

//values: "1,2";
class CSVGenerateService {
    constructor(labels, values) {
        this.labels = labels;
        this.values = values;
        this.csvString = this.dataToCSV(this.labels, this.values);
        this._filename = "";
    }
    
    //將資料整理成csv內容
    dataToCSV(labels, values) {
        //string 處理，\n代表換行
        return labels.concat("\n", values); //Apple,Banana\n1,2 
    }
    

    //產生並下載
    download() {
        const csvContent = "data:text/csv;charset=utf-8,\ufeff" + this.csvString;
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", `${this._filename}.csv`);

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

    get filename() {
        return this._filename;
    }

    set filename(name) {
        this._filename = name;
    }

}

使用方式:

//下載圖表原始資料
$('input[name="dataDownload"]').click(function () {

	//labelStr: "Apple,Banana";

	//valueStr: "1,2";
    const service = new CSVGenerateService(labelStr, valueStr);
    //自訂檔名
    service.filename = "自訂檔名";
    service.download();
});

下載內容:
 

參考資料:
JavaScript 瀏覽器端產生 csv 檔案

相關文章:

嘗試以自己的角度來整理並紀錄，也許會對一些人有幫助。

文章有錯、參考聯結有漏或是連結失效..等，還請幫忙告知，謝謝。
另外參考資料中有很多更棒的文章，建議多看看。