前端导出数据表格(jpg、csv)

387 阅读1分钟

项目结构为iview cil 2.0

导出为jpg

import html2canvas from "html2canvas";
  let table = this.$refs.selection.$el;  //获取需要导出的表格
        html2canvas(table).then(image => { 
          var url = image.toDataURL();
          let a = document.createElement("a");
          a.href = url;
          a.download = "未命名";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        });

江湖传言因html2canvas 1.0问题,不能按照文档描述的方法写,原因见 这篇 文章

导出为csv

//参数依次说明:导出数据、导出数据头、文件名,
//导出数据为json格式;数据头为字符串,以\n结尾,各项用逗号分隔;文件名为字符串
function tableTocsv(jsonData, str, name) {
    for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {
            str += `${jsonData[i][item] + '\t'},`;
        }
        str += '\n';
    }
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    var link = document.createElement("a");
    link.href = uri;
    link.download = name + ".csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}