美文网首页
2019-01-16前端导出excel

2019-01-16前端导出excel

作者: canvas_mo | 来源:发表于2019-01-16 17:15 被阅读0次

    一、后台返回文档流

          export().then(res => {
            const content = res
            const blob = new Blob([content])
            const fileName = '导出信息.xlsx'
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
        }
    
    //防止乱码在请求方法中添加返回数据类型
    responseType: 'arraybuffer'
    

    二、后台返回json数据

    exprotExcel() {
          //要导出的json数据
          var jsonData = [
            {
              name:'路人甲',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'炮灰乙',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'土匪丙',
              phone:'123456',
              email:'123@123456.com'
            },
            {
              name:'流氓丁',
              phone:'123456',
              email:'123@123456.com'
            },]
          //列标题,逗号隔开,每一个逗号就是隔开一个单元格
          let str = `姓名,电话,邮箱\n`;
          //增加\t为了不让表格显示科学计数法或者其他格式
          for(let i = 0 ; i < jsonData.length ; i++ ){
            for(let item in jsonData[i]){
              let jsonStr = jsonData[i][item] + ''
              // 为了防止字符串中存在英文的“,”所以要替换一下
              str+=`${jsonStr.replace(/,/g, ",")+ '\t'},`;     
            }
            str+='\n';
          }
          //encodeURIComponent解决中文乱码
          let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
          //通过创建a标签实现
          var link = document.createElement("a");
          link.href = uri;
          //对下载的文件命名
          link.download =  "json数据表.csv";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
    

    相关文章

      网友评论

          本文标题:2019-01-16前端导出excel

          本文链接:https://www.haomeiwen.com/subject/linmdqtx.html