1、匯出 CSV

CSV (Comma Separated Values，逗號分隔值) 是一種常見的檔案格式，規範定義請參考 RFC 4180

它用換行符分割不同的記錄，用逗號分割每條記錄中的不同欄位，每個欄位可以用也可以不用雙引號包圍

如果欄位中有雙引號、換行符、逗號，那麼這個欄位必須要用雙引號包圍，並且要用雙引號對雙引號轉義

以下是純前端匯出 CSV 檔案的程式碼：

function isMSbrowser() {
    const  userAgent = window.navigator.userAgent
    return userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Trident') !== -1
}

function format(data) {
    return String(data).replace(/"/g, '""').replace(/(^[\s\S]*$)/, '"$1"')
}

function saveCSV(title, head, data) {
    let wordSeparator = ','
    let lineSeparator = '\n'

    let reTitle = title + '.csv'
    let headBOM = '\ufeff'
    let headStr = head ? head.map(item => format(item)).join(wordSeparator) + lineSeparator : ''
    let dataStr = data ? data.map(row => row.map(item => format(item)).join(wordSeparator)).join(lineSeparator) : ''

    return isMSbrowser()
    ? new Promise(resolve => { // Edge、IE11
        let blob = new Blob([headBOM + headStr + dataStr], { type: 'text/plain;charset=utf-8' })
        window.navigator.msSaveBlob(blob, reTitle)
        resolve()
    })
    : new Promise(resolve => { // Chrome、Firefox
        let a = document.createElement('a')
        a.href = 'data:text/csv;charset=utf-8,' + headBOM + encodeURIComponent(headStr + dataStr)
        a.download = reTitle
        a.click()
        resolve()
    })
}
 

下面是一個使用的例子：

let title = 'test'
let head = ['key', 'value']
let data = [
    ['a', '我是正常文字'],
    ['b', '我是"雙引號"'],
    ['c', '我是,小逗號,'],
    ['d', '我是\n換行符']
]
saveCSV(title, head, data).then(() => {
    console.log('success')
})

2、匯出 JSON

JSON 也是一種很常見的資料格式，特別是在前後端資料交換中十分常用，這裡就不再展開描述了

以下是純前端匯出 JSON 檔案的程式碼：

function isMSbrowser() {
    const  userAgent = window.navigator.userAgent
    return userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Trident') !== -1
}

function saveJSON(title, data) {
    let reTitle = title + '.json'
    let dataStr = data ? JSON.stringify(data) : ''

    return isMSbrowser()
    ? new Promise(resolve => { // Edge、IE11
        let blob = new Blob([dataStr], { type: 'text/plain;charset=utf-8' })
        window.navigator.msSaveBlob(blob, reTitle)
        resolve()
    })
    : new Promise(resolve => { // Chrome、Firefox
        let a = document.createElement('a')
        a.href = 'data:text/json;charset=utf-8,' + dataStr
        a.download = reTitle
        a.click()
        resolve()
    })
}
 

下面是一個使用的例子：

let title = 'test'
let data = {
    'a': 'Hello',
    'b': 'Hi',
    'c': 'Goodbye',
    'd': 'Bye'
}
saveJSON(title, data).then(() => {
    console.log('success')
})

【 閱讀更多 JavaScript 系列文章，請看 JavaScript學習筆記 】