【JS】json导出到excel，自定义文件名和后缀名

json导出excel表格

HTML

<el-button type="danger" class="ml10 fr" @click="exportForm">导出表格</el-button>

表格输出的数字，如果太长，会自动计算，解决办法：
在td上加上样式 style=“mso-number-format:’\@’”

//导出表格
exportForm(){
    let that = this;
    let jsonData = [];
    for(let i in this.tableList){
        let tr = {
            times: this.tableList[i].times,
            pv: this.tableList[i].pv,
            uv: this.tableList[i].uv,
            click: this.tableList[i].click,
            firstPay: this.tableList[i].firstPay,
            firstAmount: this.tableList[i].firstAmount,
            shard: this.tableList[i].shard,
        };
        jsonData.push(tr);
        console.log(tr)
    }
    //列标题
    var str = '';
    str += '<tr><th>时间</th><th>访问量(pv)</th><th>访问人数(uv)</th><th>预购点击量</th><th>已付定金人数</th><th>已收到定金(元)</th><th>分享次数</th></tr>';
    //循环遍历，每行加入tr标签，每个单元格加td标签
    for(let i = 0 ; i < jsonData.length ; i++ ){
        str+='<tr>';
        for(let item in jsonData[i]){
            //增加\t为了不让表格显示科学计数法或者其他格式
            str+=`<td style="mso-number-format:'\\@'">${ jsonData[i][item] + '\t'}</td>`;
        }
        str+='</tr>';
    }
    str += '<tr><td></td></tr>';
    str += '<tr><td>总计:</td><td style="mso-number-format:\'\\@\'">'+this.sum.pv+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.uv+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.click+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.firstPay+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.firstAmount+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.shard+'</td></tr>';
    var worksheet = 'Sheet1'; //Worksheet名
    var uri = 'data:application/vnd.ms-excel;base64,';

    //下载的表格模板数据
    var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
            <x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${str}</table></body></html>`;
    //下载模板
    // window.location.href = uri + this.base64(template)
    var link = document.createElement("a");
    link.href = uri + this.base64(template);

    link.download = '表格下载' + ".xls";
    link.style = "visibility:hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
},
base64 (s) {
    return window.btoa(unescape(encodeURIComponent(s)))
},

【JS】json导出到excel，自定义文件名和后缀名

json导出excel表格

猜你喜欢