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到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: ""}); //创建二进制对象写入转换好的字节流
}

最后的 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


高效率的聚合搜索:www.xiaoqiuss.cn

H5将网页数据导出为Excel并可下载相关推荐

  1. html5怎么导出表格,《网页 导出到 excel表格数据》 如何将网页表格导出到excel

    如何将网页数据输出为Excel或Word文件 1.保页 在浏览器中访标网页,执行菜单"文件"→"另",文件类型"网页,全部". 2.用WPS ...

  2. python 批量查询网页导出结果_python导出网页数据到excel表格-如何使用python将大量数据导出到Excel中的小技巧...

    如何用python把返回的html提取相应的内容到excel 下载扩展库 xlrd 读excle xlwt 写excle 直百度上搜就能下载 下载后使用 import xlrd 就读excle了 打开 ...

  3. 如何将网页内容保存到计算机中,如何将网站导出excel表格数据-如何把网页数据保存到EXCEL...

    网页上的表格数据怎么复制到excel 1.打开excel表格. 2.打开菜单"数据->"导入外部数据"->"新建 Web 查询",在&qu ...

  4. 百度指数常见php框架,怎么导出数据到excel表格-如何将百度指数数据导出到Excel表格...

    如何将百度指数数据导出到Excel表格 第一步:打开CAD.CAD命令行输入"Li"."选择对象"选需要提取坐标的多段线.回车. 第二步:将CAD文本框中的数据 ...

  5. php怎么将表格导出到excel表格,php怎么将excel表格数据-php 怎么把数据导出到excel表格...

    如何使用php实现将数据从excel表导入到mysql中? /** * @param array $data //二维数组 不是对象 * @param string $filename //导件 */ ...

  6. 查询php 输出表格,php输出excel表格数据-PHP如何将查询出来的数据导出成excel表格(最好做......

    PHP如何将查询出来的数据导出成excel表格(最好做... php 把数据导出excel表格有多种方法,使用 phpExcel 等,以下代码接通过 header 生成 excel 文件的代码示例: ...

  7. php 输入表格数据,怎样将导出数据输入Excel 表格-php 怎么把数据导出到excel表格...

    如何将word文档中的数据导入到excel表格中 方法如下: 1.首先,打开媒介工具"记事本",将word文件里需要导入的数据,复制粘贴到记事本当中,然后保存成为txt文件,本例中 ...

  8. 关于数据导出成excel表

    关于数据导出成excel表 咱们这里分享简单导出成excel表和筛选导出excel表,希望对各位有帮助,欢迎大家交流和点赞!!!! 我在这里使用的是一个导出工具类,如下: package cn.ms. ...

  9. 表格导出计算机,电脑怎么导出excel表格数据-如何将百度指数数据导出到Excel表格...

    系统没有导出功能,电脑表格里的数据有什么方法拿... 将网页表格数据导入到Excel中的方法: 第一步,将包括所需表格的网页打开,并按CTRL C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行 ...

最新文章

  1. js、PHP将分数字符串转换为小数
  2. mysql 操作审计_【MySQL】MySQL审计操作记录
  3. java 注册忘记密码操作_Java实战项目(1):swing图书管理系统的登录,注册,找回密码,增删查,个人解析等...
  4. 字符串移位:如“abcdefghi”右移2位后变成“cdefghiab”
  5. wxWidgets:wxGridEditorCreatedEvent类用法
  6. 汽车穿越沙漠的算法问题(反推法)
  7. 组合数学--约瑟夫环问题 Josephus
  8. 在传统行业做数字化转型之最终篇
  9. Android Sdk 国内镜像下载地址
  10. 解决Error: ENOENT: no such file or directory, scandir ‘xxx\node-sass\vendor‘
  11. 最强人工智能 OpenAI 极简教程
  12. 稳压二极管原理及使用
  13. 计算机信息安全专业代码0839,全国网络空间安全学科专业分布
  14. 精简ttf,svg字体库文件,删除多余字体,保留用到字体
  15. 如何把汉字生成拼音首字母
  16. 微信发朋友圈/评论/点赞/搜索/购物车测试点
  17. ArcGIS移动客户端离线地图的几种解决方案
  18. 计算机启动后无法进入系统怎么办,电脑开机无法进入系统怎么办
  19. C语言:用贪心策略计算活动安排问题的最优解
  20. 佳能 c3000 系统设置改语言,win7如何更改语言 win7系统中将电脑语言改成英文的方法步骤介绍...

热门文章

  1. 记一次docker虚拟机横向移动渗透测试
  2. MATLAB安装libsvm工具箱的方法
  3. 大批量数据修改时发现有一行数据被锁住了,一直处于等待状态的问题解决
  4. 二十. 在ROS系统上实现基于PyTorch YOLO v5的实时物体检测
  5. 从源码角度看for循环和foreach的区别
  6. Ubuntu上搭建git服务器
  7. windowsServer服务器上搭建GIt服务器
  8. 分布式架构——HTTP 协议(一)
  9. Phyon环境搭建及Pycharm安装及配置
  10. java做一个客房管理系统定制_java酒店客房定制管理系统