m0_56212431的博客

接到一个任务，是要前端实现文件预览效果，百度了一圈，发现也没有什么好的方法可以完美的将表格渲染出来。在前端中有sheetjs和exceljs可以对xlsx文件进行解析，本来一开始我用的是sheetjs，但是在样式获取上遇到了麻烦，所以我改用了exceljs，不过很难受，在样式获取时同样遇到了不小的麻烦，但是我懒得换回sheetjs了，那就直接使用exceljs吧。要实现xlsx文件预览效果，我的想法是使用一个库对xlsx文件进行解析，然后使用另一个库对解析出来的数据在页面上进行绘制，综上，exceljs。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）：设置子元素是否换行（flex布局中，默认情况下子元素都排列在一条线上，且默认是不换行的，如果装不下，则会缩小子元素的宽度，放到父元素里面）：设置主轴的方向（主轴和侧轴是会变化的，就看该属性设置谁为主轴，剩下的就是侧轴。：设置侧轴上的子元素的排列方式，只能用于子项出现换行的情况（多行）即通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。：设置侧轴上的子元素排列方式，在子项为单项的时候使用（单行）

1. 概述正则表达式用于定义一些字符串的规则。计算机可以根据正则表达式，来检测一个字符串是否符合规则。（比如邮件的规则）2. 使用2.1 创建正则表达式对象构造函数创建语法： var reg = new RegExp("正则表达式", "匹配模式"); 字面量创建语法： var 变量 = /正则表达式/匹配模式参数说明：（1）正则表达式：使用typeof检查正则对象，会返回object（2）匹配模式：① i → 忽略大小写；② g → 全局匹配模式，即查找所有匹配而非在找到第一个匹配后停止

1. 本地存储特性（1）数据存储在用户浏览器中（2）设置、读取方便、甚至页面刷新不丢失数据（3）容量较大。sessionStorage越5M，localStorage越20M（4）只能存储字符串，可以将对象 JSON.stringify() 编码后存储2. window.sessionStorage（1）生命周期为关闭浏览器窗口（2）在同一个窗口下数据可以共享（3）以键值对形式存储使用2.1 存储数据sessionStorage.setItem(key, value)2.2 获取数据

一、元素偏移量offset系列概述： offset系列相关属性可以动态得到该元素的位置（偏移）、大小等。offset系列常用属性（1）element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。（2）element.offsetTop：返回元素相对于带有定位的父元素上方的偏移。（3）element.offsetLeft：返回元素相对于带有定位的父元素左边框的偏移。（4）element.offsetWidth：返回元素自身包括padding、边框、

一、BOM概述BOM： BOM即浏览器对象模型，它是独立于内容而与浏览器窗口交互的对象，其核心对象的window。构成： window→document、location、navigation、screen、historyDOMBOM文档对象模型浏览器对象模型把文档当做一个对象来看待把浏览器当做一个对象来看待顶级对象是document顶级对象是window主要学习操作页面元素主要学习浏览器窗口交互的一些对象W3C标准规范浏览器厂商在各自浏览器上定义

一、DOM操作1. 创建（1）documoent.write（2）innerHTML（3）createElement2. 增（1）appendChild()（2）insertBefore()3. 删（1）removeChild()4. 改（1）普通元素属性：src、href、title…（2）普通元素内容：innerHTML、innerText（3）表单样式：value、type、disabled（4）元素样式：style、className5. 查（1）getElement

问题概述：在使用element-ui的el-upload上传文件时，要显示缩略图，但是官方给出的显示缩略图模板是picture-card类型的，如果要上传单个文件或图片并显示缩略图，我暂时还没有觉接办法，所以只能模仿官方给出的图片列表类型自定义单个图片上传样式。<!-- 缩略图显示--><div class="img-show" v-if="imgUrl"> <img :src="imgUrl" class="avatar"> <span class="

注意看on-change事件，默认为：<el-upload action="#"class="uploader-avatar" list-type="picture":auto-upload="false" :show-file-list="false":on-change="imgPreview">因为on-change事件本身就带有file和fileList参数，此时如果要携带新的参数item，应修改为如下的模样：修改后：<el-upload action="#

1. 2D转换1.1 移动 translate类似于定位。可以改变元素在页面的位置。语法：transform: translate(x,y) | translateX(n) | translateY(n)注：translate定义移动时沿着X和Y轴移动元素。通过该属性移动元素不会影响到其他元素的位置！！！translate中的百分比单位是相对于自身元素的 translate:(50%,50%)。该属性对行内标签没有效果...

步骤强制一行内显示文本：white-space:nowrap超出的部分隐藏：overflow:hidden文字用省略号替代超出的部分：text-overflow:ellipsis效果图：说明white-space定义：设置对象内文本显示方式。通常我们使用强制一行内显示内容。语法：white-space:normal|nowrap元素值说明normal默认处理方式nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。text

1. display语法：display:none|block元素值说明none隐藏对象block除了转换为块级元素外，同时还有 显示元素 的意思特点：隐藏之后，不再保留位置。2. visibility语法：visibility:visible|hidden元素值说明visibility对象可视hidden对象隐藏特点：隐藏之后，保留原有位置。3. overflow说明：设置当对象的内容超过其指定高度即宽度时内容该如何显示

问题概述对于两个嵌套关系的块级元素，如果父元素没有设置上内边距或边框，那么父元素的上外边距会与子元素的上外边距发生合并，合并之后的外边距为两者中的较大者。因此，当给子元素设置外边距时，会同时导致父元素一起往下偏移，引发塌陷问题。问题解决方法1：为父元素定义上边框方法2：为父元素定义上内边距方法3：为父元素添加overflow:hidden...

1. 为什么要清除浮动？一般情况下，我们会设置父级的div高度为0，使其子级div的高度将其撑开。但是当我们设置的子级div浮动时，子级div便脱离于标准流之外，此时会导致父级div的高度依旧是0，影响后面元素的排列，因此需要清除浮动！2. 清除浮动的方法2.1 额外标签法做法：在最后一个浮动元素之后加上一个空标签比如：\<div>\</div>,然后设置其样式为：clear:both语法：clear:left|right|both属性值说明left

1. 如何添加图片？使用样式：background-image:url(图片路径)这样，对应的图片就会默认平铺在指定的元素上了！！！2. 背景重复？默认情况下，background-image属性会平铺在元素上，即横向和纵向都会重复图像。因此，可以使用如下样式设置背景重复：使用样式：background-repeat:repeat|no-repeat|repeat-x|repeat-y属性值描述repeat默认值。表示图像平铺整个元素no-repeat不平铺，即背

CSS显示模式属性名：display值：block inline inline-block块元素标识：block代表：<div>特点：独占一行宽度、高度、内外边距可以设置是一个容器及盒子，在里面可以放行元素或块元素行元素标识：inline代表：<span> <a>特点：一行可以有多个宽度、高度直接设置无效默认宽度为其本身的内容宽度在里面只能容纳文本或行元素行内块元素标识：inline-block代表：<img>