要相信，所有的不美好都是为了迎接美好，所有的困难都会为努力让道。
本次博客又要用到前端对Excel的处理了(使用sheetjs)，先来回顾一下之前的文章：
前端常用的【文件下载操作1】前端配合后端进行文件下载==＞根据url下载 ==＞根据blob下载_小白Rachel的博客-CSDN博客_vue下载后端文件
【Vue项目实践】实现在线预览word文件、excel文件_小白Rachel的博客-CSDN博客_vue word预览
前端常用的【文件下载操作2】不获取后端文件流 【纯前端】实现：el-table表格下载为Excel文件【sheetJS XLSX】_小白Rachel的博客-CSDN博客
本篇知识其实更简单：使用前端代码生成需要格式的Excel文件==>导入满足条件的excel文件，前端解析出需要的字段
效果展示：
目录
一、页面样式代码（可跳过）
<div class="divContent">
<el-row style="display: flex">
<el-button
class="importBtn importBtn2"
plain
@click="downloadMode()"
style="margin-right: 10px"
>下载申请信息模板</el-button
>
<el-upload
class="upload-demo"
action="/"
:on-change="getExcel"
:auto-upload="false"
:show-file-list="false"
style="width: 140px"
>
<el-button class="importBtn" plain>导入授权申请信息</el-button>
</el-upload>
</el-row>
<el-form
:model="form"
ref="form"
:inline="true"
v-if="show > 0"
:rules="rules"
>
<el-row>
<el-col>
<el-form-item label="主机编码" prop="hostCode">
<el-input
v-model="form.hostCode"
placeholder="请输入主机编码"
clearable
size="small"
style="width: 810px"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6"
><el-form-item label="授权点数" prop="points">
<el-input
v-model="form.points"
placeholder="请输入授权点数"
clearable
size="small"
style="width: 180px"
disabled
/> </el-form-item
></el-col>
<el-col :span="6"
><el-form-item label="版本号" prop="version">
<el-input
v-model="form.version"
placeholder="请输入版本号"
clearable
size="small"
style="width: 180px"
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="6"
><el-form-item label="授权时间" prop="startTime">
<el-date-picker
v-model="form.startTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择授权时间"
style="width: 180px"
:picker-options="pickerOptions"
>
</el-date-picker> </el-form-item
></el-col>
<el-col :span="6">
<el-form-item label="涉密标识" prop="smFlag">
<el-select
v-model="form.smFlag"
placeholder="请选择"
style="width: 180px"
size="small"
>
<el-option
v-for="item in smFlagOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
核心解释：
两个按钮 + 一个form表单
【下载申请信息模板】按钮 绑定downloadMode() 实现生成模板下载
【导入授权申请信息】按钮 使用el-upload 绑定getExcel 实现解析excel数据
二、引用sheetjs
（1）安装 npm install --save xlsx
npm install --save xlsx（2）引入 import XLSX from "xlsx";
import XLSX from "xlsx";三、代码生成excel
// 下载申请信息模板
downloadMode() {
// 第一个sheet工作簿，如果需要创建多个，对应let多个sheetXdata即可
let sheet1data = [
{
部门编码: "",
版本号: "",
涉密标识: "涉密/非密/无(填其一)", // 对应sheet表格中的列
},
];
// let sheet2data = []; // 第二个sheet工作簿
// 转换sheet格式
var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
// var sheet2 = XLSX.utils.json_to_sheet(sheet2data); // 需要将每个sheet添加该步操作
// 创建一个新的空的workbook
var wb = XLSX.utils.book_new();
// 为每一个工作簿设置名称并添加到workbook（excel表）中
XLSX.utils.book_append_sheet(wb, sheet1, "部门授权模板");
// XLSX.utils.book_append_sheet(wb, sheet2, "部门所属信息");
const workbookBlob = workbook2blob(wb); // 辅助函数workbook2blob
// 下载文档并添加文件名称
openDownloadDialog(workbookBlob, "部门授权模板.xls"); // 辅助函数openDownloadDialog
},用到的辅助函数 workbook2blob openDownloadDialog 可以放在通用文件中，每次使用时直接引用即可。
import { workbook2blob, openDownloadDialog, file2Xce } from "@/utils/exceldown";至此，可以完成按照要求下载模板。关于字段等可以按照自己的需求修改。
四、上传excel解析字段
需求：需要解析出：【部门编码】【版本号】【涉密标识】这三个字段
// 解析excel
getExcel(file) {
const types = file.name.split(".")[1]; // 获取文件后缀类型
const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
(item) => item === types
);
if (!fileType) {
this.$message("格式错误！请重新选择");
return;
}
file2Xce(file).then((tabJson) => { // 辅助函数 file2Xce
if (tabJson && tabJson.length > 0) {
//成功解析出数据
this.xlsxJson = tabJson;
console.log("打印一 this.xlsxJson[0]", this.xlsxJson[0]); // 整个文档数据
console.log(
"打印二 this.xlsxJson[0].sheet[0]",
this.xlsxJson[0].sheet[0]
); // 获取第一个工作簿数据
// 数据展示
const data = this.xlsxJson[0].sheet[0];
console.log("打印三 机器编码", data.机器编码);
if (!data.部门编码) {
this.$message.warning("未获取部门编码");
}
this.form = {
hostCode: data.部门编码,
version: data.版本号,
smFlag:
data.涉密标识 == "涉密"
? "1"
: data.涉密标识 == "非密"
? "2"
: "3",
};
}
// 解析完成之后展示信息
this.importApply();
this.getNowTime();
});
},
// 解析后展示form表单信息
importApply() {
this.show = 1;
},对应的打印效果如下：
this.xlsxJson = tabJson;之后
this.xlsxJson[0] 表示第一个工作簿，当然，如果有多个工作簿，可以通过遍历获取每个工作簿的数据
this.xlsxJson[0].sheet[0] 表示第一个工作簿的第一行。当然，如果有多行数据，可以通过遍历获取每行数据
直接使用data.机器编码 可以获取到机器编码的具体值
再按照我们需要的效果拼接form表单展示即可。
1. （扩展）多个机器编码获取后去重
this.xlsxJson[0].sheet有多行
// 判断是否有多个机器编码
var code = [];
if (this.xlsxJson[0].sheet.length > 1) {
this.xlsxJson[0].sheet.forEach((e) => {
code.push(e.机器编码);
});
}
// 数组去重
console.log("打印三 数组去重前", code.join(","));
code = this.arrLetout(code); // 辅助函数数组去重
console.log("打印三 数组去重后", code);
// arrLetout(arr) {
// let set = new Set(arr);
// //通过Array.from()方法将 set 转化为数组 并赋给新数组
// let newArr = Array.from(set);
// return newArr;
// },上传的表格数据如下：
代码打印效果如下：
可以看到 this.xlsxJson[0].sheet 有三行数据，遍历即可获取每一行表格信息
至此，完成了两种形式的上传
附：3个辅助函数
// exceldown.js
import XLSX from "xlsx";
// 生成excel的配置
export function workbook2blob(workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: "xlsx",
// // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: "binary"
};
var wbout = XLSX.write(workbook, wopts);
// 将字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
let buf = s2ab(wbout);
var blob = new Blob([buf], {
type: "application/octet-stream"
});
return blob;
}
// 将blob对象 创建bloburl,然后用a标签实现弹出下载框
export function openDownloadDialog(blob, fileName) {
if (typeof blob === "object" && blob instanceof Blob) {
blob = URL.createObjectURL(blob); // 创建blob地址
}
var aLink = document.createElement("a");
aLink.href = blob;
// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
aLink.download = fileName || "";
var event;
if (window.MouseEvent) event = new MouseEvent("click");
// 移动端
else {
event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
}
aLink.dispatchEvent(event);
}
//解析excel
export function file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
this.wb = XLSX.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
console.log(sheetName);
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
});
});
resolve(result);
};
reader.readAsBinaryString(file.raw);
// reader.readAsBinaryString(file) // 传统input方法
});
}
8779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
