首页 > 其他分享 >很好用的把Table表格数据通过点击button导出成Excel

很好用的把Table表格数据通过点击button导出成Excel

时间:2024-03-07 15:25:51浏览次数:22  
标签:false url button Excel sheetName sheet var Table event

HTML的button按钮

点击查看代码
<button id="btn_download" type="button" class="btn btn-light" style="margin-left: 10px;" onclick="btn_export()" >
                <img src="~/download.svg" alt="Bootstrap" width="20" height="20"> 查詢匯出
            </button>

''
Table表格数据

点击查看代码
<div class="table-responsive">
            <table id="query" class="table table-sm table-bordered table-striped text-nowrap">
                <thead class="thead-light">
                    <tr>
                        <th>Form. No</th>
                        <th>提案日期</th>
                        <th>類別</th>
                        <th>提案人</th>
					</tr>
                </thead>
                <tbody>
			<tr>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>4</td>
				</tr>
			</tbody>
		</table>
	</div>

js事件(这个蛮好用的,忘记前面在哪里学习的了,之前有的导出的Excel会都是字符串,不能数学计算,这个就不会)
需要添加引用,jquery.min.js 和xlsx.core.min.js

/*! xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
present SheetJS

点击查看代码
<script>
    function btn_export() {
        var table1 = document.querySelector("#query");
        var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
        openDownloadDialog(sheet2blob(sheet),'QueryData.xlsx');
    }

    // 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
    function sheet2blob(sheet, sheetName) {
        sheetName = sheetName || 'sheet1';
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

        var wopts = {
            bookType: 'xlsx', // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
            type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }); // 字符串转ArrayBuffer
        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;
        }
        return blob;
    }

    function openDownloadDialog(url, saveName) {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    }
</script>

标签:false,url,button,Excel,sheetName,sheet,var,Table,event
From: https://www.cnblogs.com/qiuyublog/p/18058942

相关文章

  • TransmittableThreadLocal 的反复与纠缠
    TransmittableThreadLocal相信很多人用过,一个在多线程情况下共享线程上下文的利器名字好长,以下简称ttl本文以两年前一个真实项目开发遇到的问题,从源码的角度分析并解决环境itemversionjava8springboot2.2.2.RELEASEttl2.11.4代码如下,主线程并行启复......
  • excel 自动新增以及填充数据
    拿下图举例: 客户编码需要自增一直到结尾1、选中第一行ctrl+shift+箭头下2、选择开始==》填充==》序列==》等差序列 设置步长即可 ......
  • pageoffice6动态生成Excel文件
    转载:动态生成Excel文件#动态生成Excel文件查看本示例演示效果本示例关键代码的编写位置Vue+Springboot注意本文中展示的代码均为关键代码,复制粘贴到您的项目中,按照实际的情况,例如文档路径,用户名等做适当修改即可使用。使用com.zhuozhengsoft.pageoffice.excelwriter命名空......
  • python-合并大型Excel
    使用openpyxl库实在是太慢,使用openpyxl的只读模式又需要excel的准确尺寸信息,但是每个excel的尺寸都不一样。我使用zipfile解压excel文件,直接读取xml文件进行合并:importosfromopenpyxlimportload_workbookfromopenpyxlimportWorkbookimportzipfileimportretotal_......
  • div contenteditable="true" 添加placehoder效果
    <divclass="contain":style="{height:editableHeight+'px'}" v-html="innerText" ref="editableDiv" contenteditable="true" :placeholder=placeholder @input="inputTe......
  • 2024/3/5如何在excel中支持base64编码解码
    在excel中按alt+f11(打开VisualBasic工具)。添加模块,粘贴一下代码`FunctionEncodeBase64(text$)DimbWithCreateObject("ADODB.Stream").Open:.Type=2:.Charset="utf-8".WriteTexttext:.Position=0:.Type=1:b=.ReadWithCreateObject("Micr......
  • 合并Excel文件
    合并Excel文件需求:把多个Excel文件合并到一个Excel文件的不同表格中。且需要合并的文件前后缀一致。对合并完成的文件中每张表指定列找出最大值标红XXX表示需要自己填写的内容importosimportpandasaspdfromopenpyxlimportload_workbookfromopenpyxl.stylesi......
  • 使用Npoi简单生成Excel并赋值导出小案例
    publicasyncTask<byte[]>ExportNewReportByQuotationId(GuidquotationId){IWorkbookwookbook=newXSSFWorkbook();//EngineerQuoteSheetawaitDoEngineerQuoteWork(wookbook,quotationId);//ILSheetawa......
  • InheritableThreadLocal 使用举例
    ThreadLocalpublicclassMyThreadextendsThread{privateThreadLocal<String>threadLocal=newThreadLocal<>();publicvoidrun(){threadLocal.set("ThreadLocalvalueinMyThread");System.out.println(&quo......
  • Oracle中不允许表的列名称使用Oracle声明的关键字! (ORA-01747: user.table.column, t
    1.问题ORA-01747:user.table.column,table.column或列说明无效--Oracle下,根据商品价格从高到低取4-6名商品SELECT*FROM( SELECTROWNUM,t1.* FROM( SELECTprod_name,prod_price FROMPRODUCTS ORDERBYPROD_PRICEDESC )t1 WHEREROWNUM<=6......