JavaScript实战笔记(七) 纯前端导出CSV和JSON

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学习笔记 】