vue简单纯js导出excel+合并表头

最新推荐文章于 2024-06-14 15:50:10 发布

Luminary7

最新推荐文章于 2024-06-14 15:50:10 发布

阅读量484

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Luminary7/article/details/112985027

版权

Vue.js HTML表格 Excel导出 js-base64 数据处理

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    <button  @click="handleExportMarketingList">Export</button>

注意：npm install --save js-base64

var base64 = require('js-base64').Base64;
  export default {
    name: '',
    data() {
    return {
        exportData: [{
                    name: 'aaaa',
                    month1: {
                        income: 'bbbb',
                        outlay: 'cccc'
                    },
                    month2: {
                        income: 'ddddd',
                        outlay: 'eeeee'
                    }
                },
                {
                    name: 'aaaa',
                    month1: {
                        income: 'bbbb',
                        outlay: 'cccc'
                    },
                    month2: {
                        income: 'ddddd',
                        outlay: 'eeeee'
                    }
                },
                {
                    name: 'aaaa',
                    month1: {
                        income: 'bbbb',
                        outlay: 'cccc'
                    },
                    month2: {
                        income: 'ddddd',
                        outlay: 'eeeee'
                    }
                },
                {
                    name: 'aaaa',
                    month1: {
                        income: 'bbbb',
                        outlay: 'cccc'
                    },
                    month2: {
                        income: 'ddddd',
                        outlay: 'eeeee'
                    }
                }]

            }
        },
        methods: {
           // 导出复杂表头
    handleExportMarketingList() {
      var tableStr = ` <tr style="height: 40px;">
         <td colspan="5" align="center">html 表格导出道Excel</td> 
        </tr> 
        <tr  style="height: 40px;">
         <td colspan="5" align="center">（**区）</td> 
        </tr> 
        <tr   style="border: 0;">
         <td colspan="5" align="center"  style="border: 0;">AAAA</td> 
        </tr> 
        <tr>
         <td colspan="5" align="center"   style="border: 0;">BBBB</td> 
        </tr> 
        <tr>
         <td colspan="5" align="center"  style="border: 0;">CCCC</td> 
        </tr> 
        <tr>
         <td colspan="5" align="center"  style="border: 0;">DDDD</td> 
        </tr> 
        <tr  style="height: 40px;"> 
         <td colspan="5"  style="text-align: left;">地点：</td> 
        </tr> 
        <tr  style="height: 40px;">
         <td colspan="5"  style="text-align: left;">类别：</td> 
        </tr>`;
        for(let item of this.exportData) {
                tableStr += `<tr style="text-align: center;height: 30px;">
                                <td style="mso-number-format:'\@';text-align: left;">${item.name}</td>
                                <td style="mso-number-format:'\@';text-align: left;">${item.month1.income}</td>
                                <td style="mso-number-format:'\@';text-align: left;">${item.month1.outlay}</td>
                                <td style="mso-number-format:'\@';text-align: left;">${item.month2.income}</td>
                                <td style="mso-number-format:'\@';text-align: left;">${item.month2.outlay}</td>
                            </tr>`;
            }
            //Worksheet名
            var worksheet = 'Sheet1'
            var uri = 'data:application/vnd.ms-excel;base64,';
            // 真正要导出（下载）的HTML模板
            var exportTemplate = `<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><meta charset='UTF-8'><!--[if gte mso 9]><!--[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 width="100%" border="1" cellspacing="0" cellpadding="0" syle="table-layout: fixed;word-wrap: break-word; word-break: break-all;vnd.ms-excel.numberformat:@">${tableStr}</table>
                                </body>
                            </html>`;
            //下载模板
            window.location.href = uri + base64.encode(exportTemplate)
    },

    }
  }

Luminary7

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue简单纯js导出excel+合并表头

<button @click="handleExportMarketingList">Export</button>注意：npm install --save js-base64var base64 = require('js-base64').Base64; export default { name: '', data() { return { exportData: [{ n...
复制链接

扫一扫

专栏目录