JavaScript実戦メモ(七)純先端導出CSVとJSON

17994 ワード

1、CSVをエクスポート
CSV(Commer 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 = '
'
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', '  
'
] ] 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学習ノートを見てください】