正文
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') })
