前端探险家的博客

在项目中创建一个watermark.js文件，封自定义自定的方法，这个文件不需要修改可以直接复制粘贴使用，当然可以根据自己的水印样式需求，去修改文件中的属性设置；// 生成包含水印文本的图片方法// 创建canvas元素// 设置canvas宽度// 设置canvas高度// 获取2D绘图上下文${// 生成包含水印文本的图片方法 function generateWatermark(text , fontSize , color) {

我这里直接是CDN引入，你也可以安装后再build打包后把dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入，这个官方文档有介绍，这里就不写了，我们直接用CDN引入，虽然不在维护，但是不影响他功能以及特性的强大，还是可以正常使用；因为我写的是H5的项目，我就把luckyexcel 安装后的包直接复制到项目文件，通过script引入到html文件中；本来我是想尝试用Univer，但是我的项目是一个引入vue2的H5项目，所以只能用Luckysheet 来实现；如果想探索和了解更多点击。

PDF.js是一个JavaScript库，可在浏览器中无插件显示PDF文件，提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码，如添加翻页和搜索功能。下面会把简单时间文件预览的代码呈现出来，如果您想要进一步优化和学习PDF.js，可以打开。我这个举例的项目是一个H5，但是引入的有vue，所以写法是在H5的页面使用vue；上面代码只是简单的展示出来文件，没有实现分页，和缩放，如果需要可以自己去查询一下；如果您使用的是纯vue项目可以通过npm/pnpm/yarn安装依赖。

有一些博主，安装推荐的是tinymce@5.1.0，最后会遇到报错，import “tinymce/icons/default” 路径找不到，故需要升级tinymce版本，所以我这里直接安装的是tinymce@5.10.9；在node_modules中tinymce依赖包，找到其下面的skins文件下，直接复制，粘贴到src/assets/tinymce目录下；查询资料的时候遇到一篇文章，是一些扩展插件，可用可不用，了解一下就行，文章里有详细的插件介绍，安装命令和使用方法；想了解的可以自己查看；

最近，做公司一个老项目（jquery），有个需求是将表格中的json数据，导出为Excel文件，表格表头还是动态多层级，导出的excel样式和项目中表格一致；老项目中之前用的都是xlsx插件，我查询了一下文章，也看到过用xlsx实现多层表头下载，但是感觉比较麻烦，看到推荐使用exceljs插件比较方便；就了解一下，用在项目中得以实现；话不多说，上案例图：导出excel效果：这个案例我主要演示的是两层分组表头和样式配置的代码；如果要想仔细研究该插件，可以阅读Exceljs官方文档；

vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；

这个是自己写着玩的，利用@antv/g6自定义绘制流程图，然后保存到localstorage中，在左侧表格展示，还可以通过表格操作来查看对应的流程图以及删除；这里特别注意一下，，vue版本是2.5.x；下面我会把实现代码全部粘贴出来，不需要需改，开袋即食，放到你的项目中直接可以展示；代码中我也会加上注释，不懂的可以看注释；

我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块，有大有小的散落着，看着挺好看的；也许项目中也会涉及到显示一些关键词之类的需求，这个时候也可以用词云库（echarts-wordcloud）来实现；echarts-wordcloud是基于echarts的一个词云库，但是在echart官网中的配置相中却没有关于他的介绍，下面我们就来一起慢慢探索并能手到擒来的使用它；1.下载图片首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行。

把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！

当时听了这个需求，我就很不解，这数据都是不确定的，咋展示，如果只展示一个月的数据还可以，然后通过按钮去选择月份渲染，展示一年的数据，就有点小复杂啦；12个月，按10个项目，正常数据应该有120个，这里只有81个，就是所有有值的柱子的集合，把值为0的已经过滤掉，不显示，这样就不会炸图表中占位；图表上的数据也是自己随意mock的，由于柱子数量布丁，颜色也是随机的，这些都不要在意不要，重点是图表的实现；X轴数据那么多，还不确定，只能看卡能不能实现滑动，结果还真能，那就好办啦，1.X轴鼠标滑动或者缩放、

之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {

产品需求：后端不想写下载，导入和导出的接口，让我们前端自己实现。这里我们就可以用xlsx插件来实现，我们不多说了，先放一下实现的图片，下面我们分别把模版下载、导入和导出的代码放上来，想用的话，直接复制粘贴即可！模版下载图片导出图片：好了，下面我们就直接上代码！

写这篇文章的目的，是因为我比较懒，想把代码记录一下，方便日后使用；哈哈，如果你也需要，也可以复制粘贴啊，为了方便自己和需要的人知道怎么使用，我尽量写的详细一点，没有什么技术难点，就是简单的记录，万一能帮到需要的人呢，也是一件美事；其实也就是使用了两个插件而已，docx-preview和vue-pdf，下面我们就写一下使用方法和详细的代码；

详细的后台管理架构，项目运用了Vue2所有全家桶技术，包括Vue-Router，Vuex，mock.js，axios，Echart.js，antv-g6，tinymce，swipe等技；其中包括两个数据可视化大屏展示，用到各种各样的图表展示；

关于Vuex3状态管理的所有知识点，包括Vuex的工作原理和流程，Vuex的安装和使用，有详细代码可以参考；

实现需求：在react项目中，在满足表格头部列可以拖动改变的情况下，还要表格利用滚动条下拉来加载表格数据？如下图：**方案一：**利用react-infinite-scroll-component插件，但是表头无法固定，一旦样式固定定位写死，就无法满足拖动，如果你的表格列不需要拖动的话，可以使用，比较方便；**方案二：**先实现ant-ui表格组件的滚动，然后监控表格滚动条，快到达底部后触发加载数据接口来实现下拉加载，比较麻烦，但是表头固定，也不会破坏表头列的拖动；最后我选择了方案二，下面我就.

项目需求：react项目中，做一个可以通过鼠标拖动改变列宽的表格第一步：安装react-resizable插件npm install react-resizable --save第二步：在项目中封装Resizable组件Resizable.jsimport * as React from "react";import { Table } from "antd";import "antd/dist/antd.css"; import { Resizable } from "react-.

实践中常见的3种反模式前言【反模式1】导致缺乏沟通的“稀疏沟通”【反模式2】BFF处理过度的“Fat Front”【反模式3】 最后阶段一次性发布的“Big Bang Joint”组织问题与架构设计之间有着密切的关系前端开发的未来前言上一篇介绍了BFF相关的5个使用案例。本篇将结合笔者在实际项目中多次采用BFF的经验来说明反模式出现的原因和相应的解决方法。BFF 是一种架构模式，但并不是任何情况都适用。如果对它的优缺点了解不够透彻，就冒然采用的话，你可能会后悔。我在实际项目中多次采用了BFF，但并非所

5个实用的BFF使用案例前言API Gateway服务器端渲染（Server Side Rendering）会话管理（Session Management）上传文件WebSocket、Server Sent Events、Long Polling使用 BFF 时如何开始前言BFF 是做什么的，简单地说，API 服务器负责业务领域的逻辑部分，而 BFF 是支持用户界面的服务器。如果Web应用可以使用领域逻辑简单地创建，那么就不需要BFF。但是在微服务/API时代，前端开发越来越需要“汇总API”和“进行服

BFF超入门什么是BFF(Backends For Frontends)BFF产生的技术背景和历史背景前端工程师还是后端工程师，谁来负责？何时使用 BFF 架构模式，何时不使用BFF 案例研究-Netflix、Twitter、RecruitNetflix案例推特案例Recruit 案例什么是BFF(Backends For Frontends)顾名思义，它是前端的后端（服务器）。专门为前端而调用API，或者生成 HTML 的服务器。看到这里你可能会想，“这与传统的Web应用服务器有什么不同？”。本质上是