<!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. go import 使用方法记录

    import "fmt"      最常用的一种形式 import "./test"   导入同一目录下test包中的内容 import f "fmt ...

  2. Linux 两组信号对比(关闭和停止进程信号)

    之前看信号的时候,没有太注意不同信号的对比．今天再次看到的时候,突然感觉对一些信号,非常相似,乃至非常容易混淆．今天周末就抽空总结一下． 一.关闭进程信号 常见的4中关闭进程信号是SIGKILL,SI ...

  3. kafka集群报错

    bin/kafka-server-start.sh config/server.properties ,问题来了 : [root@localhost kafka_2.12-0.10.2.0]# Exc ...

  4. 在Winform开发框架中实现对数据库的加密支持（转）

    在很多情况下,我们需要对数据库进行加密,特别是Access数据库.Sqlite数据库,这些直接部署在客户端的数据,因为数据也是客户的资产,数据库总是存在很多相关的秘密或者重要的业务数据,所以一般来说, ...

  5. Confluence 6 数据库表-授权（Authentication）

    下面的表格对用户授权有关的信息进行存储,这部分是通过嵌入到 Confluence 中的  Atlassian Crowd 框架实现的. cwd_user Confluence 中每一个用户的信息. c ...

  6. Confluence 6 数据库支持的驱动

    数据库 驱动已捆绑? JDBC 驱动 备注 更多信息 PostgreSQL 9.4-1202 JDBC 41 driver download 我们推荐你使用 JDBC 4 的驱动. 如果你希望使用更新 ...

  7. 前端图片缓存之通过img标签加载GIF只能播放一次问题(转载)

    最近项目中要求再网页中插入一张gif图片,让用户每次到达该位置时动一次,所以我们就制作了一张只动一次的gif图片通过img标签引入.当用户进入该位置时,通过remove()清除图片然后重新append ...

  8. django中数据库的配置及相关增删改查

    ORM ORM是什么?:(在django中,根据代码中的类自动生成数据库的表也叫--code first) ORM:Object Relational Mapping(关系对象映射) 类名对应---- ...

  9. LeetCode（83）： 删除排序链表中的重复元素

    Easy! 题目描述: 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1-&g ...

  10. go的gin框架从请求中获取参数的方法

    前言: go语言的gin框架go里面比较好的一个web框架, github的start数超过了18000.可见此框架的可信度 如何获取请求中的参数 假如有这么一个请求: POST   /post/te ...