工作学习总结
文章平均质量分 66
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
vant4中如何修改Dialog弹框内容的字体大小
最近在开发一个移动端的需求,用的UI组件库是vant4。简单地总结一下,如何修改Dialog弹框内容的字体大小。这样 message 内容中的字体大小就是16px了。那么如何修改message中的字体大小呢?我们先看一下Dialog弹框简单的使用。原创 2024-03-14 14:57:32 · 910 阅读 · 0 评论 -
安装 node-sass 失败原因及解决办法汇总
首先要知道的是,安装 node-sass 时在 node scripts/install.js 这个阶段会从 github.com 上下载一个 .node 文件,大部分安装不成功的原因都源自这里,因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com 上面,而这个网址在国内总是"网络不稳定",所以我们需要通过第三方服务器下载这个文件。因为Node 8 不能装 node-sass 3.x 这是肯定的(Node 7才对应 3.x),所以得装 node-sass 4.x。转载 2024-03-03 20:55:42 · 4889 阅读 · 0 评论 -
使用pdf.js预览pdf遇到的问题总结
大于1M的pdf资源请求会很慢,所以在第二次请求、第三次请求等这些结果返回之后,第一次请求的结果还没有返回回来,(第二次请求、第三次请求等请求响应的结果是权限错误,因为iobs链接已经用了不止一次),因为第二次请求、第三次请求等请求失败,所以第一次请求的响应结果也是请求报错(因为服务器认为)但是苹果手机不是这样的,没有设置强缓存(苹果系统的安全机制是这样的,可以手动设置),所以分片加载会请求多次,第一次请求正常,后面的请求会出现请求报错的情况。好,现在已经修改完,大于1M的数据也可以被成功预览。原创 2024-03-03 17:09:57 · 2055 阅读 · 0 评论 -
elementPlus实现动态表格单元格合并span-method方法总结
最近在做PC端需求的时候,需要把首列中相邻的同名称单元格合并。我看了一下elementPlus官网中的table表格,span-method可以实现单元格合并。我们先看一下官网的例子:多行或多列共用一个数据时,可以合并行或列。通过给 table 传入span-method方法可以实现合并行或列, 方法的参数是一个对象,里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan,原创 2024-02-06 10:55:21 · 3467 阅读 · 0 评论 -
关于数组中相邻元素的合并处理方法总结
当然这只是用简单的数据演示了一下,事实上数据中有好几个相邻的元素的name值都相同,所以这就需要我们封装一个健壮的函数来满足需求。这两天在开发需求的过程中,需要处理一个数组数据,对相邻元素的具有相同的点合并元素里面的数组。方法的理解,其次是需要对每次循环的数组元素做处理,然后再添加到result中。中的list合并到一块,并且删除了第二个。这个方法中的关键点,首先在于对。原创 2024-01-30 17:52:38 · 620 阅读 · 0 评论 -
深入理解Base64字符串编码知识
Base64是基于64个可打印字符来表示二进制数据的编解码方式。正因为可编解码,所以它主要的作用不在于安全性,而在于让内容能在各个网关间无错的传输。这64个可打印字符包括大写字母A-Z、小写字母a-z、数字0-9共62个字符,再加上另外2个 + 和 /。Base64是一种索引编码,每个字符都对应一个索引,具体的关系图,如下:这也是名称中64的由来。最后再来总结一下Base64的特点:将二进制数据转为字符串(ASCII码),方便数据传输。浏览器能直接展示Base64编码图片,减少请求。转载 2023-12-07 10:38:53 · 218 阅读 · 0 评论 -
JavaScript String.fromCharCode() 函数详解
String.fromCharCode()函数属于静态函数,而且只能够通过全局String对象进行调用,不能通过String对象的实例进行调用。String.fromCharCode()方法的返回值为String类型,其返回值为Unicode数值所表示的字符串。该函数属于String对象,所有主流浏览器均支持该函数。如果没有传入任何参数,则返回空字符串""。字符值中返回一个字符串。转载 2023-12-07 09:52:23 · 848 阅读 · 0 评论 -
详解前端二进制:Blob、File、FileReader、ArrayBuffer、TypeArray、DataView
当前,前端对二进制数据有许多的API可以使用,这丰富了前端对文件数据的处理能力,有了这些能力,就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识,如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。转载 2023-12-06 18:31:26 · 478 阅读 · 0 评论 -
vue3中effectScope()、getCurrentScope()、onScopeDispose()简介
创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理。说明:这是一个回调事件。当执行getCurrentScope().stop()时,或者组件注销时触发。通俗的说,它可以把计算属性、监听器放在一个函数内管理,然后统一停止监听。比如一个页面中存在多个管家,而我们不想一个个取消每个管家的监听,可以通过此方式。allScope.stop() // 取消所有侦听管家监听。说明:获取当前侦听管家实例。转载 2023-12-04 18:31:39 · 627 阅读 · 0 评论 -
请求pdf文件流并进行预览
最近做了一个需求就是预览pdf等文件,不过后端返回的是一个文件流,需要前端做一定地处理才行。我们来看一下具体的实现方式。原创 2023-11-24 18:36:31 · 1317 阅读 · 0 评论 -
使用pdf.js插件预览pdf文件时怎么去掉pdf文件的浏览记录
然后把这一行代码注释掉就可以了,就实现了清除缓存或者浏览记录的目的。最近在开发pdf文件预览相关的需求,我用的插件是pdf.js。每次预览一个pdf文件时,原创 2023-11-23 16:58:21 · 404 阅读 · 0 评论 -
pdf.js插件怎么控制工具栏的显示与隐藏
最近做了一个需求,需要实现pdf文件的预览,但是只是提供预览功能,不需要展示相关的工具栏,所以需要把工具栏隐藏掉。我用的插件是pdf.js。原创 2023-11-23 16:41:10 · 1700 阅读 · 0 评论 -
CSDN自动生成文章目录
看到这个“文章目录后”,我高兴了,这玩意还挺好的,看着目标大纲就清晰文章要讲得啥了。而且更绝的是这个还有一个定位功能,点击到文章目录的那个目录就会自动定位到所写内容的目录前面。这么方便,必须要整一个。转载 2023-11-23 16:04:21 · 74 阅读 · 0 评论 -
vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。pdf.js主要包含两个库文件pdf.js:负责API解析pdf.worker.js:负责核心解析。转载 2023-11-23 15:59:29 · 2079 阅读 · 0 评论 -
vue3中实现txt格式文件预览(纯前端)
在平常的工作当中,已经会遇到文件上传后需要预览的功能,比如docx,doc,xls,xlsx,ppt,pdf,txt,图片,视频等格式的文件,其实也可以让后端人员写接口解析,本着不想麻烦别人的心态,能自己解决的绝不麻烦别人,这里简单介绍txt,docx,xlsx,mp4文件预览。转载 2023-11-20 17:43:35 · 2126 阅读 · 0 评论 -
vue3.x实现word文件的预览
Mammoth旨在转换 .docx 文档(例如由 Microsoft Word 创建的文档),并将其转换为 HTML。Mammoth的目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。比如,Mammoth会将应用标题 1 样式的任何段落转换为 h1 元素,而不是尝试完全复制标题的样式(字体,文本大小,颜色等)。转载 2023-11-20 17:05:57 · 1095 阅读 · 0 评论 -
动态加载js文件的方法封装
总结一下,动态加载js文件的方法封装。原创 2023-11-18 16:53:14 · 101 阅读 · 0 评论 -
如何使用JavaScript实现纯前端读取和导出excel文件
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等,有这个功能需要的可以使用pro版,好像是要收费的,因为官网没看到下载地址。转载 2023-11-18 16:51:15 · 4875 阅读 · 0 评论 -
vue3.0中实现excel文件的预览
数组类型表示一个 8 位无符号整型数组,创建时内容被初始化为 0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。是由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持。每种格式的文件想要实现预览的效果需要使用对应的插件,如果要实现。静态方法返回由指定的 UTF-16 码元序列创建的字符串。最近开发了一个需求,要求实现预览图片、pdf、格式文件的预览,要用到哪种插件呢?、word、txt等格式的文件;原创 2023-11-17 16:24:31 · 2042 阅读 · 2 评论 -
解决vue3中设置的v-html的代码样式不生效的问题
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局。最近在做一个需求,遇到这样一个问题,接口返回的一段。这句话非常清楚地表明了没有生效的原因。内容的样式没有生效,这是什么情况?那我们怎么设置让它生效呢?渲染到页面的时候,发现在。原创 2023-11-17 10:48:25 · 2244 阅读 · 0 评论 -
vue3.x中父组件添加自定义参数后,如何获取子组件$emit传递过来的参数
之前写过一篇文章,现在已经进入vue3.x开发的时代了,那么vue3.x中父组件添加自定义参数后,如何获取子组件$emit传递过来的参数?原创 2023-11-16 16:24:36 · 646 阅读 · 0 评论 -
element-plus中图片预览插件源码改动
虽然效果展示出来了,但是有些方面还是不能满足我们的需求,比如,预览图在一个固定的区域内,但是因为有鼠标滚轮事件,可以滚动的时候实现预览图的放大缩小,所以导致在左边的列表区域上下滚动的时候,预览图也跟着放大和缩小。但是我们项目的需求是点击按钮进入一个预览页面,直接展示预览图片,并且左边有文件名列表,点击列表中的文件名,展示这个文件名下上传的所有图片,然后进行轮播预览,同时在大图预览下面有对应的缩略图轮播,大图预览轮播和缩略图轮播形成联动效果,大图轮播,下面缩略图也跟着轮播。好了,改完源码,满足需求了。原创 2023-11-16 14:05:36 · 879 阅读 · 0 评论 -
使用pdf.js预览pdf文件时如何兼容chrome66版本
最新的插件使用的是es6语法有浏览器兼容性问题,不兼容QQ浏览器、跟别说IE 了。最近在做一个需求,在PC端实现预览pdf文件的功能,但是要最低兼容chrome的66版本,因为公司用的chrome浏览器最低版本就是66版本。这个版本试了一下,发现在chrome90以上的版本是可以的,但是在更低版本就会有各种各样的问题,比如不展示或者展示不全,又或者报错等。插件下载地址:链接:https://pan.baidu.com/s/1uUGFuPJ_RXZx3lnQKr-M_g。,都是已经构建好的。原创 2023-10-16 16:16:36 · 2412 阅读 · 6 评论 -
vite进行打包时如何把某个静态文件原封不动地拷贝到打包后的文件中
引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。从代码中可以看到pdfjs这个文件里面是存放pdf.js插件的文件夹,然后这个文件夹放在static文件夹下面,是这样的逻辑结构,├── .env.production # 生产环境打包配置。├── .env.sit # sit环境打包配置。├── .env.uat # uat环境打包配置。├── vite.config.js # 打包配置。原创 2023-10-13 16:13:19 · 2543 阅读 · 0 评论 -
响应头Content-disposition的作用及用法
我们在用做文件下载时,经常会用到响应头Content-disposition来设置文件下载对话框。转载 2023-10-09 17:17:30 · 2270 阅读 · 0 评论 -
vben-admin中渲染table表格时怎么处理不同的数据结构
最近在用vben admin开发后台管理系统,vben admin这个后管端框架封装的非常细,颗粒度非常细,如果了解里面的组件或者api用法,那开发起来非常快。如果不了解,那就非常痛苦了,目前关于vben admin这块的开发问题的博客很少,所以有的问题很难查到。我经历了这样的过程,于是就把在开发中遇到的问题总结下来,希望让能用到的同学少走一点弯路。原创 2023-09-11 18:00:38 · 1120 阅读 · 3 评论 -
前端工程化解决方案
前端工程化是将软件工程相关的方法和思想应用到前端开发中,从而提升前端开发效率、提高产品质量、降低开发难度、减少公司成本的方法和工具。前端工程化贯穿整个前端项目各个阶段,包括代码规范、流程规范、分支管理、程序开发、前后端联调、自动化测试、应用构建、系统部署和监控、运维等。前端工程化是前端开发的趋势,它可以提高开发效率、降低成本、提高代码质量。然而,在实施前端工程化时需要根据项目实际情况进行定制化选型,合理选择工具和框架。优化和测试是工程化中不可忽视的部分,它们对于提升应用性能和稳定性至关重要。转载 2023-08-25 17:16:13 · 112 阅读 · 0 评论 -
在上传前用JavaScript压缩图片
我们已经学会了如何使用 canvas 和 DataTransfer 来设置一个不起眼的小脚本,帮助我们在上传前压缩图片。该脚本将使我们的用户更容易上传图片。当然,我们还有很多需要改进的地方,例如,我们可以调整图像大小以适应最大边界框。将图像裁剪成一定的长宽比。更好地处理错误输入并显示合适的错误信息。确保我们能处理 Safari 内存问题。如果我们需要一个更强大的解决方案,我们可以使用 FilePond[3] 来处理文件上传,它可以调整图像大小、压缩等。转载 2023-08-18 16:04:10 · 236 阅读 · 0 评论 -
Nginx反向代理技巧
简单的说就是A需要向C发送请求,但是C不认识A自然是不愿意的,但是A认识BA向B发送请求,可是B也不会返回什么东西但是他认识可以返回请求C,那么B再次向C发送请求,C看在B的面子上给B返回请求了,B再给A返回请求。。。。具体到开发中就是,前端需要向这个域名调用接口,但是前端开发环境启动项目是服务,直接调用接口会跨域。所以前端需要做一层代理。从直接请求到域名的接口,这对于前端来说应该是无感知的。反向代理隐藏了真实的服务端;切换环境debug。转载 2023-08-17 17:55:54 · 153 阅读 · 0 评论 -
微信公众号中如何获取openid
最近帮别人做了一个微信公众号,我会把做的过程分成几篇文章,都发出来,主要是包括里面遇到的问题,如果解决的等等。我们先来看看遇到的第一个点:在微信公众号中如何获取openid,这个在微信官方文档上都有说明的。原创 2023-08-14 10:17:13 · 6686 阅读 · 0 评论 -
最近遇到的两个小问题总结:git问题和node问题
找到git安装路径中git-core的位置,如:D:\Program Files\Git\libexec\git-core(有可能没有git-core,没有的话我也在环境变量中加上了)注:“D:\Program Files\Git"是安装路径,可能与你的安装路径不一样,要按照你自己的路径替换"D:\Program Files\Git”然后再在其他文件下面试一下(git --version) ,如果是一样的话,并且确定git已经安装的情况下,说明没有给git配置全局变量。的环境变量,发现都是对的。原创 2023-08-09 17:11:03 · 612 阅读 · 0 评论 -
PC端el-table合并单元格总结
之前做管理系统的时候有这样一个需求,那就是合并首列的单元格(如果名字相同就合并),刚开始代码写的很多,经过优化之后,代码精简了大约100多行,所以就想着把这次优化的过程总结一下。可以看到这个合并单元格的方法有很多行代码,但是我们可以总结一下规律并优化一下代码,达到精简代码的目的。精简后的代码如下(主要是spanMethod这个方法)可以看到代码精简了很多,原创 2023-08-01 14:43:31 · 557 阅读 · 0 评论 -
文件上传、下载的总结
如果要实现自定义上传操作(自己写函数,并定义上传接口),需要给el-upload标签加上http-request属性,并赋予它对应的方法;原创 2023-07-31 11:05:14 · 315 阅读 · 0 评论 -
vue3中获取ref元素的几种方式总结
最近开发了一个PC端的新项目,其中有一个这样的需求,点击表单中已上传的图片(这一栏中可以上传多张图片),进行预览时,会出现一个轮播图的效果,显示当前点击的图片,点击左右滑动,可以预览上一张或者下一张。因为要实现点击哪一张,就显示哪一张的效果,所以在轮播图中需要给它设置当前的图片的name,这样才会展示当前图片,这个时候就用到了ref来获取轮播图的元素。原创 2023-07-05 16:35:41 · 11660 阅读 · 0 评论 -
axios拦截封装,get、post二次封装
最近开发了一个PC端的新项目,从0到1,所以对基础的一些配置要进行封装,例如axios,我为什么要写这篇文章记录呢,是因为我在进行get请求封装的时候犯了一个错误(request.js(axios的封装放置的文件)原创 2023-07-05 15:39:27 · 485 阅读 · 0 评论 -
关于Vite项目打包后浏览器兼容性问题的解决方案
此时你的大脑可能跟页面一样也是一片空白,但是不要慌,我们先分析一下产生这个问题的可能的原因:那些版本较低的浏览器不支持ES6的语法和新API,而Babel默认只转换新的JavaScript句法,不转换新的API,比如Proxy、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。在本次的案例中,我们重写了Vant组件的部分变量,并全局引入了。在打开包含这些变量的页面时,按需加载插件此时才会加载Vant的样式文件,我们在全局重写的变量又被重写了,因此重写的全局变量没有生效。转载 2023-07-05 15:00:15 · 1919 阅读 · 2 评论 -
vue3.0+vite项目如何解决低版本浏览器兼容性
最近开发了一个PC端的新项目,这个项目要嵌入到之前一个老的后台管理系统里面。因为客户使用的谷歌浏览器版本比较低,又不愿意做升级处理,所以只能由我们来做低版本浏览器的兼容性处理(无奈,有些新技术想用又不能用)。所以我总结一下vue3.0+vite项目的低版本浏览器的兼容性处理。原创 2023-07-05 14:51:27 · 8507 阅读 · 0 评论 -
9种常见的前端跨域解决方案(详解)
首先声明一点,跨域是浏览器拦截的行为,请求已经发送到后端,后端返回的响应数据被浏览器拦截住了,这就是跨域的流程。在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。转载 2023-06-05 14:01:03 · 8796 阅读 · 1 评论 -
微信分享只有链接没有图标和标题正文的问题分析
出现上述问题的原因是微信规则的问题1、用链接的方式打开页面 然后分享只会出现当前页面链接不会出现图文;2、通过带图标的分享打开再次分享就是带图标标题的了;3、可以用二维码或者微信菜单的方式打开,分享一切正常。原创 2023-05-31 10:05:16 · 4608 阅读 · 0 评论 -
如果100个请求,你怎么用Promise去控制并发?
现在面试过程当中 ,手写题必然是少不了的,其中碰到比较多的无非就是当属 请求并发控制了。现在基本上前端项目都是通过axios来实现异步请求的封装,因此这其实是考你对Promise以及异步编程的理解了。转载 2023-04-24 14:37:32 · 276 阅读 · 0 评论