草庐IT

JS table下载

Jade_g 2023-03-28 原文

时间紧任务重推荐第一种,直接把表格整个拿过来;第二种根据表格的配置和数据进行设置

1、html下载,原生JS

downTable(name) {
        const uri = 'data:application/vnd.ms-excel;base64,',
            template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g,
                    function (m, p) {
                        return c[p];
                    })
            }
      //el-table表格设置列浮动,会多出一个隐藏table,需要过滤掉
        const table = document.getElementById('table')?.innerHTML.replace(/<div class="el-table__fixed".*>[\s\S]*?<\/div>/img, "");
        const ctx = {worksheet: name || 'Worksheet', table}
 
        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = uri + base64(format(template, ctx));
        // 对下载的文件命名
        link.download = name + '.xlsx';
        link.click();
    }

 

 优点:快

缺点:时间会被转义,样式会受页面CSS影响,测试反映有的电脑打开慢或文件损坏

2.1、XLSX-通过json数据转成一个worksheet对象

async downTable(type: number) {
        let tableColumn: any[] = [], tableData: any[] = [], fileName = '';
        if (type === 1) {
            tableColumn = this.trendSaleColumn;
            tableData = this.trendSaleData;
            fileName = '售前介入趋势(销售).xlsx';
        }else if (type === 3) {
            await this.getPreSalesConvertInfo(this.transferSaleType, 1);
            tableColumn = this.transferSaleColumn;
            tableData = this.transferSaleData;
            fileName = '售前部门转化(销售).xlsx';
        } 

        let data: any[] = [[]];
        tableColumn.forEach((item: any) => {
            data[0].push(item.label);
        })
        tableData.forEach((item: any) => {
            let row: any[] = [];
            tableColumn.forEach((column: any) => {
                row.push(item[column.prop]);
            })
            data.push(row);
        })
        const sheet = XLSX.utils.aoa_to_sheet(data);
      //合并单元格配置,需要计算需要合并的行列数
if (type === 3 || type === 4) { if (this.productType[1] > 0 && this.productType[2] > 0) { sheet['!merges'] = [ {s: {r: 1, c: 0}, e: {r: this.productType[1], c: 0}},//s表示开始,e表示结束,r表示行,c表示列; {s: {r: this.productType[1] + 1, c: 0}, e: {r: this.productType[2], c: 0}} ]; } else if (this.productType[1] > 0 || this.productType[2] > 0) { sheet['!merges'] = [ {s: {r: 1, c: 0}, e: {r: this.productType[1] || this.productType[2], c: 0}},//s表示开始,e表示结束,r表示行,c表示列; ]; } } // 通过创建a标签实现 const link = document.createElement("a"); link.href = URL.createObjectURL(sheet2blob(sheet)); // 对下载的文件命名 link.download = fileName; link.click(); }
sheet2blob(sheet: any, sheetName: string = 'sheet1') {
        const workbook: any = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet;
        // 生成excel的配置项
        const wopts: any = {
            bookType: 'xlsx', // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
            type: 'binary'
        };
        const wbout = XLSX.write(workbook, wopts);
        const blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});

        // 字符串转ArrayBuffer
        function s2ab(s: any) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }

        return blob;
    }

 

 优点:单元格内容可控,可以设置单元合并等XLSX支持的配置

缺点:复杂表格需要计算合并单元格的位置和数量,比如多级表头

 

2.2、XLSX-把页面上已有的表格dom节点传入

downTable() {
        const table = document.getElementById('table')?.innerHTML.replace(/<div class="el-table__fixed".*>[\s\S]*?<\/div>/img, "");
        const tableDom = document.createElement('div');
        tableDom.innerHTML = table;
        let ws = XLSX.utils.table_to_sheet(tableDom)
        //创建一个workbook对象
        let wb = XLSX.utils.book_new()
        //把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字
        XLSX.utils.book_append_sheet(wb, ws, 'sheet1')
        //接下来就是写入,下载导出
        let wb_out = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'})
        const blob = new Blob([s2ab(wb_out)], {type: "application/octet-stream"});

        // 字符串转ArrayBuffer
        function s2ab(s: any) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }

        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        // 对下载的文件命名
        link.download = this.title + '.xlsx';
        link.click();
}

 

有关JS table下载的更多相关文章

  1. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件,并创建一个临时验证的url以发送给同事。(理想情况下,这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针,它似乎不符合这个标准,但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  2. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  3. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  4. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时,我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  5. ruby-on-rails - HTTParty 的内存问题和下载大文件 - 2

    这会导致Ruby出现内存问题吗?我知道如果大小超过10KB,Open-URI会写入TempFile。但是HTTParty会在写入TempFile之前尝试将整个PDF保存到内存吗?src=Tempfile.new("file.pdf")src.binmodesrc.writeHTTParty.get("large_file.pdf").parsed_response 最佳答案 您可以使用Net::HTTP。参见thedocumentation(特别是标题为“流媒体响应机构”的部分)。这是文档中的示例:uri=URI('http://e

  6. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3,而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点? 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  7. ruby - 检查网络文件是否存在,而不下载它? - 2

    是否可以在不实际下载文件的情况下检查文件是否存在?我有这么大的(~40mb)文件,例如:http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm这与ruby​​不严格相关,但如果发件人可以设置内容长度就好了。RestClient.get"http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm",headers:{"Content-Length"=>100} 最佳答案

  8. ruby-on-rails - Rubygems - 包在哪里下载? - 2

    当你安装一个新包时,例如,'geminstallfb-graph',文件下载到哪里了? 最佳答案 使用此命令查找特定gem的安装位置:gemwhich例如:gemwhichfb-graph 关于ruby-on-rails-Rubygems-包在哪里下载?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/13200065/

  9. ruby - 从谷歌开发者网站下载后,client_secret.json 为空 - 2

    我正在尝试从googleAPI下载client_secret.json。我正在执行https://developers.google.com/gmail/api/quickstart/ruby中列出的步骤.使用此向导在GoogleDevelopersConsole中创建或选择项目并自动启用API。在左侧边栏中,选择同意屏幕。选择电子邮件地址并输入产品名称(如果尚未设置),然后单击“保存”按钮。在左侧边栏中,选择凭据并点击创建新客户端ID。选择应用程序类型已安装应用程序,已安装应用程序类型为其他,然后单击“创建客户端ID”按钮。点击新客户端ID下的下载JSON按钮。将此文件移动到您的工作

  10. ruby - 如何使用 Mechanize 保存通过单击按钮下载的文件 - 2

    我正在尝试使用Mechanize来模拟点击网页上的按钮,然后会在浏览器中启动文件下载。这是我的代码片段form=page.forms.first#=>Mechanize::Formform=agent.page.form_with(:name=>"aspnetForm")button=form.button_with(:value=>"GPXfile")ppbuttonagent.submit(form,button)pp按钮的输出是这样显示的,这意味着它是右键:#但是在发出“agent.submit(form,button)”之后,我怎样才能让Mechanize检索单击该按钮时将发送

随机推荐