<!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. HDU 5297

    用x ^ (1 / n) 来求个数,容斥原理 , Num会向后移动, 迭代到不再变化,退出循环 #include<iostream> #include<cstdio> #inc ...

  2. python学习第9-10天，函数。

    函数初识 为什么要使用函数? 函数最重要的目的是方便我们重复使用相同的一段程序. 将一些操作隶属于一个函数,以后你想实现相同的操作的时候,只用调用函数名就可以,而不需要重复敲所有的语句. 函数的定义与 ...

  3. 如何在同一台电脑上使用两个github账户（亲测有效）

    1 前言 由于有两个github账号,要在同一台电脑上同步代码,需要给每一个账号添加一个SSH public key,此时推送时git push origin,不知道是哪个账号的远程仓库名称,所以需要 ...

  4. vue -webpack.dev.config.js模拟后台数据接口

    在const portfinder = require('portfinder')后面添加 const express = require('express') const app = express ...

  5. swift 学习- 19 -- 可选链式调用

    // 可选链式调用 是一种在当前值可能为 nil 的可选值上请求 和 调用属性, 方法以及下标, 如果 可选值有值, 那么调用就会成功, 如果可选值是 nil, 那么就会将返回 nil , // 多个 ...

  6. socket通讯---TcpClient

    IPHostEntry ipe = Dns.GetHostEntry(Dns.GetHostName()); IPAddress ipa = ipe.AddressList[0]; System.Ne ...

  7. Confluence 6 审查日志的对象

    审查日志记录一下事件的信息,这个记录不是详细的信息列表.但是这些信息能够让你了解你能够在日志中看到些什么内容. 空间 创建和删除一个空间. 编辑空间细节,主题,配色方案或者样式表. 修改空间权限,包括 ...

  8. Confluence 6 使用一个主题到站点

    主题被用来在你的 Confluence 站点中应用表现形式.请查看 Working with Themes 页面来查看如何应用你的整个站点和如何添加更多的主题. 希望在站点中应用主题: 进入  > ...

  9. Maven集成SSM

    目录 Maven 集成SSM 添加log4j配置文件 配置web.xml 添加编码过滤器 添加put和delete请求 配置springmvc.xml 配置文件上传 配置druid连接池信息 配置sq ...

  10. Python实操二

    实操一: 1.用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sb name=['alex','wupeiqi','yuanhao'] name=['alex','wupeiqi' ...