H5将网页数据导出为Excel并可下载

H5将网页数据导出为Excel并可下载

在制作webapp中，遇到个要将数据导出为Excel的问题。我搜索了一下网上的方案，可以直接将HTML的表格导出为Excel文件，这些方法在电脑上确实是可行的，当时如果放到手机上导出的Excel根本不能下载，手机下载文件都是已网络链接的形式，直接导出的文件在手机上是获取不到的。

我搜遍网上的资料都没有发现有讲在手机上将网页数据导出Excel的，于是只能自己去摸索，要想在手机端导出Excel普通的直接导出是没用的，于是可行的方法就是将导出的流数据先上传到服务器再通过服务器的文件链接让手机进行下载。

将数据转换成Excel的流数据
要上传文件到腾讯云的对象存储中就需要先获取到文件的流数据。
这里可以用到一个插件：js-xlsx | https://github.com/SheetJS/js-xlsx

这里示例将json进行转换
var jsono = [
    {
         "五月":"1号",
		 "姓名": "小王",
		 "年龄": "18",
		 "性别":"男",
    },
	{
         "五月":"2号",
		 "姓名": "小明",
		 "年龄": "21",
		 "性别":"男",
    }
];
//传入jsono 进行数据处理
downloadExl(jsono)
var tmpDown; //导出的二进制对象

function downloadExl(json) {
          var tmpdata = json[0];
          json.unshift({});
          var keyMap = [];
          for (var k in tmpdata) {
              keyMap.push(k);
              json[0][k] = k;
          } 
        var tmpdata = [];//用来保存转换好的json 
              json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                  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
              });
              var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
              var 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: ""
              }); //创建二进制对象写入转换好的字节流
}

最后的 tmpDown 就是转换出来的Excel字节流数据
接下来将这个流数据上传到腾讯云的对象存储中就能获得文件的下载链接了

var filename="员工名单.xlsx";//文件名
cos.putObject({  
	Bucket: '',//储存桶名称
	Region: 'ap-guangzhou', //地区
	Key:filename,//文件名
	Body:tmpDown,   //元文件
	onProgress: function(progressData) {
	}, 
}, function(err, data) {
	//拼接上https:// 就是文件的下载链接
	//调用dlsc() 将长链接转成短链接
	dlsc("https://"+data.Location);
	btne.button('reset');
});	

//将链接转成短链接，这里用的是百度的api
function  dlsc(url){
    var dlj =url; 
    var ajax = new XMLHttpRequest();
    var token = "";//百度api token 
	ajax.open('post','https://dwz.cn/admin/v2/create', 'true');
	ajax.setRequestHeader("Content-Type", "application/json");
	ajax.setRequestHeader("Token", token);
	ajax.send(JSON.stringify({  
	    url: url  
	}));
	ajax.onreadystatechange = function () {
	    //返回短链接
	    if (ajax.readyState === 4 && ajax.status === 200) {
			var data=JSON.parse(ajax.responseText);
			dlj=data.ShortUrl;						
			$("#xzlj").text(dlj);						
	    } 
 	}	
}

这是最终返回的Excel下载链接，手机可以直接进行下载 我的手机 https://dwz.cn/USczufF6

小秋AI-智能编程助手：www.xqai.net