// 导出excel文件
/**
* 依赖: import XLSX from 'xlsx'
*/
let obj = {
'学生信息表': [
['姓名', '性别', '年龄', '分数'],
['张三', '男', 18, parseInt(Math.random() * 100)],
['李四', '女', 22, parseInt(Math.random() * 100)]
],
'教师信息表': [
['姓名', '性别', '年龄', '教龄'],
['王五', '男', 18, parseInt(Math.random() * 10), new Date()],
['牛六', '女', 22, parseInt(Math.random() * 10)]
]
}
let arr = [
['姓名', '性别', '年龄', '教龄'],
['王五', '男', 18, parseInt(Math.random() * 10)],
['牛六', '女', 22, parseInt(Math.random() * 10)]
]
this.downloadXlsx(obj, 'result', '信息表')
downloadXlsx (data, fileName, sheetName) {
fileName = (fileName || 'fileName') + '.xlsx'
sheetName = sheetName || 'sheet1'
download(data2blob(data, sheetName), fileName)
this.readWorkbookFromLocalFile(sheet2blob(data, sheetName), res => {
console.log(res)
})
// 下载excel文件
function download (url, fileName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url) // 创建blob地址
}
let element = document.createElement('a')
element.href = url
element.download = fileName // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
element.style.display = 'none'
element.click()
}
// 利用xlsx提供的方法将对象转成blob
function data2blob (data, sheetName) {
let workbook = {
SheetNames: [],
Sheets: {}
}
if (data instanceof Array) {
workbook.SheetNames = [sheetName]
workbook.Sheets[sheetName] = XLSX.utils.aoa_to_sheet(data)
} else if (data instanceof Object) {
for (const key in data) {
if (data.hasOwnProperty(key)) {
const arr = data[key]
if (arr instanceof Array) {
workbook.SheetNames.push(key)
workbook.Sheets[key] = XLSX.utils.aoa_to_sheet(arr)
} else throw new Error('数据格式不正确')
}
}
}
// 生成excel的配置项
let wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
}
let wbout = XLSX.write(workbook, wopts)
let blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" })
// 字符串转ArrayBuffer
function s2ab (s) {
let buf = new ArrayBuffer(s.length)
let view = new Uint8Array(buf)
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
return buf
}
return blob
}
}

将数据保存到excel文件(纯前端实现)的更多相关文章

  1. Sql数据保存到Excel文件中

    public string ExportExcel( DataSet ds,string saveFileName) { try { if (ds == null) return "数据库为 ...

  2. 利用PHPExcel实现数据保存到excel文件

    include(dirname(__FILE__) .'/phpexcel-1.7.7/Classes/PHPExcel.php'); include(dirname(__FILE__) .'/php ...

  3. c# 将datatable中的数据保存到excel文件中

    using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...

  4. 关于爬取数据保存到json文件,中文是unicode解决方式

    流程: 爬取的数据处理为列表,包含字典.里面包含中文, 经过json.dumps,保存到json文件中, 发现里面的中文显示未\ue768这样子 查阅资料发现,json.dumps 有一个参数.ens ...

  5. 使用scrapy爬取的数据保存到CSV文件中,不使用命令

    pipelines.py文件中 import codecs import csv # 保存到CSV文件中 class CsvPipeline(object): def __init__(self): ...

  6. python爬取数据保存到Excel中

    # -*- conding:utf-8 -*- # 1.两页的内容 # 2.抓取每页title和URL # 3.根据title创建文件,发送URL请求,提取数据 import requests fro ...

  7. ruby将mysql查询到的数据保存到excel

    require "win32ole" require 'pathname' require 'mysql2' excel = WIN32OLE.new('excel.applica ...

  8. 保存到Excel文件中

    OLEObject ole_object , ole_workbooks ole_object = CREATE OLEObjectIF ole_object.ConnectToNewObject(& ...

  9. jmeter 非GUI执行测试,没有响应数据保存到jtl文件办法

    估计是jmeter为了减轻客户机负担,就没又默认把这些信息保存,如果想要保存,也可以,需要做出如下配置: 修改bin目录下的user.properties文件,追加配置: jmeter.save.sa ...

随机推荐

  1. QT-可拖拽可编辑的多控件ListView

    目标 结合前面的2篇文章, 继续升级QML版本的ListView: 又要拖拽, 又要可编辑, 还得支持多个控件. 循序渐进 本文基于前一篇的基础: Qt-可编辑的ListView 要循序渐进的学习. ...

  2. 15 道超经典大厂 Java 面试题!重中之重

    从超高频的后端面试题出发,指明学习方向 大家好,我是鱼皮. 还记得我的老弟小阿巴么?他目前正值大一暑假,在家自学编程(刷短视频)中. 他整个大一期间基本都在学习前端.后来,我带他写了一次后端,结果就崩 ...

  3. JS的FileSaver在Chrome上保存失败

    在使用JavaSript的FileSaver保存文件时,IE11上好的,chrome上反没响应,不能保存文件.寻找了半天,最好发现是因为在FileSaver之外还有一个自定义的全局URL变量,把这个U ...

  4. 自己动手实现Lua--实现TAILCALL指令

    最近在看<自己动手实现Lua-虚拟机.编译器和标准库>.这是本挺不错的书,通过学习此书能够对Lua语言有比较深刻的理解,此外还可以对如何自己实现一门脚本语言有直观的认识.对于想学习Lua的 ...

  5. MySQL-06-DQL语句

    DQL sql文件下载链接: https://alnk-blog-pictures.oss-cn-shenzhen.aliyuncs.com/blog-pictures/world.sql selec ...

  6. Azure Bicep 开发利器

    Bicep 是一种用于声明式部署Azure资源的领域特定语言.它的目标是通过更清晰的语法.改进的类型安全性.以及对模块化和代码重用的更好支持,彻底简化编写体验. Bicep 其实是对 ARM 模板的透 ...

  7. 北航OO第四单元——UML图解析

    北航OO第四单元--UML图解析 作业要求简析 刚接触本次作业可能需要花上一会才能搞清楚到底是要我们写个啥,在这里简单说一下: UML图的保存格式.mdj文件是以json文件的形式存储的,将每一个Um ...

  8. SQL注入:sqli-labs:5~6 double injection(Query)

    第五题: http://127.0.0.1/sqli/Less-5/?id=1 显示:You are in--.后面发现,不管是1,2,3,4都死显示Your are in --,不打紧,继续看看 h ...

  9. Git在IDEA中的日常使用

    1.Git介绍Git对于做开发的小伙伴并不陌生,Git是现在比较流行的版本控制工具.Git的仓库分为本地仓库和远程仓库,当代码开发完成后,先提交(commit)到本地仓库,再推送(push)到远程仓库 ...

  10. 微信小程序全局数据globalData的使用问题

    如果在A页面设置全局属性,但在B页面无法使用的话,可能是这个问题: app.js globalData: { helpPage:0, }, A页面 A(e) { getApp().globalData ...