<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

         table{

            border:1px solid #ddd;

            border-collapse: collapse;

        }

        td, th{

            border:1px solid #ddd;

            padding:3px;

        }

    </style>

</head>

<body>

    <table id="score">

        <thead>

            <th>Name</th>

            <th>Math</th>

            <th>Physics</th>

            <th>Chemistry</th>

        </thead>

        <tbody>

            <tr>

                <td>Melanie</td>

                <td>100</td>

                <td>80</td>

                <td>90</td>

            </tr>

            <tr>

                <td>Thomas</td>

                <td>99</td>

                <td>100</td>

                <td>90</td>

            </tr>

            <tr>

                <td>Ada中国</td>

                <td>100</td>

                <td>70</td>

                <td>95</td>

            </tr>

        </tbody>

    </table>

    <br>

    <button id="btn">Download</button>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>

            var btn = document.getElementById('btn');

            btn.onclick = function() {

              downloadTable('score', 'score.csv');

            };

            var columnDelimiter = "\t"; //列分割符

            var lineDelimiter = "\n";  //行分割符

            function downloadTable(tableId, fileName) {

              var scoreTable = document.getElementById(tableId);

              var head = scoreTable.tHead;

              var ths = head.getElementsByTagName('th');

              var trs = scoreTable.tBodies[0].getElementsByTagName('tr');

              var result = '';

              for(let i=0,l=ths.length; i<l; i++){

                result += ths[i].innerHTML + columnDelimiter;

              }

              result += lineDelimiter;

              for(let i=0, l=trs.length; i<l; i++){

                let tds = trs[i].getElementsByTagName('td');

                for(let j=0, l2=tds.length; j<l2; j++){

                  result += tds[j].innerHTML + columnDelimiter;

                }

                result += lineDelimiter;

              }

              var blob = new Blob([new Uint8Array(_toUtf16LE(result))], {type: "text/csv;charset=UTF-16;"});

              var downloadLink = document.createElement("a");

              if ('download' in downloadLink) {

                var url = URL.createObjectURL(blob);

                downloadLink.href = url;

                downloadLink.download = fileName;

                downloadLink.hidden = true;

                document.body.appendChild(downloadLink);

                downloadLink.click();

                document.body.removeChild(downloadLink);

              }else{

                if(navigator.msSaveBlob){ //IE10+

                  navigator.msSaveBlob(blob, fileName);

                }

              }

            }

            function _toUtf16LE(str) {

              var charCode, byteArray = [],

                  len = str.length;

              byteArray.push(255, 254); // LE BOM

              for (var i = 0; i < len; ++i) {

                charCode = str.charCodeAt(i);

                // LE Bytes

                byteArray.push(charCode & 0xff);

                byteArray.push(charCode / 256 >>> 0);

              }

              return byteArray;

            }

    </script>

</body>

</html>

js网页下载csv格式的表格的更多相关文章

  1. el-table——可编辑拖拽转换csv格式的表格

    <!--可拖拽的表格:表格内容+行参数+按钮名称(对话框标题)--> <template> <div> <el-button size="mini& ...

  2. thinkphp导出csv格式的表格

    <?php /** * Created by PhpStorm. * User: hanks * Date: 2016/4/20 * Time: 13:51 */ namespace Home\ ...

  3. php生成CSV格式(转)

    参考网址: php对csv文件的常用操作集合 http://blog.xhbin.com/archives/748 1,下载CSV格式文档 唯一需要特别注意的是编码. <? include_on ...

  4. Excel 转 vCard格式、CSV格式

    Excel 转vCard格式(常用于Gmail, Yahoo, 163等).CSV格式(常用于Outlook, Foxmail等) 最近公司邮件通讯录需要更新,我就将原来的通讯录给删除了,准备重新导入 ...

  5. 数据可视化：CSV格式，JSON格式

    下载CSV格式数据,进行可视化 csv.reader()创建一个与文件有关联的阅读器(reader)对象,reader处理文件中的第一行数据,并将每一项数据都存储在列表中 head_row = nex ...

  6. 使用JavaScript下载csv文件

    前端可以使用JavaScript在客户端下载包含页面数据的文件,这里以下载CSV格式文件为例,代码如下: function downloadData(data, filename, type) { v ...

  7. js将json数据以csv格式下载

    摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: <!DO ...

  8. JS前端创建CSV或Excel文件并浏览器导出下载

    长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url.前端通过location.hre ...

  9. ABAP->内表数据下载到CSV格式(原创转载请注明)

    需求:将alv上面的数据计算到内表中区,然后通过自定义按钮进行下载到csv格式中 附加:现在基本不用csv导出了,但是有些变态需求强行要求,也只好研究出来了,excel与txt导出很简单,那就不多说了 ...

随机推荐

  1. java乱码问题解决

    1.通过统一的过滤器进行了页面过滤(问题排除) 2.通过debug功能发现页面传到servelet和DAO中文都是OK的,可以说明在web程序端没有问题 问题就可能出现在数据库上面 首先查看数据库编码 ...

  2. MVC、MVP、MVVM模式

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

  3. js -- sort() 使用排序函数

    JavaScript sort() 方法 JavaScript Array 对象 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 arrayObject.sort(sortby) 参数 ...

  4. Ex 2_16 给定一个无穷数组..._第二次作业

    先比较数组的A[0]元素,若不相等接下来比较A[1],A[2],A[4],A[8]…,若找到一个区间A[2n-1]<x<A[2n],再对这个区间进行折半查找操作.总的时间为O(logn). ...

  5. [JavaScript]使用ArrayBuffer和Blob编辑二进制流

    Blob()构造方法返回一个新的Blob对象. 内容是包含参数array的二进制字节流. 语法 var aBlob = new Blob( array, options ); 参数 array is ...

  6. Hystrix浅谈

    Hystrix如何使用很多说明,看了很多博客,却发现能说明一些简单概念的文章就没有. 所以本文不太回去说如何使用 Hystrix ,但是会简明的说一下 一些概念 super(Setter.withGr ...

  7. 在XIB 或者 SB 上面 实现 半透明的背景上添加UILabel是文字不透明

    设透明背景的时候直接设置RGB值  然后设置Opacity即可

  8. 【MySql】删除操作

    删除表内数据,用 delete.格式为: delete from 表名 where 删除条件; 实例:删除学生表内姓名为张三的记录. delete from student where T_name ...

  9. Eclipse中设置Java代码格式化

    一.自定义 Java 代码格式化 [Java-Code-Formatting.xml 下载],下载完毕以后,打开 Eclipse 找到如下图界面,点击 Import 导入即可.

  10. Confluence 6 管理 Atlassian 提供的 App

    Confluence 用户可以使用桌面应用来编辑一个已经上传到 Confluence 的文件,然后这个文件自动保存回 Confluence. 这个下载和上传的过程是通过 Atlassian Compa ...