尝试手写导出表格数据功能

最新推荐文章于 2023-12-08 17:17:37 发布

前端菜戌鲲

最新推荐文章于 2023-12-08 17:17:37 发布

阅读量112

点赞数

分类专栏：笔记文章标签： html javascript

本文链接：https://blog.csdn.net/boombutton/article/details/119915146

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a target="_blank">点击下载</a>
  <table border="1" cellspacing="0" width="900">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
        <th>表头5</th>
        <th>表头6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>第一行1</td>
        <td>第一行2</td>
        <td>第一行3</td>
        <td>第一行4</td>
        <td>第一行5</td>
        <td>第一行6</td>
      </tr>
      <tr>
        <td>第二行1</td>
        <td>第二行2</td>
        <td>第二行3</td>
        <td>第二行4</td>
        <td>第二行5</td>
        <td>第二行6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
<script>
  let template = `<table border="1" cellspacing="0">
                    <thead>
                      <tr>
                        <th>表头1</th>
                        <th>表头2</th>
                        <th>表头3</th>
                        <th>表头4</th>
                        <th>表头5</th>
                        <th>表头6</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>第一行1</td>
                        <td>第一行2</td>
                        <td>第一行3</td>
                        <td>第一行4</td>
                        <td>第一行5</td>
                        <td>第一行6</td>
                      </tr>
                      <tr>
                        <td>第二行1</td>
                        <td>第二行2</td>
                        <td>第二行3</td>
                        <td>第二行4</td>
                        <td>第二行5</td>
                        <td>第二行6</td>
                      </tr>
                    </tbody>
                  </table>`
  var excelBlob = new Blob([template], {type: 'application/vnd.ms-excel'})
  var a = document.querySelector('a')
  a.href = URL.createObjectURL(excelBlob);
  a.download = '学生名单.xls';
</script>

在这里插入图片描述
下载后打开是这样的, 还在摸索中

在这里插入图片描述

前端菜戌鲲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尝试手写导出表格数据功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫