前端原生js导出excel

最新推荐文章于 2025-05-05 22:06:06 发布

野原gokai

最新推荐文章于 2025-05-05 22:06:06 发布

阅读量528

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript excel

本文链接：https://blog.csdn.net/weixin_43661184/article/details/140763353

需求：

客户需要导出定制化的excel表格，其实主要还是通过table表格调整colspan和rowspan

问题：

因为要附带客户公司的集团logo图片，而原生的导出虽然能在第一次导出时导出图片，但是导出文件为xls文件，用wps打开时能看到图片，但是用office打开不可见，而且在保存后图片会消失。因为是xls文件

项目相关：.net项目，没有工程化

代码：

      let template = '';
        template += '<html lang="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">';
        template += '<head><meta charset="UTF-8"><!--[if gte mso 9]><title></title>';
        template += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
        template += '<x:Name>';
        template += '检验记录';
        template += '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>';
        template += '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>';
        template += '</head>';
        template += '<body><table >';
        // template += $('#table-head').html()
        // <img style='margin-top:20px;margin-left:20px' src='data:image/jpg;base64,${base64}'         width=260 />
        template += `
             <thead style="width: 100%;">
              <tr>
              </tr>
            </thead>` //这里是需要导出的表格内容
        template += '</table><table id="print_table_1" class="print_table_1" border="1">';
        template += $('#print_table_1').html(); //可以将多个表格拼接
        template += '</table>';
        template += `<table>${$('#table-footer').html()}</table>` //可以将多个表格拼接
        template += '</body></html>';

        // 将html编码为excel文件，并下载
        let url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template)));
        // const blob = new Blob([template], { type: 'application/vnd.ms-excel' });
        // const url = URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = '文件名称.xls';
        a.click();