JS实现导出Excel和CSV文件操作

2024-09-28 18:15:38

一、js导出Excel

<html>
<head>

</head>
<body>
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<script type="text/javascript">
/**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}
</script>

<script type="text/javascript">
var exportDataSource = [{
                    name: '路人甲',
                    phone: '123456789',
                    email: '000@123456.com'
                }, {
                    name: '炮灰乙',
                    phone: '123456789',
                    email: '000@123456.com'
                }, {
                    name: '土匪丙',
                    phone: '123456789',
                    email: '000@123456.com'
                }, {
                    name: '流氓丁',
                    phone: '123456789',
                    email: '000@123456.com'
                }, ]; //导出json数据源
function exportExcel() {
            var excelItems = [];
            for (let i = 0; i < exportDataSource.length; i++) {
                if (exportDataSource[i].name != "") {
                    excelItems.push({
                        "姓名": exportDataSource[i].name,
                        "电话": exportDataSource[i].phone,
                        "邮箱": exportDataSource[i].email
                    }); //属性
                }
            }
            var sheet = XLSX.utils.json_to_sheet(excelItems);
            openDownloadDialog(sheet2blob(sheet), 'exportdata.xlsx');
        }
</script>

<a style="float: right;" onclick="exportExcel()">导出下载</a>
</body>
</html>

二、js实现json导出csv

<html>
<head>
  <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
  <button onclick='tableToExcel()'>导出</button>
</head>
<body>
  <script>

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

</script>
</body>
</html>

三、js实现json导出csv

<html>
<head>
  <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
  <button onclick='tableToExcel()'>导出</button>
</head>
<body>
  <script>

    function tableToExcel(){
      //要导出的json数据
      const 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 = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
      //循环遍历，每行加入tr标签，每个单元格加td标签
      for(let i = 0 ; i < jsonData.length ; i++ ){
        str+='<tr>';
        for(let item in jsonData[i]){
            //增加\t为了不让表格显示科学计数法或者其他格式
            str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
        }
        str+='</tr>';
      }
      //Worksheet名
      let worksheet = 'Sheet1'
      let uri = 'data:application/vnd.ms-excel;base64,';

      //下载的表格模板数据
      let 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 + base64(template)
    }
    //输出base64编码
    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</body>
</html>

四、js实现Tab转为Excel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>excel 导出测试</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
            vertical-align: middle;
            width: 800px;
            font-size: 20px;
        }

        button {
            height: 30px;
            width: 100px;
            margin: 20px 20px;
            background: yellowgreen;
            border-radius: 10px;
            outline: none;
        }

        input {
            height: 30px;
            padding-left: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="wrap" style="width:900px;margin:20px auto;">
        <h3>js脚本 导出excel测试</h3>
        <table id="tb" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</td>
                        <th>年龄</td>
                            <th>座右铭</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>18</td>
                    <td>走的人多了，变成了路。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>88</td>
                    <td>人人都有自己走的路，哪条属于自己呢？</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>81</td>
                    <td>走别人的路，让他没道可走！</td>
                </tr>
            </tbody>
        </table>

        <label>
            姓名：<input type="text" autocomplete id="name" placeholder="请输入您的姓名..." >
        </label>

        <label>
            年龄：<input type="text" autocomplete id="age" placeholder="请输入您的年龄...">
        </label>

        <label>
            座右铭：<input type="text" autocomplete id="sex" placeholder="请输入您的座右铭..." >
        </label>

        <button id="add">添加信息</button>
        <button id="out" onclick="btn_export()">导出文件</button>
    </div>
    <script src="./xlsx.core.min.js"></script>
    <script src="./jquery.min.js"></script>
    <script src="./excel.js"></script>

    <script>
        function btn_export() {
            var table = document.querySelector("#tb");
            var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象
            openDownloadDialog(sheet2blob(sheet), 'excel.xlsx');
        }

        var id = $("input").length + 1;
        $(function() {
            $("#add").click(function() {
                var name = $("#name").val();
                var age = $("#age").val();
                var sex = $("#sex").val();
                $("tbody").append("<tr><td>" + id + "</td><td>" + name + "</td> <td>" + age + "</td> <td>" + sex + "</td></tr>");
                id++;
                $("input").val('');
            });
        })
    </script>
</body>

</html>

到此这篇关于JS实现导出Excel和CSV文件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现数据导出为EXCEL（支持大量数据导出）

数据导出为excel是前端比较常用的功能.笔者近期在网上收集汇总了几种常用的方法,供大家使用. 1.ActiveXObject("Excel.Application") 这种方法只能在IE下使用. 优点:参照VBA控制excel对象.(代码不会的可以录制宏) 缺点:引用cell对象太慢,上万行数据导出时间超过2分钟 2.以Table方式导出为html文件. 3.以CSV方式导出. 使用中发现如果数据较多,上述第2.3中方法会失效,因此又整理了第4种方法 toLargerCSV. 第4种
JS实现导出Excel的五种方法详解【附源码下载】

本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc
js前端导出Excel的方法

需求: 要求把项目中的table表格导出Excel 需求分析及解决: 既然需要导出,是报表的可能性比较大,我的项目中就是这样,那既然是报表导出,可以是前端导出,也可以是后端导出(技术包括POI或者报表工具等),这篇文章主要是网上找的前端导出,既然是前端导出又是报表就需要有数据,所以数据都需要你提前做好相应填充代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF
JS兼容浏览器的导出Excel（CSV）文件的方法

Js导出表格为Excel文件的常见一种办法是调用:ActiveXObject("Excel.Application") ,但是这种方法有局限性,只能在IE系列下的浏览器里实现,兼容性方面不理想. 经测试,采用本文推荐的方法能兼容性较好的导出表格内容到Excel文件. 复制代码代码如下: var str = "博客, 域名\nBlog, 2\njb51.net, 3";var uri = 'data:text/csv;charset=utf-8,' + str;
纯JS将table表格导出到excel的方法

html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE导出Excel方法</button> <button type="button" onclick="method5('tableExcel')">Chrome导出Excel</button> </di
javascript导出csv文件（excel）的方法示例

这里贴出JavaScript导出csv文件(excel)的代码. /** * 导出excel * @param {Object} title 标题列key-val * @param {Object} data 值列key-val * @param {Object} fileName 文件名称 */ function JSONToExcelConvertor(title, data, fileName) { var CSV = ''; var row = ""; for (var i =
基于JS实现table导出Excel并保留样式

浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td>公司一</td> 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
JS实现导出Excel和CSV文件操作

一.js导出Excel <html> <head> </head> <body> <script type="text/javascript" src="./xlsx.core.min.js"></script> <script type="text/javascript"> /** * 通用的打开下载对话框方法,没有测试过具体兼容性 * @param url 下
Java 导出 CSV 文件操作详情

首先第一步导入坐标: <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-csv</artifactId> <version>1.6</version> </dependency> 第二步引入工具类说明下因为这个工具类用到是Listj集合我就顺带吧实体类和map 之间的转换也说了 import org.apach
js基于FileSaver.js 浏览器导出Excel文件的示例

本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记限制一:不同浏览器对 blob 对象有不同的限制具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes
React.js前端导出Excel的方式

目录前言实现方式 csv 与 Excel 的区别 react-csv xlsx cdn 方式在 react 中使用 json 转 excel 结语前言前段时间,项目上有个需求需要将数据报表导出为 excel 的需求,这本来是后端的工作,前端只需要一个 a 标签,就可以下载文件,但不巧的是,正好遇到后端请假,而且项目比较着急,那么前端是否可以实现呢? 实现方式经过一顿搜索后,发现有这么几个 npm 库 react-csv 根据给定的数据生成 CSV 文件,数据可以是二维数组.对象数组或
C#导出数据到CSV文件的通用类实例

本文实例讲述了C#导出数据到csv文件的通用类.分享给大家供大家参考.具体如下: 通过这个类可以很简单的定义数据格式,并导出到csv文件 //这里写了一个通用的类 using System; using System.Data; using System.Configuration; using System.Collections.Generic; using System.Web; using System.Web.Security; using System.Web.UI; using S
vue.js中导出Excel表格的案例分析

有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.导入两个JS 下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from '
Python实现的简单读写csv文件操作示例

本文实例讲述了Python实现的简单读写csv文件操作.分享给大家供大家参考,具体如下: python中有一个读写csv文件的包,直接import csv即可新建test.csv 1.写 import csv with open("test.csv","w",encoding='utf8') as csvfile: writer=csv.writer(csvfile) writer.writerow(["index","a_name&
R语言对CSV文件操作实例讲解

在 R 语言中,我们可以从存储在 R 语言环境外的文件中读取数据. 我们还可以将数据写入将被操作系统存储和访问的文件. R 语言可以读取和写入各种文件格式,如csv,excel,xml等. 在本章中,我们将学习从csv文件读取数据,然后将数据写入csv文件. 该文件应该存在于当前工作目录中,以便 R 语言可以读取它. 当然我们也可以设置我们自己的目录并从那里读取文件. 获取和设置工作目录您可以使用getwd()函数检查R语言工作区指向的目录. 您还可以使用setwd(
基于node.js的fs核心模块读写文件操作(实例讲解)

node.js 里fs模块常用的功能实现文件的读写目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFile方法 - 文件大分流读取,stream - 引入fs模块 - let fs=require('fs') 同步读取文件 -fs.readFileSync('路径',utf8); let result=fs.readFileSync('./1.txt','utf8'); 异步读取文件,用参数err捕获

JS实现导出Excel和CSV文件操作

一、js导出Excel

二、js实现json导出csv

三、js实现json导出csv

四、js实现Tab转为Excel

相关推荐

随机推荐