APP客户端内嵌H5和网页导出EXC表格数据

前沿

在对接数据的时候常常会遇到需求就是 导出exc表格，但是导出这个功能都是服务端去做，但是现在用前端去实现，

一般都是A标签点击下载

看看下面的逻辑代码吧

    // 新的下载
    downloadFile (fileName) {

        let tableStr = `
        <tr style="text-align: center;">
        <th colspan="4">${'明细'}</th>
        </tr>
        <tr style="text-align: center;">
        <th>用户ID</th>
        <th>用户昵称</th>
        <th>日期</th>
        </tr>
        `
        for(let i of this.tableData) {
            tableStr += `
            <tr style="text-align: center;">
                <td>${i.uid || ''}</td>
                <td>${i.nickname || ''}</td>
                <td>${i.init_date || ''}</td>
            </tr>
            `
        }


        let worksheet = 'Sheet1'
        let uri = 'data:application/vnd.ms-excel;base64,'
        // 输出base64编码
        let base64 = s => window.btoa(unescape(encodeURIComponent(s)))
        // 下载的表格模板数据
        let 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 syle="table-layout: fixed; word-wrap: break-word; word-break: break-all;">${tableStr}</table>
            </body>
            </html>`

        
        // 以下数据必须重置
        this.total = 0 // 重置掉
        this.pageNum = 1 // 重置掉
        this.tableData = [] // 重置掉
        this.pageLoading = false // 重置掉


        let content =   uri + base64(template)
        const blob = this.base64ToBlob(content); // new Blob([content]);
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;

            //此写法兼容可火狐浏览器
            document.body.appendChild(link);
            const evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            link.dispatchEvent(evt);
            document.body.removeChild(link);
        }
    },

然后最主要的是这个

base64ToBlob   转换

    base64ToBlob (code) {
      const parts = code.split(';base64,');
      const contentType = parts[0].split(':')[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

然后点击下载就可以了 导出到手机了 安卓和 IOS都可以



posted @ 2023-11-16 00:21  -鹿-  阅读(74)  评论(0)  编辑  收藏  举报