Vue3.0导出数据为自定义样式Excel的详细实例

更新时间：2023年06月09日 15:31:07 作者：qq_24800489

在许多的后台系统中少不了导出Excel表格的功能,下面这篇文章主要给大家介绍了关于Vue3.0导出数据为自定义样式Excel的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

当下开发web应用系统的时候，我们往往会遇到需要把网页上面的数据导出到excel这样的需求，真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求，本文将对此做探讨。

开始前补充： 网上是有些牛人已经把这个功能封装成组件了，但每个人的封装逻辑五花八门，组件的功能也很有限，不一定真能完全符合自己的业务需求，找相应的API也很麻烦，存在不太敢用，不会用等问题，那么本文将教你如何自己封装，如何自己自定义相关功能，如何自定义Excel的样式，尤其是导出excel后自定义样式，这在一些现存封装好的组件是不好实现的，本文可以实现！

本文导出Excel方法的优点： 网页上的table与导出Excel之后的table完全独立，也就是说你导出Excel之后的内容与网页没有直接联系，这意味着数据导出到Excel后：

有非常强的定制性，实在不理解这句话也没关系，本文看完你自然就明白了。
能跨浏览器兼容，甚至是某E浏览器。
导出非常快，不卡顿！

编码思路

采用HTML字符串拼接的方法，拼接出一个table，即可显示到Excel；换句话来说使用HTML的语法写出来的table能展示到excel上面，还能携带样式！请用心看完拼接过程，拼接看懂了，你会90%了！

1、定义拼接函数

/**
 * 
 * @param {表头集合} header 
 * @param {表格数据} table 
 * @param {文件名} name 
 * @param {表格名} tname 
 * @param {回调方法} callback 
 */
function transform(header, table, name, tname, callback) {
    ...
}

2、表格模板字符串拼接

// 定义表格模板字符串
let tableInnerHTML = ""
let headerData = header
let bodyData = table
//这里对应是表格数据，我们只需要传过来即可 
// 拼接完全使用thead、tbody、tr、td、th，并且相应的tr、th、td里
// 视情况可以自己写一些 colspan(合并列) 及 rowspan(合并行)等高级操作
tableInnerHTML += "<thead><tr>";
// 表头拼接--start
tableInnerHTML += `<th colspan=${headerData.length} style="background:#CCFFFF;border:solid;">` + tname + "</th></tr>"
tableInnerHTML += "<tr>"
headerData.forEach(item => {
   tableInnerHTML += `<th rowspan="1" style="background:#FFFFCC; border:solid">${item}</th>`
})
tableInnerHTML += "</tr></thead>";
// 表头拼接--end
tableInnerHTML += "<tbody>"
// tbody拼接--start
bodyData.forEach(item => {
    tableInnerHTML += "<tr>"
    // 这里视实际项目情况可以作一些过滤~
    for (let key in item) {
       tableInnerHTML += `<td align="center" style="border:solid">${item[key]}</td>`
    }
    tableInnerHTML += "</tr>"
})
tableInnerHTML += "</tbody>";
// tbody拼接--end

3、定义打印函数

/**
 * 
 * @param {表格模板字符串} table 
 * @param {文件名} name 
 * @param {回调方法} callback 
 */
function tableToExcel (table, name, callback) {
    ...
}

4、生成 Blob 文件对象，并下载

let template = `<html><head><meta charset="UTF-8"></head><body><table>${table}</table></body></html>`;
let format = function (s, c) {
    return s.replace(/{(w+)}/g,
            function (m, p) {
                return c[p];
            });
};
let ctx = {
    worksheet: name || "Worksheet",
    table: table
};
let blob = new Blob([format(template, ctx)]);
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = name; //这里这个name就是对应的文件名！ 
a.click();
a.remove();
callback("success"); /*这里调用我们自己传入的回调方法，这样导出Excel完成后你就能 在外面知道导出完毕，并且再往下做自己其他的逻辑*/

5、调用示例

let headerData = ["序号", "姓名", "年龄", "性别", "爱好", "发量", "薪水"]
let table = [
    {
        index: 1,
        name: '武松',
        age: 18,
        sex: '男',
        hobby: '打虎',
        hair: '满头长发',
        salaried: '每月五十文'
    }
];
let fileName = '测试导出xlsx'
let tabelName = '梁山贼寇调查表'
transform(headerData, table, fileName, tabelName, (v) => {
    console.log('callback: ', v)
})

至此编码完毕！上效果：

兼容性问题处理

getExplorer 用于判断浏览器类型，主要针对IE浏览器做兼容性处理，这段代码使用后基本上不会有任何兼容性问题

Cleanup 用于关闭进行IE浏览器兼容处理时开启的定时器

var idTmr; // 定义一个定时器对象
function getExplorer() {
    var explorer = window.navigator.userAgent;
    if (explorer.indexOf("MSIE") >= 0) {
        return "ie"; // ie 
    } else if (explorer.indexOf("Firefox") >= 0) {
        return "Firefox"; // firefox 
    } else if (explorer.indexOf("Chrome") >= 0) {
        return "Chrome"; // Chrome 
    } else if (explorer.indexOf("Opera") >= 0) {
        return "Opera"; // Opera 
    } else if (explorer.indexOf("Safari") >= 0) {
        return "Safari"; // Safari 
    };
};
if (getExplorer() !== "Safari" && name.substr(-1, 4) !== ".xls") {
    name += ".xls";
}
if (getExplorer() === "ie") {
    var curTbl = table;
    var oXL = new ActiveXObject("Excel.Application");
    var oWB = oXL.Workbooks.Add();
    var xlsheet = oWB.Worksheets(1);
    var sel = document.body.createTextRange();
    sel.moveToElementText(curTbl);
    sel.select();
    sel.execCommand("Copy");
    xlsheet.Paste();
    oXL.Visible = true;
    try {
        var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
    } catch (e) {
        print("Nested catch caught " + e);
    } finally {
        oWB.SaveAs(fname); // 
        oWB.Close(savechanges = false);
        oXL.Quit(); oXL = null;
        idTmr = setInterval(Cleanup(), 1);
    }
} else {
    // 无需作兼容处理的浏览器直接使用上面的打印方法即可
    tableToExcel(tableInnerHTML, name, callback);
}
function Cleanup() {
    window.clearInterval(idTmr);
}

最后导出封装

可以在项目中创建一个exportExcel.js文件，并在项目中导出方法：export default transform，这样就可以不用局限于在Vue里使用，哪怕是Jquery、React等其他前端框架，你只需要将封装好的方法引入即可。

总结

到此这篇关于Vue3.0导出数据为自定义样式Excel的文章就介绍到这了,更多相关Vue3.0导出数据为Excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue声明式渲染详解
这篇文章主要介绍了Vue声明式渲染详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue3.0实现图片预览组件(媒体查看器)功能
最近项目中有个场景，一组图片、视频、音频、文件数据，要求点击图片可以放大预览，左右可以切换音视频、文件，支持鼠标及各种键控制缩放，左右旋转，移动等功能,这篇文章主要介绍了Vue3.0实现图片预览组件(媒体查看器),需要的朋友可以参考下
2023-12-12
图文详解如何在vue3+vite项目中使用svg
SVG指可伸缩矢量图形,用来定义用于网络的基于矢量的图形,下面这篇文章主要给大家介绍了关于如何在vue3+vite项目中使用svg的相关资料,需要的朋友可以参考下
2021-11-11
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
这篇文章主要介绍了vue-cli项目中使用公用的提示弹层tips或加载loading组件,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2018-05-05
vue项目中路由跳转页面不变问题及解决
这篇文章主要介绍了vue项目中路由跳转页面不变问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Element Table的row-class-name无效与动态高亮显示选中行背景色
这篇文章主要介绍了Element Table的row-class-name无效与动态高亮显示选中行背景色，本文详细的介绍了解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue前端开发keepAlive使用详解
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态
2021-10-10
vue项目实现减少app.js和vender.js的体积操作
这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue实现图片拖拽及鼠标滚轮放大缩小的示例代码
本文主要给大家介绍如何vue实现图片拖拽及鼠标滚轮放大缩小,文中有详细的代码供大家参考,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
2023-08-08
vue.js内置组件之keep-alive组件使用
keep-alive是Vue.js的一个内置组件。这篇文章主要介绍了vue.js内置组件之keep-alive组件使用,需要的朋友可以参考下
2018-07-07