两种使用原生js实现导出excel数据简单讲解

简介: 1.js导出csv简单来说csv就是一种数据以逗号隔开的,文件以纯文本形式存储表格数据。csv优点是实现起来相对简单,但是不支持多sheet和样式具体可以查看CSV百度百科进行了解根据csv格式的说明,所以我们实现导出csv就很简单了,只要原始数据转换成列数据与列数据之间用逗号隔开,行数据进行换行格式的文本数据其后缀为 .

1.js导出csv

简单来说csv就是一种数据以逗号隔开的,文件以纯文本形式存储表格数据。
csv优点是实现起来相对简单,但是不支持多sheet和样式
具体可以查看CSV百度百科进行了解

根据csv格式的说明,所以我们实现导出csv就很简单了,只要原始数据转换成列数据与列数据之间用逗号隔开,行数据进行换行格式的文本数据其后缀为 .csv 就可以了
导出示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <textarea id="textarea" cols="30" rows="10">列头1,列头2,列头3,列头4,列头5
r1.1,r1.2,r1.3,r1.4,r1.5
r2.1,r2.2,r2.3,r2.4,r2.5
r3.1,r3.2,r3.3,r3.4,r3.5
r4.1,r4.2,r4.3,r4.4,r4.5
r5.1,r5.2,r5.3,r5.4,r5.5
r6.1,r6.2,r6.3,r6.4,r6.5
r7.1,r7.2,r7.3,r7.4,r7.5</textarea>
    <script>
        var text = document.getElementById("textarea").value;
        var blob = new Blob([text], { type: "text/comma-separated-values" });
        var a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = "01.csv";
        a.innerHTML = "下载"
        document.body.appendChild(a);
    </script>
</body>
</html>
img_38cf34f059185e335d35ac01b88b8ca8.gif
aa1.gif

2.js导出xls

这个方法是很早前在网上发现的。
其实它的实现原理也很简单就是直接将嵌有HTML表格的HTML代码直接保存为.xls后缀的文件。
这种方式的好处是能保留HTML原来设计好的样式,但是你要事先设置好表格显示排版

img_26da2a6e44e60dee98531bec682db1fe.gif

导出示例:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <table border="1">
    <tr>
      <th height="40" colspan="6" style="font-size:18px">
        <div align="center">请假条</div>
      </th>
    </tr>
    <tr>
      <td height="40" width="80">
        <div align="center">姓名</div>
      </td>
      <td width="180">&nbsp;</td>
      <td width="80">
        <div align="center">部门</div>
      </td>
      <td width="180">&nbsp;</td>
      <td width="80">
        <div align="center">职务</div>
      </td>
      <td width="180">&nbsp;</td>
    </tr>
    <tr>
      <td height="40" colspan="6">1、请假类别: &nbsp;事假 &nbsp;病假 &nbsp;婚假 &nbsp;丧假 &nbsp;公假 &nbsp;伤假 &nbsp;产假 &nbsp;其他
    </tr>
    <tr>
      <td height="80" colspan="6">
        <p>2、请假事由:</p>
        <p>&nbsp;</p>
      </td>
    </tr>
    <tr>
      <td height="40" colspan="6">3、请假时间:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</td>
    </tr>
    <tr>
      <td height="40">
        <div align="center">审核意见</div>
      </td>
      <td colspan="5">&nbsp;</td>
    </tr>
  </table>
  <script>
    var tableHTML = document.querySelector("table").outerHTML;
    var xlsContent= `<html xmlns:v="urn:schemas-microsoft-com:vml" 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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="ProgId" content="Excel.Sheet" /> 
</head>
<body>${tableHTML}</body>
</html>`; 
    var blob = new Blob([xlsContent], { type: "application/vnd.ms-excel" });
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "demo.xls";
    a.innerHTML = "下载xls"
    document.body.appendChild(a); 
  </script>
</body>
</html>
img_fd2b52362c78f64786f28be23aa61677.gif
相关文章
|
7天前
|
文字识别 BI
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
49 8
|
28天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
2月前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
|
2月前
|
数据采集 数据可视化 数据挖掘
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
305 10
|
3月前
|
前端开发
实现Excel文件和其他文件导出为压缩包,并导入
实现Excel文件和其他文件导出为压缩包,并导入
50 1
|
3月前
|
数据格式 UED
记录一次NPOI库导出Excel遇到的小问题解决方案
【11月更文挑战第16天】本文记录了使用 NPOI 库导出 Excel 过程中遇到的三个主要问题及其解决方案:单元格数据格式错误、日期格式不正确以及合并单元格边框缺失。通过自定义单元格样式、设置数据格式和手动添加边框,有效解决了这些问题,提升了导出文件的质量和用户体验。
328 3
|
3月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
3月前
|
Java API Apache
|
3月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
154 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
存储 Java API
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
172 4

热门文章

最新文章