杂记一(css三角形, blob文件流解析和相关api)(2020-04-21)

css三角形实现原理

• 有那么一瞬间想知道css三角形实现的原理
• 于是乎
• 在度娘里就扒拉
• 终于让我找到了

其实原理就是css的盒子边框是个梯形,当盒子被设置成可宽高为0,盒子的宽高就是border对应的相加之和,梯形上面的哪个边边就没得了,变成了三角形了

贴上三角形的代码吧

`width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 20px solid blue;
border-left: 20px solid transparent;
border-top: 20px solid transparent;`

三角形的方位只需要改变对应的border就好了

blob文件流解析

天啦噜,遇到了后端返回二进制流前端转换为文件下载的需求 之前其实是做好了的,点击一下生成本地链接,可携带token,原理是根据原生XHR请求blob格式 但是要定制错误提示改代码!!!!

这里我想注明一下blob的方法(MDN直通车)

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

Blob.stream()

返回一个能读取blob内容的 ReadableStream。

Blob.text()

返回一个promise且包含blob所有内容的UTF-8格式的 USVString

Blob.arrayBuffer()

返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer