前端json導出csv並通過瀏覽器下載到本地

一、使用模塊 json2csv，file-saver

安裝方式：

npm install file-saver

npm install json2csv

二、代碼

<script lang="ts">
    import FileSaver from 'file-saver'
    const Json2csvParser: any = require('json2csv').Parser
    const datetime: any = Date.now()
    Vue.prototype.exportCSV = exportCSV
    export default class Table extends Vue {
        // 導出csv
        exportCSV(data: any, filename = `${datetime}.xls`) {
            const parser = new Json2csvParser()
            const csvData = parser.parse(data)
            const blob = new Blob(
                    ['\uFEFF' + csvData], 
                    { type: 'text/plain;charset=utf-8;' }
            )
            FileSaver.saveAs(blob, filename)
        }
        setData() {
            let data: any = [
                {
                    "姓名": '張三',//表格的表頭即爲key,表格的值即爲value
                    "年齡": '26',
                    "性別": '男'
                },
                {
                    "姓名": '小紅',
                    "年齡": '22',
                    "性別": '女'
                },
                {
                    "姓名": '小蘭',
                    "年齡": '24',
                    "性別": '女'
                },
            ]
            this.exportCSV(data)
        }
    }
</script>

三、效果圖