<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

</head>

<body>

<button onclick="downloadExl(jsono)">导出</button>

<script type="text/javascript">

    window.onload=function () {

        var filename = "file.xlsx"; //文件名称

        // data二维数组第一个表示列表名  后边的则是列表名对应的值

        var data = [['列表名1','列表名2','列表名3'],["foo","bar",'hahaha], ["baz", "aaa", "qux"]];  //数据，一定注意需要时二维数组

        var ws_name = "Sheet1"; //Excel第一个sheet的名称

        var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(data);

        XLSX.utils.book_append_sheet(wb, ws, ws_name);  //将数据添加到工作薄

        XLSX.writeFile(wb, filename); //导出Excel

    }

</script>

</body>

完结  2021-03-31  17:53:41

xlsx 前端导出Excel的更多相关文章

  1. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

  2. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  3. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  4. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  5. 踹掉后端，前端导出Excel！

    前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...

  6. 前端导出excel数据-jsonToExcel

    咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...

  7. vue项目，前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  8. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  9. VUE中使用XLSX实现导出excel表格

    简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...

  10. node使用xlsx导入导出excel

    1.安装和引入xlsx 安装  npm install xlsx 引入:let xlsx = require('xlsx');2.读取excel数据function readFile(file) {  ...

随机推荐

  1. CTF学习笔记（三）php部分

    三.常见PHP用法与漏洞 (〇)php的备份文件与phps php的备份文件一般是*.php.bak,在根目录下输入/index.php.bak, 下载 备份文件. phps文件就是php的源代码文件 ...

  2. 下载接口时出现：Try to run this command from the system terminal. Make sure that you use the correct version of 'pip' installed for your Python interpreter located at 'D:\python\demo\venv\Scripts\...的错误

    下载接口时出现:Try to run this command from the system terminal. Make sure that you use the correct version ...

  3. 纷繁复杂的操作系统到底是什么关系从APPLE到Android到Linux等

    各个系统之间的关系 最近接触了很多很多系统,多种多样,纷繁复杂,感觉有点乱想整理以下思路,结果一下笔内容还挺多,不全,就是现在能见到的,梳理一下,站在一个外行的角度写写省的乱,不科学,也不知道是否完全 ...

  4. Log4net使用探究

    第一步: 通过Nuget package 搜索Apache Log4net安装 第二步: 在项目Global.asax文件中添加读取 配置文件 第三步: 编写Loghelper 文件 1 public ...

  5. vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...

  6. 小程序微信支付完整demo，包含退款

    最近刚完成一个商场小程序(http://market.zhenzikj.com/detail/121.html), 使用到了微信支付功能,其中遇到了很多的抗,所以,我把支付这块摘出来,以免大家少走弯路 ...

  7. oracle ebs 加锁

    DECLARE -- lock l_lockname VARCHAR2(100); l_lockhandle VARCHAR2(200); l_lock_output NUMBER; l_locked ...

  8. linux dma

    https://bootlin.com/pub/conferences/2015/elc/ripard-dmaengine/ripard-dmaengine.pdf https://biscuitos ...

  9. ncnn 加载 bin文件时，出错 报异常 0xC0000094：Integer division by zero。

    这次转yolov8.pt 到 onnx 到 ncnn,调用ncnn,加载bin文件时出错报异常 0xC0000094:Integer division by zero. 解决方式: 导出onnx时,加 ...

  10. Scala集合总结

    Scala同时支持可变集合和不可变集合,包含两个包: 可变集合:scala.collection.mutable 不可变集合:scala.collection.immutable Scala默认采用不 ...