前端:导出excel文件功能

导出功能:将前端的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();
};

猜你喜欢

转载自blog.csdn.net/wanggmm/article/details/130202260