纯js结合浏览器下载excle

最新推荐文章于 2021-10-19 10:27:27 发布
最新推荐文章于 2021-10-19 10:27:27 发布
阅读量175 收藏
点赞数
分类专栏： JavaScript(js) 文章标签： j' excle
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoleshan/article/details/79384987
版权

js部分

 $(document).ready(function(){
            $('#Export').click(function(){
                var data = {
                    "title":[
                        {"value":"案件编号", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"催收动作", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"催收结果", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"联系人关系", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"联系人姓名", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"电话号码", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"催收时间", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"承诺金额", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"承诺日期", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"催收组", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"催收员", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"创建人", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                        {"value":"备注", "type":"ROW_HEADER_HEADER", "datatype":"string"},
                    ],
                    "data":[
                        [
                         {"value":"", "type":"ROW_HEADER"},
                         {"value":"", "type":"ROW_HEADER"}
                         ]
                    ]
                };
                if(data == '')
                    return;
                JSONToExcelConvertor(data.data, "催记模板", data.title);
            });
        });
        function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
            //先转化jsoni
            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
            var excel = '<table>';
            //设置表头
            var row = "<tr>";
            for (var i = 0, l = ShowLabel.length; i < l; i++) {
                row += "<td>" + ShowLabel[i].value + '</td>';
            }
            //换行
            excel += row + "</tr>";
            //设置数据
            for (var i = 0; i < arrData.length; i++) {
                var row = "<tr>";
                for (var index in arrData[i]) {
                    var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;
                    row += '<td>' + value + '</td>';
                }
                excel += row + "</tr>";
            }
            excel += "</table>";
            var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
            excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
            excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
            excelFile += '; charset=UTF-8">';
            excelFile += "<head>";
            excelFile += "<!--[if gte mso 9]>";
            excelFile += "<xml>";
            excelFile += "<x:ExcelWorkbook>";
            excelFile += "<x:ExcelWorksheets>";
            excelFile += "<x:ExcelWorksheet>";
            excelFile += "<x:Name>";
            excelFile += "{worksheet}";
            excelFile += "</x:Name>";
            excelFile += "<x:WorksheetOptions>";
            excelFile += "<x:DisplayGridlines/>";
            excelFile += "</x:WorksheetOptions>";
            excelFile += "</x:ExcelWorksheet>";
            excelFile += "</x:ExcelWorksheets>";
            excelFile += "</x:ExcelWorkbook>";
            excelFile += "</xml>";
            excelFile += "<![endif]-->";
            excelFile += "</head>";
            excelFile += "<body>";
            excelFile += excel;
            excelFile += "</body>";
            excelFile += "</html>";
            var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
            var link = document.createElement("a");
            link.href = uri;
            link.style = "visibility:hidden";
            link.download = FileName + ".xls";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

        }

jsp部分

 <button class='search-button btn btn-primary ' type="button" id="Export"
>
<i class='fa fa-hand-pointer-o'></i>下载催记模板
</button> 

信天鸽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui表格-设置表头样式-header-row-class-name
weixin_45822022的博客
03-10 2万+
使用element-ui时，改变table表头，表体样式
js原生下载excel（xlxs及xls格式）、word、png(图片格式）方法
Shimeng_1989的博客
03-08 1218
（亲测有效）原生js下载Excel、word、png（图片）格式 js方法部分： // 下载文件（格式） type:1 excel 2 word 3 image // url为接口部分：如 /restart/getchinaareainfo.do // 传参方式 let params = { // username:'小名', // zyUserId:'23123' // } // 调用方
前端 jquery ajax js 导出excel_记录
weixin_41592847的博客
10-19 896
前端 jquery ajax js 导出excel 按钮代码 <button type="button" id="excelBtn" class="layui-btn layui-btn-normal" data-type="reload">导出Excel</button> 前端数据处理 //导出按钮绑定事件 $("#excelBtn").on("click", function(){ var JSON_DATA = { "title":[
纯前台js json导出到excel，不与后台交互
oYuLian的博客
07-06 2571
&lt;html&gt;   &lt;head&gt;       &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;       &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/s
为JTable添加RowHeader
架构师专栏
08-17 1万+
       JTable实现的TableHeader应该算是ColumnHeader，显示的是列标题。这里说的RowHeader指的是行标题，也就是行号。JTable已经默认实现了ColumnHeader，但却没有实现RowHeader。那么如何实现RowHeader？这就要通过JScrollPane，实际上JTable的ColumnHeader也是这么实现的。先来看看JScrollPane
纯前端 JS脚本 导出excel 可动态添加数据
最新发布
01-11
"纯前端 JS脚本 导出excel 可动态添加数据"这一主题，聚焦于如何利用JavaScript在浏览器环境中实现Excel文件的生成与动态数据填充，无需借助服务器端处理。这一技术在数据分析、报表生成以及用户交互场景中具有广泛...
纯前端JavaScript实现Excel IO案例分享
10-21
在本文中，我们将深入探讨如何使用纯前端JavaScript实现Excel的导入和导出功能。这个案例主要涉及的技术点包括JavaScript操作文件、使用开源库xlsx以及HTML5的FileReader接口。 首先，面对需求，我们需要处理Excel...
Vue结合后台导入导出Excel问题详解
10-17
在Vue.js开发中，实现Excel的导入导出功能是一项常见的需求。本文将深入探讨如何在Vue项目中结合后台服务实现这一功能，特别是针对导出Excel的实现方式。 首先，我们来看一下导出Excel的核心概念。在Java后端，通常...
layui excel.js
08-04
`excel.js.map` 文件是源代码映射文件，用于在开发过程中进行调试，它记录了JavaScript代码在编译后的每个位置与源代码的对应关系，有助于在浏览器的开发者工具中定位到源代码中的具体行和列。 `excel.js.LICENSE....
js前端Excel大数据处理导入
07-05
在JavaScript（JS）前端开发中，处理Excel大数据的导入是一项挑战。随着Web应用程序对数据处理能力的需求提升，前端工程师必须找到有效地处理大量数据的方法，而不仅仅是依赖后端服务器。本主题将深入探讨如何使用...
js实现下载excel
weixin_42839080的博客
02-06 6427
excel是常见的表格处理工具,那么前端怎么实现excel生成与下载呢?我们利用xlsx.js来实现 一. 安装js-xlsx npm install xlsx 二. 文档简介 完成的XLSX对象: 需要理解的术语: 1 workbook是xlsx读取excel内容后的js对象,读取到内容后可以对表格进行操作;同样的也可以创建一个空的workbook,往其中写入内容 完整的workbook对象...
js 下载Excel文件
qq_38394249的博客
07-22 2324
第一种 通用(包括跨域) function downloadFile(url,fileName) { fileName = fileName + '.xlsx'; var x = new XMLHttpRequest(); x.open("GET", url, true); x.responseType = 'blob'; x.onload=fu...
JS直接导出excel 兼容ie、chrome、firefox
热门推荐
85-专栏
04-08 4万+
<html> <head> <script type="text/javascript" language="javascript"> var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie
java 下载excel到本地_浏览器js调用后端java服务模块下载excel文档到本地
weixin_33514864的博客
02-16 355
自由自在，废话省略因为excel文档是一部分需要自动填充，另外一部分 需要手动写入，所以后端只获取存在于数据库中的数据，1.生成文档结构(一行数据)如下：2.后端生成excel代码：package com.adao.review.service;import java.io.File;import java.io.FileOutputStream;import java.io.IOExceptio...
前端js发送请求下载excel文件的方法
我的米饭
05-15 2591
如何发送请求这里就不再介绍了，直接从请求发送后开始吧 发送的数据格式为：FormData 格式，发送方式为 ：post 方式 1.首先使用 new FormData() 来创建你要发送的参数，例如： let formObj = new FormData() formObj.append('columns', 'yourData') 2.从后端返回的文件流中开始创建下载文件，例如： ajax(formObj).then(response => { // 把后端返回的文件流变成一个 Blob 对象，.
纯JS实现HTML表格跨浏览器导出为Excel
"本文档详细介绍了如何使用纯JavaScript将HTML中的表格（table）导出到Excel文件，支持在IE和Chrome浏览器环境下实现这一功能。主要内容包括HTML结构、JavaScript函数以及两种不同浏览器的导出方法。以下是对这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值