前端：导出excel文件功能

最新推荐文章于 2025-03-21 17:43:10 发布

雪落满地香

最新推荐文章于 2025-03-21 17:43:10 发布

阅读量149

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/wanggmm/article/details/130202260

版权

该文章介绍了一个方法，允许在前端将包含表格的HTML内容转换并导出为Excel文件，无需额外的下载插件。通过JavaScript获取HTML元素，编码并创建一个dataURL，然后模拟点击下载链接来触发文件保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导出功能：将前端的html内容导出问excel文件部分，不额外下载插件；

html部分

        <div style="align-self: center" ref="tableRef" id="tableRef">
            <span>开始时间：xxxxx</span><br />
            <span>开始时间：xxxxx</span>
            <table border="1" cellspacing="0" cellpadding="0" width="1000">
                <thead>
                    <th :colspan="2" height="50">5月实际产出分析表</th>
                    <th :colspan="6" height="50">5月实际产出分析表</th>
                </thead>
                <tbody>
                    <tr align="center">
                        <td>工位描述</td>
                        <td>时段</td>
                        <td>时间段</td>
                        <td>总计</td>
                        <td>最大值</td>
                        <td>最小值</td>
                        <td>平均值</td>
                        <td>结论</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button @click="exportExcel">导出</button>

js部分

const exportExcel = () => {
    // let str = this.$refs.tableRef.innerHTML;
    let str = document.querySelector('#tableRef').innerHTML;
    // console.log(str)
    const uri = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(str)));
    // 下载
    const link = document.createElement('a');
    link.href = uri;
    link.download = '5月报表.xlsx';
    link.click();
};