前端生成使用 依赖 xlsximport * as XLSX from 'xlsx';const jsonData = [ {"Name": "Alice", "Age": 30, "City": "New York"}, {"Name": "Bob", "Age": 25, "City": "Los Angeles"}, {"Name": "Charlie", "Age": 3...阅读全文

resize 事件通常用于监听窗口大小的变化，而不是 div 元素的大小变化。不过，你可以使用 ResizeObserver API 来监听 div 元素的大小变化。下面是一个简单的示例：!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, i...阅读全文

兼容性2009 年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局标 1 仅支持旧的 flexbox 规范，不支持包装。标 2 仅支持 2012 语法标 3 不支持 flex-wrap，flex-flow 或 align-content 属性标 4 部分支持是由于存在大量错误（参见已知问题）概念Flex 是 Flexible Box 的缩写，意为"弹性布...阅读全文

什么是渐进式 Web 应用渐进式 Web 应用首先是一种应用，它根据设备的支持情况来提供更多功能，提供离线能力，推送通知，甚至原生应用的外观和速度，以及对资源进行本地缓存。渐进式 Web 应用是一个网站，它使用了某些开发技术，使其体验比普通针对移动优化的网站体验更好。它使用起来就像是在使用一个原生应用一样渐进式 Web 应用可能是一个不清晰的术语，而更好的定义是：它们是一种 Web 应用，利用现代...阅读全文

先说说 viewBox 是干嘛的，就是按比例缩放视图的。用图形来表示svg width="300" height="200" style="border:1px solid #ddd" rect width="80" height="70" style="fill:#BDC9FF"/rect/svg 加上 viewBox="0,0,80,70"svg width="300" height="2...阅读全文

WEB 的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现一、GIF 动画通常咱们社交聊天的一些动态表情，大多都是 gif 动画。GIF(Graphics Interchange Format)的原义是“图像互换格式”，GIF 文件的数据，是一种基于 LZW 算法的连续色调的无损压缩格式。其压缩率一般在 50%左右，它不属于任何应用程序。GI...阅读全文

初次接触 css3 渐变是在很早以前了，觉得这个东西很有意思哈，跟玩 PS 似的，可以做出很多华丽的东西浏览器支持情况| IE | FF | Chrome | Safari | Opera | iOS | Android | Android Chrome || ...阅读全文

复习下 css3 的动画， 都快不会写了，那会儿挺喜欢 flash 的，可惜了时代在前进。写这里就当是文档看吧浏览器支持Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。注释：Internet Explorer 9 以及更早的版本不支持 animation...阅读全文

Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。浏览器缓存也包含很多内容： HTTP 缓存、 indexDB 、 cookie 、 localstorage 等等。这里要说的是 http 缓存。使用缓存的好处减少了冗余的数据传输缓解了网络瓶颈的问题降低了对原始服务器的要求降低了距离时延术语缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状...阅读全文

Chrome 88 以及之后的版本 强制升级https ,假如你的请求的资源 有 不是http 的会强制升级到https .你的站点是 https , 你请求的是http资源 造成. 硬性的最有效最快 而不那么安全的方式 就是 在html 头部加入 :meta http-equiv="Content-Security-Policy" content="upgrade-insecure-reques...阅读全文

强制一行的情况很简单overflow:hidden;#超出的隐藏text-overflow:ellipsis;//省略号white-space:nowrap;//强制一行显示多行overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; //...阅读全文