前端导出数据表格（jpg、csv）

最新推荐文章于 2025-07-07 14:44:26 发布

转载最新推荐文章于 2025-07-07 14:44:26 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b8387e66fb9a019e52e7bef

文章标签：

#前端 #json #ViewUI

博客介绍了iview cil 2.0项目结构，涉及导出为jpg和csv格式。其中导出jpg时，因html2canvas 1.0问题，不能按文档描述方法操作，具体原因可参考相关文章。

项目结构为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);
}
复制代码