首页 文章 精选 留言 我的

精选列表

搜索[前端设计]，共10000篇文章
优秀的个人博客,低调大师

开源前端地图库 Leaflet 发布 1.8.0 版本

Leaflet 是一个开源的 JavaScript 库，用于构建 Web 地图应用。首次发布于 2011 年，它支持大多数移动和桌面平台，支持 HTML5 和 CSS3。其用户包括FourSquare、Pinterest和Flickr。 Leaflet发布了 v1.8.0 版本，这是一年半以来的开发成果。这是一个巨大的版本，主要集中在错误修复，主要的可靠性和可访问性的改进，清理遗留代码，以及对文档、开发工作流程和发布过程的大量改进。这是数百人的贡献的结晶，也是为未来更大的变化做准备。🍃从现在开始，发布将变得更加频繁。 Leaflet 的作者 Vladimir Agafonkin 来自乌克兰，在他开发这个版本的时候，外面的基辅正在响起空袭警报，警告说俄罗斯即将进行空袭。他希望这个版本献给乌克兰为自由和民主对抗俄罗斯入侵的斗争🇺🇦。 ⚠️ 打破向后兼容的改动 通过引入新的 TapHold 处理程序，替换传统的 Tap （#7026,@johnd0e） ，提高移动 Safari 上右键菜单事件模拟的可靠性 重新组织 DivOverlay/Popup/Tooltip api （#7540 by @johnd0e） 将Popup 相关选项从 DivOverlay 移动到Popup（#7778 by @Falke-Design） 将 Tooltip 类从leaflet-clickable 改为 leaflet-interactive（#7719 by @Falke-Design） Map.closeTooltip 现在需要一个 Layer 作为参数（#7533 by @johnd0e） 改进事件监听器的错误/参数处理（#7518 by @johnd0e） 提高非接触设备上触摸事件模拟的可靠性（DomEvent.Pointer）（#7059，#7084，#7415 by @johnd0e） 提高触摸设备上 dblclick 事件模拟的可靠性（DomEvent.DoubleTap）（#7027 by @johnd0e） 提高 disablecklickpropagation 的可靠性（#7439 by @johnd0e） 改进 Map hasLayer() 和 LayerGroup hasLayer() ，使其需要一个层作为参数（#6999 by @johnd0e） 修复 Class.include 不覆盖选项（#7756 by @johnd0e） 修正 Class.extend 以不修改源 props 对象（#6766 by @johnd0e） 改进 Browser.touch 触摸设备检测（#7029 by @johnd0e） 去除遗留的安卓hack（#7022 by @johnd0e） 允许字体通过使字体大小相对于地图容器来尊重用户的浏览器设置。（如果需要的话，你可以改变leaflet-container 上的字体大小来调整它。）（#7800，@chandu-4444） ❇️ API 变化 使 DivOverlay/Tooltip 具有交互性（#7531，#7532 by @johnd0e） 给 DivOverlay 添加 openOn，close，toggle函数 （#6639 by @johnd0e） 引入 DomEvent.off (el) 以删除所有监听器（#7125 by @johnd0e） 允许通过向 Util.formatNum/tenojson （#7100 by @johnd0e）传递 false 来防止舍入错误 添加 autoPanOnFocus 到 Marker （#8042 by @IvanSanchez） 将 referrerPolicy 添加到 TileLayer （#7945 by @natevw） 将 playsInline 添加到 VideoOverlay （#7928,@falke-Design） 添加 getCenter 到 ImageOverlay （#7848 by @Falke-Design） 当 TileLayer 加载取消时，启动一个 tileabort 事件（#6786 by @dstndstn） 在 Icon 中添加 crossOrigin（#7298 by @syedmuhammadabid） ✨ 改进 通过删除 will-change CSS 属性（#7872 by @janjaap）改善内存占用 提高图标路径检测试探法的可靠性（#7092 by @johnd0e） 通过避免 GridLayer.onAdd （#7570 by @johnd0e）中的过度更新，提高添加平铺源的性能 改进 panInside 中边缘情况的处理（#7469 by @daverapayment） 缩小标记图标 SVG （#7600 by @rala72） 允许在 TileLayer URL 中使用带空格的模板键（#7216 by @lubojr） 改进绑定到 ImageOverlay （#7306 by @IvanSanchez）的 Tooltip 行为 删除 Popup 和内容对话框之间的间隙（#7920 by @Malvoz） 如果没有图层，可以通过 Canvas 触发 mousemove 事件（#7809 by @johnd0e） 添加打印样式，以防止打印机删除控件中的背景图像（#7851 by @Malvoz） 将属性代码从 Layer 移动到 Control.Attribution （#7764 by @johnd0e） 重构 vmlCreate() ，这样它就不会将闭包暴露给 TypeError （#7279 by @darcyparker） 提高 Control.Layers 的可靠性，不依赖浏览器 android 和触摸属性（#7057 by @johnd0e） 通过不依赖浏览器的触摸检查（#7535, @johnd0e）来提高 Tooltip 的可靠性 使浏览器易于自动化测试（#7335 by @bozdoz） 在 Control.Layers 容器中用 span 替换 div，以修复 HTML 验证错误（#7914 by @tmiaa） 添加一面乌克兰国旗作为默认署名（@mourner，#8109） 更多变更请查看 https://github.com/Leaflet/Leaflet/releases/tag/v1.8.0。
2022-04-20
优秀的个人博客,低调大师

Vue中 前端实现生成 PDF 并下载

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。 1. 安装及引入 // 将页面 html 转换成图片 npm install html2canvas --save // 将图片生成 pdf npm install jspdf --save 复制代码 在项目主文件 main.js 中引入定义好的实现方法并注册 import htmlToPdf from '@/utils/htmlToPdf'; // 使用 Vue.use() 方法就会调用工具方法中的install方法 Vue.use(htmlToPdf); 复制代码 2. 封装导出 pdf 文件方法 配置详解 let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); 第一个参数： l：横向 p：纵向 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）； 第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28, 841.89]; a0 - a10 b0 - b10 c0 - c10 dl letter government-letter legal junior-legal ledger tabloid credit-card 复制代码 pdf.addPage() 在PDF文档中添加新页面，默认a4。参数如下： pdf.addImage() 将图像添加到PDF。参数如下： 删除某页 pdf let targetPage = pdf.internal.getNumberOfPages(); //获取总页 pdf.deletePage(targetPage); // 删除目标页 复制代码 保存 pdf 文档 pdf.save(`测试.pdf`); 复制代码 封装导出 pdf 文件方法（utils/htmlToPdf.js） // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载 let top = document.getElementById('pdfDom'); if (top != null) { top.scrollIntoView(); top = null; } let title = this.exportPDFtitle; html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true }).then(function (canvas) { // 获取canvas画布的宽高 let contentWidth = canvas.width; let contentHeight = canvas.height; // 一页pdf显示html页面生成的canvas高度; let pageHeight = contentWidth / 841.89 * 592.28; // 未生成pdf的html页面高度 let leftHeight = contentHeight; // 页面偏移 let position = 0; // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸） let imgWidth = 841.89; let imgHeight = 841.89 / contentWidth * contentHeight; let pageData = canvas.toDataURL('image/jpeg', 1.0); let PDF = new JsPDF('l', 'pt', 'a4'); // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度 // 当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 592.28; // 避免添加空白页 if (leftHeight > 0) { PDF.addPage(); } } } PDF.save(title + '.pdf') }) } } } 复制代码 相关组件中应用 <template> <div class="wrap" > <div id="pdfDom" style="padding: 10px;"> <el-table :data="tableData" border> <el-table-column prop="date" label="日期" width="250"></el-table-column> <el-table-column prop="name" label="姓名" width="250"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button> </div> </template> <script> export default { data() { return { exportPDFtitle: "页面导出PDF文件名", tableData: [ { date: '2016-05-06', name: '王小虎', address: '重庆市九龙坡区火炬大道' }, { date: '2016-05-07', name: '王小虎', address: '重庆市九龙坡区火炬大道' },{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '南京市江宁区将军大道' }, { date: '2016-05-07', name: '王小虎', address: '南京市江宁区将军大道' },, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '武汉市洪山区文化大道' }, { date: '2016-05-06', name: '王小虎', address: '武汉市洪山区文化大道' }, { date: '2016-05-07', name: '王小虎', address: '武汉市洪山区文化大道' }, { date: '2016-05-06', name: '王小虎', address: '南京市江宁区将军大道' }, { date: '2016-05-07', name: '王小虎', address: '武汉市洪山区文化大道' }, ] } }, methods: { btnClick(){ this.$nextTick(() => {this.getPdf();}) }, }, } </script> 复制代码 效果 待优化部分 分页时，页面内容被截断（欢迎留言讨论交流）； 不同内容，另起一页开始；思路：计算超出内容，占最后一页的高度（设定间距 = 页面高度 - 超出部分高度）。 如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激！
2021-10-08
优秀的个人博客,低调大师

前端百题—— js中的包装对象

1 背景 有一个奇怪的现象不知道大家注意过没有，字符串、数字、布尔值都能够调用属性和方法，例如： const str = '123'; console.log(typeof(str)); // string console.log(str.toString()); // 123 const num = 123; console.log(typeof(num)); // number console.log(num.toString()); // 123 const bool = true; console.log(typeof(bool)); // boolean console.log(bool.toString()); // true 复制代码 看到这个现象，大家是不是感觉很奇怪，这与我们平时的想法是相悖的，毕竟我们认为基本类型上面是不存在属性和方法的，这个时候主角包装对象就出现了。 2 包装对象 JS 的数值，布尔，字符串类型的变量，在一定条件下，也可以自动变成对象，这就是原始类型的包装对象。包装对象其实是一种特殊的引用类型，其与引用类型的主要区别在于生命周期。 一般的引用类型在使用new创建其实例时，在执行流离开当前作用域之前一直都保存在内存中； 包装类型的对象只存在该行代码的执行瞬间，然后会立即被销毁。（也意味着在运行时不能为基本类型添加属性和方法） 3 包装对象后台执行流程 基本类型中的String、Number、Boolean在调用属性和方法的时候，后台是怎样执行的呢？其实整个过程可以简化为三步： 创建一个对象类型的实例，例如字符串则创建一个String类型的实例； 调用该实例对象上的特定方法； 销毁该实例。 以字符串为例，来演示该流程： const str = 'abc'; const strNew = str.substring(0, 2); 复制代码 在运行到str.substring(0, 2)的时候其实偷偷执行了以下三步： let strObj = new String(str); const strNew = strObj.substring(0, 2); strObj = null; 复制代码 4 扩展 包装对象和同样的原始类型的值相等吗？ 不相等。因为包装对象是引用类型，原始类型是基本类型；包装对象的最大目的，首先是使得 JavaScript 的对象涵盖所有的值，其次使得原始类型的值可以方便地调用某些方法。 如何给基本类型添加属性和方法？ 在基本包装对象的原型下面添加，每个对象都有原型。 同一个字符串调用两次相同的方法其包装对象相等吗？ 不相等。调用结束后，包装对象实例会自动销毁。这意味着，下一次调用字符串的属性时，实际是调用一个新生成的对象，而不是上一次调用时生成的那个对象，这也说明了为什么不能直接给字符串、数字、布尔值添加属性和方法。 1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到 如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star： http://github.crmeb.net/u/defu 不胜感激 ！ 来自 “开源世界 ” ，链接： https://ym.baisou.ltd/post/739.html ，如需转载，请注明出处，否则将追究法律责任。 ​​​​​​
2021-06-23

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-08-21 大小: 1MB 下载: 10次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2026-09-24 大小: 189MB 下载: 9次
WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

时间: 2025-12-13 大小: 249.54MB 下载: 22次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册