思路用前端页面提交数据 用node进行写入
数据的过滤逻辑在index.html中完成 node只进行写入操作
文件目录如下
需要现在根目录下启动index.js
node index.js
默认端口号是8081
前端页面显示如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=Chrome">
<title>Document</title>
<style>
img {
width: 50px;
height: 50px;
}
input[type='file'] {
display: none;
}
</style>
</head>
<body>
<h2>转换后的文件保存在transform目录中</h2>
<h4>需要在json()和 xlsx()方法中把data过滤成自己需要的方式</h2>
<label for="jsonFile">
editJson <img src="file.gif" alt="">
</label>
<input type="file" id="jsonFile" multiple accept="application/json">
<br>
<br>
<label for="xlsxFile">
xlsxToJson <img src="file.gif" alt="">
</label>
<input type="file" id="xlsxFile" multiple accept="application/vnd.ms-excel">
</body>
<script src="shim.min.js"></script>
<script src="xlsx.full.min.js"></script>
<script>
jsonFile.onchange = jsonFileChanged;
xlsxFile.onchange = xlsxFileChanged;
function xlsxFileChanged() {
if (this.files.length > 0) {
let fileData = {};
let reader = fileReader(this.files, readAs = 'readAsBinaryString', fileData);
reader.onload = function (e) {
fileData.data = xlsx(e.target.result);
request('/generateJson', 'POST', fileData);
}
}
}
function jsonFileChanged() {
if (this.files.length > 0) {
let fileData = {};
let reader = fileReader(this.files, readAs = 'readAsText', fileData);
reader.onload = function (e) {
fileData.data = json(e.target.result);
request('/generateJson', 'POST', fileData);
}
}
}
function fileReader(files, readAs = 'readAsText', res = {}) {
let reader = new FileReader();
Object.keys(files).forEach((key, i) => {
setTimeout(() => {
let name = files[key].name;
if (/\.json$/.test(name)) {
name = name.replace(/\.json$/, '');
}
if (/\.xls$/.test(name)) {
name = name.replace(/\.xls$/, '');
}
res.filename = name;
reader[readAs](files[key]);
}, 50 * i);
})
return reader;
}
function xlsx(data) {
let ws = XLSX.read(data, { type: "binary" });
let d = {};
for (key in ws.Sheets) {
let xd = XLSX.utils.sheet_to_json(ws.Sheets[key]);
if (xd.length > 0) d[key] = xd;
}
//
// let keymap = {
// '数据设置':'d',
// __EMPTY: 'name',
// __EMPTY_1: "type",
// __EMPTY_2: "isReadable",
// __EMPTY_3: "reference",
// __EMPTY_4: "byte",
// __EMPTY_5: "bit",
// __EMPTY_6: "model",
// __EMPTY_7: "base",
// __EMPTY_8: "coefficient",
// }
//TODO
let res = {}
for (let key in d) {
res[key] = [];
d[key].forEach((ele, i) => {
let row = {
d: ele['数据设置'],
name: ele['__EMPTY'],
type: ele['__EMPTY_1'],
isReadable: ele['__EMPTY_2'],
};
if(ele['__EMPTY_3']) row.reference = ele['__EMPTY_3'];
if(ele['__EMPTY_4']) row.byte = ele['__EMPTY_4'];
if(ele['__EMPTY_5']) row.bit = ele['__EMPTY_5'];
if(ele['__EMPTY_6']) row.model = ele['__EMPTY_6'];
if(ele['__EMPTY_7']) row.base = ele['__EMPTY_7'];
if(ele['__EMPTY_8']) row.coefficient = ele['__EMPTY_8'];
res[key].push(row);
});
}
return res;
// return d;
}
function json(data) {
data = JSON.parse(data);
//TODO
if (data['d']) {
data["d"].forEach(ele => {
if (ele.p.tag) {
let tag = ele.p.tag.split('-');
let gas = tag[1].split('/');
let formatData = '';
gas.forEach((g, i) => {
formatData += tag[0] + '区' + gas[i] + '传感器' + tag[2] + '数据->' + gas[i] + ','
});
formatData = formatData.substring(0, formatData.length - 1);
if (ele.a) {
ele.a.bindData = formatData;
} else {
ele.a = {
"bindData": formatData
};
}
}
});
}
return data;
}
function request(url, method = 'GET', data) {
fetch(url, {
headers: {
'Content-Type': 'application/json'
},
method: method,
body: JSON.stringify(data)
}).then(response => {
console.log('response')
})
}
</script>
</html>
index.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const GenerateJsonFile =require('./src/generateJsonFile/generateJsonFile.js');
let genJsonFile = new GenerateJsonFile();
app.use(bodyParser.json({limit: '50mb'}));
app.use( bodyParser.urlencoded({ limit: '50mb', extended: true }));
// 创建 application/x-www-form-urlencoded 编码解析
app.use(express.static('public'));
app.get('/', function (req, res) {
console.log(__dirname)
res.sendFile( __dirname + "/" + "index.html" );
});
app.post('/generateJson',function (req, res) {
genJsonFile.writeFile(req.body.data, req.body.filename);
res.send({state: "success"})
});
let port = 8081;
if(process.argv.length >2){
for(let i = 2; i < process.argv.length -1; i++){
if(process.argv[i] === '-p' ){
if(typeof (process.argv[i+ 1] - 0 ) === 'number') port = process.argv[i+ 1];
else throw new Error('port error');
}
}
}
var server = app.listen(port, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
});
generateJsonFile.js
const fs = require('fs');
class GenerateJsonFile {
constructor(path, filename, options={ endcoding: 'utf-8' }) {
this.path = path;
this.options = options;
this.filename = filename;
}
// readFile(path=this.path, filename=this.filename) {
// fs.readFile(path, (err, res) => {
// if (err) {
// throw new Error(err);
// }
// let data = JSON.parse(res.toString());
// data["d"].forEach(ele => {
// if (ele.p.tag) {
// let tag = ele.p.tag.split('-');
// let gas = tag[1].split('/');
// let formatData = '';
// gas.forEach((g, i) => {
// formatData += tag[0] + '区' + gas[i] + '传感器' + tag[2] + '数据->' + gas[i] + ','
// });
// formatData = formatData.substring(0, formatData.length - 1);
// if (ele.a) {
// ele.a.bindData = formatData;
// } else {
// ele.a = {
// "bindData": formatData
// };
// }
// }
// });
// this.writeFile(data, filename);
// });
// }
writeFile(data, filename=this.filename, format="json") {
data = JSON.stringify(data)
fs.writeFile(`./transform/${filename}.${format}`, data, this.options, callback);
function callback(err) {
if (err) {
throw new Error(err);
}
console.log(`${filename}.${format} write successed`);
}
}
}
module.exports = GenerateJsonFile;