css
1，盒模型 2，如何实现一个最大的正方形 3，一行水平居中，多行居左 4，水平垂直居中 5，两栏布局，左边固定，右边自适应，左右不重叠 6，如何实现左右等高布局 7，画三角形 8，link @import导入css 9，BFC理解
js
1，判断 js 类型的方式 2，ES5 和 ES6 分别几种方式声明变量 3，闭包的概念？优缺点？ 4，浅拷贝和深拷贝 5，数组去重的方法 6，DOM 事件有哪些阶段？谈谈对事件代理的理解 7，js 执行机制、事件循环 8，介绍下 promise.all 9，async 和 await, 10，ES6 的 class 和构造函数的区别 11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式, 12，介绍一下rAF(requestAnimationFrame) 13，javascript 的垃圾回收机制讲一下, 14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
链接1: pan.baidu.com/s/1iqyQAwYZ… 提取码: upxq
链接2: pan.baidu.com/s/1IHOgPrKC… 提取码: 76yv
下载后放到src下面的文件夹下：
第三步、
在main.js引入这两个文件(路径取决你们的路径)
第四步、
正确设置路径
打开Export2Excel.js文件，设置里面的路径，正确引入Blob.js
现在回到你要用导出功能的组件里，在data里放入tableData变量，这个是存放你表格里的数据，类型为数组，里面存放对象，表格的每一行为一个对象，存入tableData。
举个列子:
如果你的每一行是这样子
那么data里的tableData就是这样子(切记，你的表格有多少行内容，tableData里就存多少个对象,对象属性不用变，改变值即可)
第五步、
接下来在methods里写入两个方法，如下:
哪个按钮是导出功能，就调用export2Excel()方法：
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', '帐号', '院校'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'phone_Num', 'school_Name'];
// 上面的index、phone_Num、school_Name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
注意上面的方法也有个路径问题，要自己修改：
第六步、完整代码如下：
<template>
<div>
<el-row :gutter="24" style="margin-bottom:20px;">
<el-col :span="24" class="text-right">
<!--给按钮绑定事件-->
<el-button type="primary" @click="exportExcel">点击导出</el-button>
</el-col>
</el-row>
<!-- 表格导出1 -->
<!--给表格添加一个id，导出文件事件需要使用-->
<el-row :gutter="24" style="margin-bottom:20px;">
<el-table :data="historyData" border style="width: 100%" id="out-table">
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="date" label="日期" width="150"></el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="province" label="省份" width="150"></el-table-column>
<el-table-column prop="city" label="市区" width="150"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="zip" label="邮编" width="150"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" @click="handleClick(scope.row)" size="small">查看</el-button>
<el-button type="primary" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
// 导出一、
historyData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}],
excelData:[],
};
},
mounted() {
},
methods: {
//定义导出Excel表格事件
exportExcel() {
/* 从表生成工作簿对象 */
// var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
// /* 获取二进制字符串作为输出 */
// var wbout = XLSX.write(wb, {
// bookType: "xlsx",
// bookSST: true,
// type: "array"
// });
// try {
// FileSaver.saveAs(
// //Blob 对象表示一个不可变、原始数据的类文件对象。
// //Blob 表示的不一定是JavaScript原生格式的数据。
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
// new Blob([wbout], { type: "application/octet-stream" }),
// //设置导出文件名称
// "导出表格.xlsx"
// );
// console.log("wbout:", wbout);
// } catch (e) {
// if (typeof console !== "undefined")
// console.log(e, wbout);
// }
// return wbout;
this.$confirm('确定下载列表文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.excelData = this.historyData //你要导出的数据list。
this.export2Excel();
}).catch(() => {});
},
export2Excel() {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('../../../excel/Export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
const tHeader = ['date','name','province','city','address','zip']; // 导出的表头名信息
const filterVal = ['date','name','province','city','address','zip']; // 导出的表头字段名，需要导出表格字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
//查看
handleClick(row) {
console.log(row);
},
}
};
</script>
**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**
### HTML
* HTML5有哪些新特性？
* Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
* 如何实现浏览器内多个标签页之间的通信？
* ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
* 简述⼀下src与href的区别？
* cookies,sessionStorage,localStorage 的区别？
* HTML5 的离线储存的使用和原理？
* 怎样处理 移动端 1px 被 渲染成 2px 问题？
* iframe 的优缺点？
* Canvas 和 SVG 图形的区别是什么？
### JavaScript
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
* 问：0.1 + 0.2 === 0.3 嘛？为什么？
* JS 数据类型
* 写代码：实现函数能够深度克隆基本类型
* 事件流
* 事件是如何实现的？
* new 一个函数发生了什么
* 什么是作用域？
* JS 隐式转换，显示转换
* 了解 this 嘛，bind，call，apply 具体指什么
* 手写 bind、apply、call
* setTimeout(fn, 0)多久才执行，Event Loop
* 手写题：Promise 原理
* 说一下原型链和原型链的继承吧
* 数组能够调用的函数有那些？
* PWA使用过吗？serviceWorker的使用原理是啥？
* ES6 之前使用 prototype 实现继承
* 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
* 事件循环机制 （Event Loop）
