首页 前端知识 2024年最新Vue:使用vue-json-excel导出数据到excel,这份字节跳动历年校招Web前端面试真题解析

2024年最新Vue:使用vue-json-excel导出数据到excel,这份字节跳动历年校招Web前端面试真题解析

2024-06-10 23:06:55 前端知识 前端哥 898 439 我要收藏

其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。

1. template标签中

<download-excel

:fields=“exportDataStandard”

:data=“exportData”

type=“xls”

:name=“exportName”

:header=“exportHeader”

:footer=“exportFooter”

:defaultValue=“exportDefaultValue”

:fetch=“createExportData”

:before-generate=“startDownload”

:before-finish=“finishDownload”

worksheet=“导出信息”

导出

2. script标签中

export default {

name: “BMSStationInfo”,

components: {

BMSStationInfoDetailInformation

},

data() {

return {

exportDataStandard: {

“名称”: “name”,

“性别”: “sex”,

“地区”: {

field: “phone”,

callback: value => {

return 他的电话是:${value}

}

}

},

exportData: [

{name: “甲”, sex: “女”, phone: 15521103211},

{name: “乙”, sex: “男”, phone: 15521103222},

{name: “丙”, sex: “女”, phone: 15521103233},

{area: “北京市朝阳区”},

{name: “丁”, sex: “男”, phone: 15521103233},

{name: “丁”, sex: “男”, phone: 15521103233},

],

exportName: “导出数据”,

exportHeader: [“用户信息页头1”,“用户信息页头2”],

exportFooter: [“用户的信息页脚1”,“用户的信息页脚2”],

exportDefaultValue: “这一行这一列没有数据”

}

},

methods: {

createExportData() {

// 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据

// TODO:构造需要下载的数据返回

return [

{name: “甲”, sex: “女”, phone: 15521103211},

{name: “乙”, sex: “男”, phone: 15521103222},

{name: “丙”, sex: “女”, phone: 15521103233},

{area: “北京市朝阳区”},

{name: “丁”, sex: “男”, phone: 15521103233},

{name: “丁”, sex: “男”, phone: 15521103233},

];

},

startDownload() {

console.log(“数据开始”)

},

finishDownload() {

console.log(“数据下载完成”)

}

}

}

5. 重点参数具体使用


  1. fields:规定导出数据中的字段名称与文件每一列列头名称的关系。可以使用callback回调函数的形式,对字段进行格式化。如果fields没有规定默认格式的话,会把所有的数据都导出。

举例:

在这里插入图片描述

  1. data:需要导出的数据参数,数组中存储对象,每一个对象就是导出的一行数据,data中的键对应fields中的值。

在这里插入图片描述

  1. default-value:如果某一行中,没有fields中规定的默认数据的话,会导出默认值的值。如图中导出数据中的第三行,没有name、sex和phone,而设置的默认值为:“这一行这一列没有数据”,则导出的样式为:

在这里插入图片描述

在这里插入图片描述

跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。

面试准备

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11854.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!