‘壹’ 【前端】有如此利器,Excel导出体验就是好
Excel导出是程序开发中的高频需求,尤其是在报表统计中。Excel导出不难实现,其关键在于如何解决数据量大时的性能问题。
相对PHP而言,Java可能在此方面处理得比较好,这也许也是easyExcel如此受欢迎的原因。
那PHP就只能这样?NO、NO、NO!单独不行,还不会请个帮手吗?嗯嗯,这个帮手就是SheetJS。Github地址:https://github.com/SheetJS/js-xlsx
SheetJS是一个由Javascript开发的插件,能进行Excel导出和导入。SheetJS支持CVS、XLS等格式,既可以利用tableDOM(即根据页面table)生成Excel,也可以利用JsonData生成Excel。SheetJS简直是处理Excel的神器,PHP配SheetJS简直如虎添翼。
安装SheetJS有如下几种方式:
1、直接引用js文件
2、使用npm
3、使用bower
SheetJS导出Excel,有以下几种途径:
1、从html标签table生成Excel:table_to_sheet
2、从json数据生成Excel:json_to_sheet
3、从array数组生成Excel:aoa_to_sheet
以上都是我们常用的一些功能,但SheetJS能做的远远不止这些。SheetJS减轻了后端的负担,让Excel处理更加容易,这才是其魅力所在。
‘贰’ 这一定是前端Excel导出的天花板~
前端导出 Excel 的方案有很多,但是能够导出一份专业的 Excel 表格很少,本文将介绍一款导出 Excel 表格界的天花板,能够满足 99.99% 的业务需求,直呼 yyds !
xlsx 是前端最热门的 Excel 导出方案,又叫做 SheetJS ,默认不支持修改 Excel 的样式。
若在工作业务需求上需要修改 Excel 的样式的话需要使用该作者的付费版本。或者使用 xlsx-style ,但使用起来非常麻烦,需要修改 node_moles 源码,而且作者最近的提交的版本也在 6 年前,不建议使用。
exceljs 是一款可导出,可读取的 Excel 操作工具,可以实现样式的修改以及 Excel 的高级功能,是非常值得推荐的一个处理 Excel 的库,而 exceljs 也是本文介绍的主角!
exceljs 同于写入 Excel,file-sever 用于保存到本地文件。
保存文件本地我们还需要 file-saver 的辅助
当你能够写出 第一行 Hello ExcelJS 的时候也就意味着你已经可以上手 exceljs 了。
我们一般把每列的第一个设置为表头,并且可以设置每一列的宽度。
表头设置后,我们可以直接根据 key 值去添加每一行的数据。
getColumn 用于读取当前列的数据,我们可以使用 eachCell 进行遍历单元格。
getRow 用于读取每一样,同样我们可以使用 exchCell 进行遍历单元格
我们将读取到的表头添加一些样式,让 Excel 变得看起来更加的好看。
单元格已经成功的添加上了样式,只不过表格中第一行的所有的单元格都被添加上样式了,当然这肯定不是我们想要的。
这个时候我们可以使用 eachCell 来遍历单元格,给每一个单元格添加上样式。
在很多的时候我们需要对表格中每一列的数据进行筛选,比如直接筛选班级,我们可以通过 autoFilter 来添加筛选。
表格的合并应该是业务需求中最频繁的功能。当然这一功能使用 xlsx 也可以实现,前提是你的项目对表格没有复杂的需求。
我们可以直接对表格中的数据进行公式计算,比如 求和(SUM) , 平均数(AVERAGE) 等等。
有时候我们需要为某个单元格添加数据可以方便直接下拉选择指定的值。
我们可以为指定单元格添加数据验证,比如为不及格的分数添加红色背景。
以上介绍的内容仅仅是 exceljs 的冰山一角,能够满足一些基本的对 Excel 有着美化的业务需求。
在官方的文档里面,还有更多好的用、专业的功能,以及读取表格等非常强大的功能需要你去探索。
ExcelJS 中文文档 https://github.com/exceljs/exceljs/blob/master/README_zh.md
‘叁’ 关于前端如何导出后台传来的excel接口
题主所说的导出指的是让前端去下载后台的Excel还时还要有其他操作呢?
如果单纯去下载,可以基于XMLHttpRequest请求,请求一个服务器或者后端的Excel文件,然后设置responseType为blob二进制流来传输。例如:
var excelFilePath = 'resources/Excel/importExcel.xlsx';
var xhr = new XMLHttpRequest();
xhr.open('GET', excelFilePath, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob = this.response;
}
之后onload里面的blob就是这个Excel文件的二进制流,接下来只要将blob转成文件进行下载就可以了,JS中有很多开源的第三方类库可以做到,例如filesaver。如果是用filesaver的话,调用其中的saveAs方法就可以将该blob转成对应文件进行下载
例如
var fileName = "test.xlsx"
saveAs(blob, fileName);
把上述方法加到onload 方法中,前端就会下载一个名为test.xlsx的Excel文件,内容就是后端传过来的Excel
如果还要有其他操作例如展示或者在线的编辑,就需要一些第三方控件来完成了,比如SpreadJS
上述的方法也是在他们的官方论坛中学到的,参考网址:
网页链接
‘肆’ 前端表格导出转化excel
var xlsxParam = { raw: true }; //转换成excel时,使用原始数据
var wb = XLSX.utils.table_to_book(
document.querySelector("#outTable"),
xlsxParam
);
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
"职代会管理.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
‘伍’ 怎么把html导出到excel表格
把html导出成txt文件,然后再把txt文件导入Excel:
1、首先,打开excel,选择数据选项卡,自文本选项。
2、在弹出的资源管理器界面选择存放好的txt文件后,点击打开按钮。
3、此时弹出文本导入向导,由于我的数字是以空格为分隔字符的,所以我选择分隔符号,当然,如果你的文本是固定宽度,你可以选择第二个。然后点击下一步按钮。
4、勾选空格,检验预览数据是否和自己预想的一致。一致后继续点击下一步按钮。
5、查看预览效果。并选择列数据格式,此处没什么特别要求,建议选择常规,常规也是excel默认的格式。点击完成。
6、在弹出的对话框中,选中要导入的数据区域,此处我要导入到当前单元格,并且从a1单元格开始,因此我选择a1单元格,多余的数据会自动以此单元格向两边张开。点击确定按钮
我们的数据就算是完美的导入进来了。
‘陆’ Vue 纯前端导出Excel
实际开发,遇到要求只在前端进行导出Excel文件的需求,而非调用接口形式。
npm 命令行如下:
也可以使用 cnpm :
如图:
文件资源路径:
按钮使用 :
封装成公共的方法 :
如图:
‘柒’ 前端怎么导出后台生成的excel
导出不是前端能搞定的,比如jsp页面上点击按钮,先要在后台生成数据,然后jsp页面弹出下载窗口,点选路径就保存到本地计算机了。
‘捌’ 如何连接数据库开发一个前端一键导出报表的工具
ActiveXObject的导出方式
方法一ActiveXObject的导出方式
方法三:支持浏览器适配的导出方式(IE+其他浏览器)
方法四:以Table格式导为xls文件
方法五:导出为CSV格式[高效推荐]
现在企业的报表开发大部分都使用报表工具完成,成熟的报表工具提供了丰富的显示设置、图表类型、导出打印等功能可以简化报表开发,非常方便。
‘玖’ vue项目中如何把表格导出excel表格
有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为:
1. 安装依赖
//npm npm install -S file-saver xlsx
npm install -D script-loader
或者
//yarnyarn add file-saver
yarn add xlsx
yarn add script-loader --dev
2.导入两个JS
下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件
image
**3.在main.js引入这两个JS文件 **
import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'
4.在组件中使用
//导出的方法exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序号', '昵称', '姓名'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
tHeader是表头,filterVal 中的数据是表格的字段,tableData中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。
tableData 中的值为:
data () {
return {
tableData: [
{'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "小明"},
{'index':'1',"nickName": "女人天生高贵", "name": "小红"},
{'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"}
]
}
}
最后实现的效果图:
image
如果运行时,报如下所示的错误:
image
这是因为Export2Excel.js的设置需要改下:
image
注: 把require('script-loader!vendor/Blob')改为 require('./Blob.js')
demo 地址:https://github.com/dt8888/exportExcel
‘拾’ asp.net怎样利用ajax将前端数据导出为excel
导出Excel,需要Ajax服务端响应的头为application/x-excel,从而确保浏览器能够以Excel文件进行下载。
你可以把Ajax请求的服务端为httphandler,不要请求Aasp.net页面,以免你在调试的过程中出现问题。