Excel的导入导出需要文件xlsx.full.min.js
通过FileReader对象读取文件利用js-xlsx转成json数据
<input type="file" οnchange="importf(this)"/>
<div id="demo"></div>
<script>
/*
FileReader共有4种读取方法:
1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
2.readAsBinaryString(file):将文件读取为二进制字符串
3.readAsDataURL(file):将文件读取为Data URL
4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
*/
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importf(obj) {//导入
if (!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
</script>
<button οnclick="downloadExl(jsono)">导出</button>
<script src="js-xlsx/xlsx.full.min.js"></script>
<!--调用FileSaver saveAs函数可以实现文件下载-->
<!--<script src="http://sheetjs.com/demos/Blob.js"></script>
<script src="http://sheetjs.com/demos/FileSaver.js"></script>-->
<script>
//如果使用 FileSaver.js 就不要同时使用以下函数
function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj); //绑定a标签
tmpa.click(); //模拟点击实现下载
setTimeout(function () { //延时释放
URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
}
var jsono = [{ //测试数据
"保质期临期预警(天)": "adventLifecycle",
"商品标题": "title",
"建议零售价": "defaultPrice",
"高(cm)": "height",
"商品描述": "Description",
"保质期禁售(天)": "lockupLifecycle",
"商品名称": "skuName",
"商品简介": "brief",
"宽(cm)": "width",
"阿达": "asdz",
"货号": "goodsNo",
"商品条码": "skuNo",
"商品品牌": "brand",
"净容积(cm^3)": "netVolume",
"是否保质期管理": "isShelfLifeMgmt",
"是否串号管理": "isSNMgmt",
"商品颜色": "color",
"尺码": "size",
"是否批次管理": "isBatchMgmt",
"商品编号": "skuCode",
"商品简称": "shortName",
"毛重(g)": "grossWeight",
"长(cm)": "length",
"英文名称": "englishName",
"净重(g)": "netWeight",
"商品分类": "categoryId",
"这里超过了": 1111.0,
"保质期(天)": "expDate"
}];
const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//这里的数据是用来定义导出的格式类型
// const wopts = { bookType: 'csv', bookSST: false, type: 'binary' };//ods格式
// const wopts = { bookType: 'ods', bookSST: false, type: 'binary' };//ods格式
// const wopts = { bookType: 'xlsb', bookSST: false, type: 'binary' };//xlsb格式
// const wopts = { bookType: 'fods', bookSST: false, type: 'binary' };//fods格式
// const wopts = { bookType: 'biff2', bookSST: false, type: 'binary' };//xls格式
function downloadExl(data, type) {
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(data);//通过json_to_sheet转成单页(Sheet)数据
saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "这里是下载的文件名" + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
}
function s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
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;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
</script>
</div>
js读取shape文件
使用http://calvinmetcalf.github.io/shapefile-js/文件读取shape
If you are having encoding issues in internet explorer please include this script as well.
Redoing all of this in modern JS. Promises, Typed Arrays, other hipster things, I wouldn't say it's based on RandomEtc's version as much as inspired by it as there is 0 code shared and I really only read the binary ajax part of his (hence why my function has the same name, they are otherwise not related). My sources were:
For use with browserify, [webpack]
(https://webpack.github.io/):
npm install shpjs --save
Or include directly in your webpage from:
https://unpkg.com/shpjs@latest/dist/shp.js
Has a function shp
which accepts a string which is the path the she shapefile minus the extension and returns a promise which resolves into geojson.
//for the shapefiles in the folder called 'files' with the name pandr.shp
shp("files/pandr").then(function(geojson){
//do something with your geojson
});
or you can call it on a .zip file which contains the shapefile
//for the shapefiles in the files folder called pandr.shp
shp("files/pandr.zip").then(function(geojson){
//see bellow for whats here this internally call shp.parseZip()
});
or if you got the zip some other way (like the [File API]
(https://developer.mozilla.org/en-US/docs/Web/API/File)) then with the
arrayBuffer you can call
shp(buffer).then(function(geojson){});
//or
shp.parseZip(buffer)->returns zip
If there is only one shp in the zipefile it returns geojson, if there are multiple then
it will be an array. All of the geojson objects have an extra key fileName
the
value of which is the
name of the shapefile minus the extension (I.E. the part of the name that's the
same for all of them)
You could also load the arraybuffers seperately:
shp.combine([shp.parseShp(shpBuffer, /*optional prj
str*/),shp.parseDbf(dbfBuffer)]);
I used my library catiline to parallelize the demos to do so I changed
<script src='dist/shp.js'> </script>
<script>
shp('files/shapeFile.zip').then(function(data){
//do stuff with data
});
</script>
to
<script src='website/catiline.js'> </script>
<script>
var worker = cw(function(base,cb){
importScripts('dist/shp.js');
shp(base).then(cb);
});
//worker can be called multiple times
worker.data(cw.makeUrl('files/shapeFile.zip')).then(function(data){
//do stuff with data
});
</script>
to send the worker a buffer from the file api you'd do (I'm omitting where you
include the catiline script)
var worker = cw(function(data){
importScripts('../dist/shp.js');
return shp.parseZip(data);
});
worker.data(reader.result,[reader.result]).then(function(data){
//do stuff with data
});
Binary Ajax
parsing the shp
parse the dbf
join em
zip
file api
Some Projections
More Projections
check for geometry validity.
Tests