<!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 Rand小结

    对于Random的使用,在业务中使用频率是非常高的,本文就小结下常用的方法: 在Golang中,有两个包提供了rand,分别为 "math/rand" 和 "crypto ...

  2. STM32F1-GPIO的操作

    GPIO 即通用输入输出口.凡事都要熟悉,熟能生巧.一定要掌握MDK软件的工程操作方法. 对于GPIO的操作. Project里面要有以下几个文件夹(开发之前需要包含相应的库文件,这里默认已经包含) ...

  3. mybatis：自动分页插件

    项目地址:https://github.com/pagehelper/pagehelper-spring-boot 简单使用: 1.在pom文件中添加 <dependency> <g ...

  4. 51nod--1212 最小生成树

    题目: 1212 无向图最小生成树 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Inpu ...

  5. 前端 ---- jQuery的ajax

    14-jQuery的ajax   什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下, ...

  6. Ex4_21 最短路径算法可以应用于货币交易领域..._第十二次作业

    (a)   建立一个有向图G(V,E),每个顶点表示一种货币,两个顶点之间的边权的大小ex[u][v]表示两种货币之间的汇率,若要找一个最有利的兑换序列,把货币s兑换成货币t,即在若干种兑换序列中选择 ...

  7. linux学习之netstat

    netstat -anp netstat -anp -a 表示展示所有 -p 展示进程和名称 -n --numeric don't resolve names

  8. kernel_size

    kernel_size=(1,3)[flag] if flag==True:kernel_size=3 else: kernel_size=1

  9. 整合Flask中的目录结构

    一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...

  10. centos7.5上一步步部署jumpserver

    1.基础环境:centos7.5:关闭防火墙和selinux 2.修改字符集,否则可能会报input/output error 的问题,因为日志里打印了中文 [root@xzw ~]# localed ...