A. 在vue中，实现纯前端读取和展示excel文件
本项目使用vue Element
使用的插件：XLSX
需要在项目猛春孝中安装依赖 npm install XLSX
excel表格要枝稿放在src/森亩static目录下
B. 如何上传Excel直接读取里面的数据,不用保存excel文件后再读取
最近一段时间，维护一个旧系统，其中有一个功能，是把Excel上传，并读取数据进行维护，然后转插入至SQL数据库中。
下面Insus.NET使用asp.net 标准上传控件:
<asp:FileUpload ID="FileUpload1" runat="server" />
Insus.NET习惯性，在每一个专案中，都会创建一个临时目录。
因为很多时候，我们处理一些临时文件，或是数据均可在此临时目录中进行。它有点像Windows下的临时目录一样。
上面代码示例中，先是获取上传的文件名，此包含有路径；
接下来还在知道上传的扩展名；
第三行代码是使用Guid类的方法NewGuid()与扩展名组合一个新的文件名。
第四行代码创建上传文件的目标路径。
最后是保存。
下面是读取Excel的数据，并绑定至Gridview控件：
上面代码示例中的#80行代码，可以参考《Asp.net读取Excel文件 2》http://www.cnblogs.com/insus/archive/2011/05/05/2037808.html
C. vue读取excel内容屏蔽空行
EXCEL快速删除中间的空白行的操作方法如下：
一、材料/工具 excel 二、方法步骤
1、第一步：我们按Ctrl+g出现定位界面，选择空值，然后点迹塌击定位。
2、第二步：然后电脑就会自动帮我们选择简改空行了！
3、第三步：右击选中的区域点击删除。
4、第四步：然后选择下方单元格上移，点击确定！
5、第五步：于是没用的空行就姿咐圆被删除了。
D. VUE中使用vue-json-excel超级方便导出excel表格数据
一、安装vue-json-excel
npm install vue-json-excel -S
二、main.js里面引入并注册使用
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三、页面中使用
<download-excel
class = "export-excel-wrapper"
:data = "json_data"
:fields = "json_fields"
name = "filename.xls">
<!-- 上哗腊贺面可以自定义自己的样式，还可以引用其他组件button -->
<!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
</download-excel>
在这里说明一下组件的各个属性
json_data：需要导出的数据
json_fields：自主选择要导出的字乱派段，若不指定，默认导出全部数据中心局并全部字段
E. vue 导入xlsx
npm install xlsx --s
handlePreview(file) {
// console.log(file);
this.importfile(file.raw)
this.fileList = []
},
importfile (obj) {
const _this = this
const reader = new FileReader()
reader.readAsArrayBuffer(obj)//需要传blob类型
reader.onload = function () {
const buffer = reader.result
const bytes = new Uint8Array(buffer)
const length = bytes.byteLength
let binary = ''
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
好冲 }
const XLSX = require('xlsx')//引用
const wb = XLSX.read(binary, {
type: 'binary'
})
let tableList = ['业务类型','用户订单号','快递单号']
for( let i = 0; i<tableList.length; i++ ) {
if ( wb.Strings[i].t != tableList[i] ) {
_this.$message.error('格式错误，请重新上传');
return false
}
}
const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// console.log(outdata) // 此为取到的excel中内容，然后就可以自己改数据，画页面啦~
_this.allVisible = 塌袜侍true
let dataStr = []
for ( let i = 0; i<outdata.length; i++ ) {
dataStr.push({
团吵expressName: outdata[i].业务类型 == undefined ? '':outdata[i].业务类型,
expressNumber: outdata[i].用户订单号 == undefined ? '':outdata[i].用户订单号,
orderId: outdata[i].快递单号 == undefined ? '':outdata[i].快递单号.toString(),
});
}
_this.allTableData = dataStr
}
},
F. 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
G. vue项目实现导入/导出Excel
首先安装依赖包
前端通过字节流或者url实现导出，字节流方式导出的文件方式可让磨敏以通过前端实现文件游缺名称的修改，url导出方式则不能修改导坦枝出的文件名（文件名由后端提供）。
H. vue实战(15)——基于Element上传Excel读取内容
大多数管理后台很多情况会有批量上传数据的业务，用的最多的要数Excel上传，根据不同的业务场景有两种上传方式：
I. Vue + SpringBoot 上传 Excel 文件
Step2： 引用组件，指定上传方法
这里对 axios 做了封装含斗老，可以直接调谈升用 api 中对应的方法：
Controller 层接收请求：
Service 层处理 Excel 文件，取出数据做销正相应的业务处理。
到此，Vue 上传文件到后端完成，效果如下：