this_zq的博客

本文介绍了在Vue3中实现高性能PDF预览器的可行性方案及实践过程。作者首先通过任务管理器发现PDF放大至400%以上时内存占用飙升的问题，随后采用pdfjs-dist5.2.133插件进行优化。文章详细展示了实现效果（支持页面跳转、缩放20%-1000%、缩略图等功能），并逐步讲解实现过程：从初步引入项目、下载pdfjs-dist离线包，到兼容老版本设备（通过新老设备判断切换不同版本），最终打造出贴合业务场景的PDF预览器。文中还提供了在线预览地址和GitHub源码链接，方便读者参考实践。

在实现PDF预览功能时，使用pdfjs-dist插件遇到了报错“file origin does not match viewer's”。该错误通常与跨域校验有关。通过检查PDF文件的URL，确认其可以直接在浏览器中下载后，发现问题的根源在于pdfjs-dist源码中的跨域校验逻辑。通过注释掉相关校验代码，成功解决了该问题。此外，提供了完整的pdfjs-dist 5.x版本的引用代码，并展示了如何在Vue项目中使用iframe嵌入PDF预览器。最终，PDF文件能够正常展示，问题得以解决。

Vue中的slot 是一种用于组件内容分发的技术。它允许父组件向子组件传递任意内容，根据插槽的位置显示在任意位置，从而使组件更加灵活和可组合。作用： 增加了组件的复用性，同时也可以让代码结构更清晰，利于团队协作和组件库的开发。

最近DeepSeek火了起来，各个媒体都在宣传，那DeekSeek到底是个啥？从程序员角度来看：DeepSeek一个人工智能助手，可以帮助我们解决代码知识点疑问，以及某个晦涩难懂的知识点问题，处理生活中的一些文本信息问题等。其实这些能力早在数年前ChatGPT也已经具备了，那么为什么最近DeepSeek这么火呢？一个原因就是因为它是国产的，那必须得支持。还有一个原因就是它实惠呀，便宜！目测目前比ChatGPT要便宜了近10倍不止吧~ 咱能用得起了…… 在价格下降的同时，表现的能力也是越来越聪明。

最近写项目遇到个奇怪的事，Vite 默认端口冲突的问题在多人协作和多项目运行的场景中非常常见。传统的手动解决方案需要频繁调整配置，显得麻烦且低效。

给定两个二进制字符串a和b，需要返回它们的和，结果以二进制字符串形式给出。输入: a = “11”, b = “1” 输出: “100”输入: a = “1010”, b = “1011” 输出: “10101”a和b仅包含字符'0'和'1'如果字符串不是"0"，则不会有前导零。

最近在使用vben admin项目迁移时，从一个文件夹复制到另一个文件夹运行不起来，排查了一天，终于把问题排查出来了，特地记录一下，便于自己看也便于大家看。

我们都知道async、await是用来将“同步函数变成异步函数，可以同步获取到里面异步函数的返回值”的，比如我们在请求一个接口的时候，这个接口的返回值是一个异步的，那我们就可以用await将这个异步接口返回变成同步，使我们可以同步的获取到接口的返回值，然后在紧接着的下文中就可以直接用这个接口的返回值。

element plus的tag标签组件里面内容过长时，把页面都撑开了，不能自动换行，然后解决方式为....

今天在写代码时，一时觉得代码里面有一些图标，光标移到那里代码又显示处理了，这样会使那行代码忽长忽短，看起来很变扭，着实难受。

最近遇到个需求，需要基于vue3+element plus的upload组件回显图片，通常我们是通过后端直接返回的url来回显就行了，而且在element plus也给出了示例：不过，o_O，我们下面将要以base64的形式来填充，其实也很简单，自己构造一个这样的对象就行了，url里面放我们base64字符串，然后其他的造成即可，下面请看我的实现样例：将图片列表渲染到组件里重点就是替换上面fileList就可。ok啦。

然后有一点，最好不要混用，不然会有未知的错误，至少我在单一的情况只用一种来管理还是没有遇到啥错误的。它是一个成熟、广泛使用的工具，有着大量的开源包。平时在项目开发中，经常用到npm、pnpm、yarn这些来安装包，但是它们之间到底有什么区别呢，一直没太搞明白。我只知道他们都是可以从npm官网上下载包，安装完包咱们就可以写代码了，其他的不觉明历，所以认为需要总结下。是一种较新的包管理工具，旨在解决npm中的依赖项重复安装的问题。是由Facebook提供的包管理工具，旨在提高性能和安全性。

最近在写代码时，使用js方法处理字符串与数字，遇到了一些bug或者是在es6方法使用上耽误了过多的调试时间，在此记录一下，加深一下印象。

这里主要说说语音播报的部分。本来觉得用浏览器自带的API来实现直接写一句话就ok了，但是没想到居然有一个bug。那就是这条语音有时候能播报，有时候就没有声音了？最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。* @param msg 播报的信息。* @param msg 播报的信息。//#region 语音播报封装。// 初次播报使用模拟按钮触发。'哈哈哈哈哈，这是声音~'// 添加点击事件处理程序。// 模拟用户点击事件。

如何使用前端css代码去掉百度地图左下角的图标写在前面：本文为百度地图开发系列文章之一，前期回顾：webGIS，基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标（本篇就是）以上对应视频教程（博客与视频前面的序号是一一对应的）：百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！前端css单位小结：vh、vw、百分比、rem、px、计算属性calc1 vh视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应。一般给css div 的 height赋值用。2 vw与vh相对的，视口的宽度，同理，如果.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本文将使用的技术栈为：React HooksEcharsreact 官网：https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapperEChars官网：https://echarts.apache.org/zh/tu.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！最近公司在做一个新的项目，与之前大部分都是用ant design组件化开发相比，需要手动画页面的地方较多（这里的手动指的是用div+css布局自己画前端页面，或者自定义antd的样式），花费了老多的时间。所以特地在本阶段做一个小结，来记录如何可以更高效的写前端页面。在目前阶段看来，写一个完整的前端页面.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续经过今天的不断努力终于获取到了地图位置坐标的逆向解析地址！直接把下面这个链接赋值到浏览器就可以得到返回值https://api.map.baidu.com/reverse_geocoding/v3/?ak=GXn1gkhgbbWet55NCy.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！基于百度地图api获取某一点的详细信息 逆向解析地址首先上图，就是我们想要实现的效果：本章您将能学到：使用百度地图api动态获取到地图上某一点的中文地址详细信息与对应的坐标轴信息。开发所用到的语言：Html、Css、Javascript。 本篇将直接拷贝在Html文件里面，直接打开即可运行。参考：全.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！通常要运行一个前端项目操作流程为：npm install （用于安装库，可以理解为初试化用的）npm start （启动项目）1、 上面这两个为我们理想话的安装，实际上会遇到各种意想不到的bug，比如网络原因，这个时候我们要切换npm 的安装源：参考：npm切换默认源 https://www..

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！话不多说，如封面图。就是这个错误，一直不断地往上飙升，甚至涨到了好几千个bug。今天特地把它记录一下。在这个上千级的bug中，使用的技术栈是react，实现的功能为百度地图的渲染。但是， bug的主要原因不在上面。 是css的一个基础，继承高度，首先我给子组件一个100%的高度，给了父组件一个定高，但.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！前言本篇目标在于先简单了解mock.js，然后可以简单使用，运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么？官网： http://mockjs.com/官方简介：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本章将通过从修改ant design 的 Input 组件默认样式着手，讲解如何自定义自己的样式，以达到举一反三，可以修改任意ant design的组件样式！1 自定义样式效果图预览没在身边，后期补。2 方法1 直接用内联样式修改直接用在标签里面写style={{…}}，括号里面写上我们想要的样.

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！let & constlet与const都是块级作用域，推荐使用let和const，而不是var；不同点：let是定义的变量可以重新赋值，const定义的变量不可以重新赋值，所以一般我们定义的变量值为固定的时使用const。let arr = [];const today = 'Frid.

写在前面：本文为百度地图开发系列文章之一，前期回顾：webGIS，基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点、线、面 | Javascript（本篇讲解）百度地图开发系列之个性化地图使用的2种方法以上对应视频教程（博客与视频前面的序号是一一对应的）：百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端网站：zhangqiang.hk.cn欢迎加入博主的前端

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本篇github源码地址： https://github.com/front-end-study-GoGoGo/webGIS-basic-BMapGL1 先上运行效果图2 介绍随着前端技术的不断发展，WebGIS普及度也越来越广，本篇将主要讲解基于百度地图JavaScript API GL v1.0.

(https://juejin.cn/post/6987962113788493831)写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！在日常开发中，获取时间的需求是必不可少的，可以说是经常出现，这不，近段时间接触了几个项目里面就有好几处出现了时间获取的需求。下面本文将以react+antd为技术栈，时间插件主要采用moment插件二次封装，展现一个封

写在前面：本文作为本人学习总结之用，同时分享给大家，如果觉得这些内容有对你也有用的话，就请点个赞吧~ 谢谢~因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！个人前端博客网站：https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：706947563（点击即可直接进，来自qq官方的快捷代码），专注前端开发，共同学习进步！本章你将能学到：结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。这几个小知识点，也许我们在日常中，经常

文章目录前言一、Mock.js是什么？二、如何使用Mock.js1.引入库2.写数据3.发送请求总结前言本篇目标在于先简单了解mock.js，然后可以简单使用，运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么？官网： http://mockjs.com/官方简介：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTM

</head><body><h2>JavaScript Math.random()</h2><p>点击按钮, getRndInteger(min, max) 会返回 0（包含）到 3（包含）到数字:</p><button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,3)">点我</button><

let obj={}; let x='a'; let y='b'; obj[`${x}`]='aaaa'; obj[`${y}`]='bbbb'; console.log("obj:",obj) let config_2=`{"site":{"logo": "${x}","title": "${y}","floor": "${obj[x]"}}`; console.log("config_2:",config_2);输出如下所示：动态赋值里面的变量主要是通过.

let x='q'; let y=`x${x}`;//模板字符串 console.log("y:",y); /* 解释：``这个符号就是模板字符串特有的，可以把他看做就是字符串的双引号“”， 此刻他就是一个字符串，唯一不同的是，我们可以在里面加入变量，${x}这 样，里面x可以是我们任意的变量，数组的某个值、对象的某个值，都可以。而 只要不是用${}包裹的都是普通的字符，比如那个外面的那个x。 */输出结果：...

JSON.parse 函数将 JavaScript 对象表示法 (JSON) 字符串转换为对象 let strJson= '{"name":"唐三","age":18,"University":"史莱克学院"}' //字符串 console.log("strJson:",strJson); console.log("JSON.parse(strJson):",JSON.parse(strJson));//json字符串转对象输出结果：JSON.stringify()函数将 J.

如下图所示，我们将echars 图表的横轴刻度标签旋转个角度，主要通过rotate 这个属性。rotate 的解释 ：刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90度。axisLabel: { show: true, interval: 0, rotate:90, }官网教程：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate..