项目知识点总结二

一、vue导出表格数据(.xlsx格式)
1. 安装：
        npm install xlsx file-saver -S
2. 导入：   
        import FileSaver from 'file-saver'
        const XLSX = require("xlsx");
3. 使用：
    //导出事件
    const handleExport = () => {
        //设置excel为文本格式解决百分比数值导出后自动转换为科学计数法
        var xlsxParam = { raw: true } 
        //DOM的ID名字
        var wb = XLSX.utils.table_to_book(document.querySelector('#table-out'), xlsxParam)
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `文件名.xlsx`)
         } catch (e) { 
             if (typeof console !== 'undefined') console.log(e, wbout) 
         }
        return wbout
    }
        
        
        
二、vue导出数据(.csv格式)
1. 安装：
        npm install json2csv -s
2. 导入：
        import json2csv from "json2csv";
3. 注意点：数据格式
    let list = [{name: 'liu',age: 24},{name: 'leng',age: 22}]
4. 使用：
    // 判断是否IE浏览器(定义方法)
    const MyBrowserIsIE = () => {
        let isIE = false;
        if (
            navigator.userAgent.indexOf("compatible") > -1 &&
            navigator.userAgent.indexOf("MSIE") > -1
        ) {
            // ie浏览器
            isIE = true;
        }
        if (navigator.userAgent.indexOf("Trident") > -1) {
            // edge 浏览器
            isIE = true;
        }
        return isIE;
    }
    
    //创建a标签下载(定义方法)
    const createDownLoadClick = (content, fileName) => {
        const link = document.createElement("a");
        link.href = encodeURI(content);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    //导出事件
    const handleExport = () => {
            try {
                const result = json2csv.parse(list(导出的数据), {
                    // fields: fields,
                    excelStrings: true
                });
                if (MyBrowserIsIE()) {
                    // IE10以及Edge浏览器
                    var BOM = "\uFEFF";
                    // 文件转Blob格式
                    var csvData = new Blob([BOM + result], { type: "text/csv" });
                    navigator.msSaveBlob(csvData, `文件名.csv`);
                } else {
                    let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
                    // 非ie 浏览器
                    createDownLoadClick(csvContent, `文件名.csv`);
                }
            } catch (err) {
                alert(err);
            }
    }