JS实现下载xlsx格式文件--js-xlsx

来源:互联网 发布:java字符串去掉双引号 编辑:程序博客网 时间:2024/05/17 06:38

之前写过关于JS上传xlsx文件,这回是关于下载的。用的技术还是js-xlsx,blob。

部分内容转至纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例

关于js-xlsx的下载,请参考救急,非IE浏览器实现Javascript对文件上传与下载操作

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><button onclick="downloadExl(jsono)">导出</button><!--            以下a标签不需要内容        --><a href="" download="这里是下载的文件名.xlsx" id="hf"></a><script type="text/javascript" src="js/jszip.js"></script><script type="text/javascript" src="js/xlsx.js"></script><script>var jsono = [{ //测试数据"保质期临期预警(天)": "保质期临期预警(天)","商品标题": "商品标题","建议零售价": "建议零售价","高(cm)": "高(cm)","商品描述": "商品描述","保质期禁售(天)": "保质期禁售(天)","商品名称": "商品名称","商品简介": "商品简介","宽(cm)": "宽(cm)","阿达": "阿达","货号": "货号","商品条码": "商品条码","商品品牌": "商品品牌","净容积(cm^3)": "净容积(cm^3)","是否保质期管理": "是否保质期管理","是否串号管理": "是否串号管理","商品颜色": "商品颜色","尺码": "尺码","是否批次管理": "是否批次管理","商品编号": "商品编号","商品简称": "商品简称","毛重(g)": "毛重(g)","长(cm)": "长(cm)","英文名称": "英文名称","净重(g)": "净重(g)","商品分类": "商品分类","这里超过了": "这里超过了","保质期(天)": "保质期(天)"}, {"保质期临期预警(天)": "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"}];function downloadExl(json, type) {var tmpDown; //导出的二进制对象var keyMap = []; //获取键for(k in json[0]) {keyMap.push(k);}var tmpdata = []; //用来保存转换好的json json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {  //运用ES6内容v: v[k],position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {v: v.v});//json.map(function(v, i) {  //运用ES5内容//return keyMap.map(function(k, j) {//return Object.assign({}, {//v: v[k],//position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)//});//});//}).reduce(function(prev, next) {//return prev.concat(next);//}).forEach(function(v, i) {//tmpdata[v.position] = {//v: v.v//}//});var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10var tmpWB = {SheetNames: ['mySheet'], //保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, //内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域})}};tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {bookType: (type == undefined ? 'xlsx' : type),bookSST: false,type: 'binary'} //这里的数据是用来定义导出的格式类型))], {type: ""}); //创建二进制对象写入转换好的字节流var href = URL.createObjectURL(tmpDown); //创建对象超链接document.getElementById("hf").href = href; //绑定a标签document.getElementById("hf").click(); //模拟点击实现下载setTimeout(function() { //延时释放URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL}, 100);}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;}// 将指定的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。function getCharCol(n) {let temCol = '',s = '',m = 0while(n > 0) {m = n % 26 + 1s = String.fromCharCode(m + 64) + sn = (n - m) / 26}return s}</script></body></html>