### 前端完成 excel 下载
1.form 表单提交
因为 ajax 不支持文件类型的数据, 故而这里考虑到 form 表单是支持文件类型的, 这里可以使用 form 表单提交数据, 完成 excel 文件的下载.
javascript 代码
- function formSubmit(obj) {
- this.obj = obj || {};
- if (!obj.url) {
- console.log("obj.url 不能为空!");
- }
- var form = $("<form>");// 定义一个 form 表单
- form.attr("style", "display:none");
- form.attr("target", "");
- form.attr("method", "post");
- form.attr("action", obj.url);
- form.attr("accept-charset","UTF-8");
- for ( var key in obj) {
- if (key == "url") {
- continue;
- }
- if(Array.isArray(obj[key]) == true){// 处理多条数据, 这里的多条数据是分别作为对象存储在数组中的
- obj[key].forEach(function(item,index){
- if(typeof item == 'object'){
- for(var val in item){
- var inputArr = $("<input>");
- inputArr.attr("type", "hidden");
- inputArr.attr("name", val);
- inputArr.attr("value", item[val]);
- form.append(inputArr);
- }
- }
- })
- }
- else{// 处理单行数据
- var input1 = $("<input>");
- input1.attr("type", "hidden");
- input1.attr("name", key);
- input1.attr("value", obj[key]);
- form.append(input1);
- }
- }
- $("body").append(form);// 将表单放置在 web 中
- form.submit().remove();
- }
2. 使用 ajax 请求
- <1>. 先将数据发送给后端
- <2>. 后台使用这些数据生成 excel 文件
- <3>. 然后前端将改文件地址设置为 window.location.href 的值来进行下载.
这种方法同样是通过后端来生成 excel 文件, 但 并不直接返回 excel 文件, 前端通过向后端发送 ajax 请求返回一个用于下载 excel 文件的地址, 在页面上设置 a 标签的 href 为返回的地址即可
3. 纯前端实现 excel 的下载
JsonExportExcel 的 github 地址: 点击查看源码 https://github.com/zhanghy7/JsonExportExcel
来源: http://www.qdfuns.com/article/41970/f46c9854bf1f8bd795e9df691230d561.html