项目中实现的一些业务需求
关注
分享
扫一扫
项目中实现的一些业务需求
Boale_H
这个作者很懒，什么都没留下…
展开
-
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览原创 2023-05-15 17:18:35 · 1259 阅读 · 0 评论 -
前端base64转file文件方法
前端base64转file文件方法原创 2023-05-15 15:53:43 · 5106 阅读 · 0 评论 -
js监听页面大小变化
js监听页面大小变化原创 2023-05-10 10:38:34 · 6152 阅读 · 0 评论 -
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片原创 2023-05-08 18:30:04 · 3083 阅读 · 0 评论 -
js判断图片是否加载完成
js判断图片是否加载完成原创 2023-05-08 18:01:17 · 4688 阅读 · 0 评论 -
正则表达式匹配中文
正则表达式匹配中文匹配中文字符的正则表达式[u4e00-u9fa5]匹配双字节字符（中文也是双字节的字符）[^x00-xff]英文字母[a-zA-Z]数字[0-9]匹配中文，英文字母和数字及_^[u4e00-u9fa5_a-zA-Z0-9]+$同时判断输入长度[u4e00-u9fa5_a-zA-Z0-9_]{4,10}^[wu4E00-u9FA5uF900-uFA2D]*$一个正则表达式，只含有汉字、数字、字母、下划线不能以下划线开头和结尾^(?!_)(?!.*?原创 2021-12-06 16:03:28 · 13044 阅读 · 0 评论 -
前端取消input获取焦点时的边框
前端取消input获取焦点时的边框方法如下：input { outline: none;}outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。outline 简写属性在一个声明中设置所有的轮廓属性。...原创 2021-12-18 10:21:13 · 684 阅读 · 0 评论 -
css实现文字或内容溢出展示省略号
css实现文字或内容溢出展示省略号显示一行，省略号white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;显示两行，省略号text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;lin原创 2021-12-22 18:05:24 · 550 阅读 · 0 评论 -
echarts如何让图表占满整个div容器
echarts如何让图表占满整个div容器如下图，我们可以看到echarts图表并未占满div容器，而是被压缩了那么我们需要增加下面的配置项，即可让echarts图表占满整个div容器grid:{ // 让图表占满容器 top:"0px", left:"0px", right:"0px", bottom:"0px"}...原创 2021-12-24 10:51:22 · 31354 阅读 · 6 评论 -
css如何让元素的内容不换行，宽度由内容撑开
css如何让元素的内容不换行，宽度由内容撑开背景做法背景通常情况下，如果父元素的内容是行内元素或者行内块元素，或者是文字的话，当内容过长时，超出父盒子的宽度之后，会默认换行。那么如何让内容不换行（宽度由内容撑开）呢？可参考下列做法做法通过white-space: nowrap;实现.content { width: 100%; overflow-x: scroll; white-space: nowrap; /* 内容超出不换行 */}...原创 2021-12-21 11:44:35 · 9740 阅读 · 0 评论 -
JS如何判断滚动条是否滚到底部
JS如何判断滚动条是否滚到底部背景解决方案（以纵向滚动条为例，横向滚动条方法类似）背景通常我们需要判断滚动条是否滚到底部，以实现相应的功能，如“加载更多”等。那么如何通过js来判断滚动条是否滚到底部，请看以下方法解决方案（以纵向滚动条为例，横向滚动条方法类似）判断滚动条到底部，需要用到DOM的三个属性值，即clientHeight、scrollTop、scrollHeight。（横向滚动条则是clientWidth，scrollLeft，scrollWidth）clientHeight为内容可视原创 2021-12-21 14:27:42 · 17794 阅读 · 2 评论 -
正则表达式去除空格、符号，只保留中文、英文、数字
正则表达式去除空格、符号，只保留中文、英文、数字通过正则表达式，去除字符串中的符号和空格，仅保留中文、英文、数字。 // 处理文本 handleText(text) { const str = text || ""; let plainText = (str.match(/[\u4e00-\u9fa5_a-zA-Z0-9]/g) || ""); (plainText && plainText.length > 0) ? (plainText = pla原创 2021-12-08 15:06:21 · 6369 阅读 · 0 评论 -
前端禁止鼠标右键、禁止全选、复制、粘贴
前端禁止鼠标右键、禁止全选、复制、粘贴禁止鼠标右键、禁止全选、复制、粘贴；oncontextmenu事件禁用右键菜单；document.oncontextmenu = function(){ event.returnValue = false;}<br>//另一种document.oncontextmenu = function(){ return false;}//直接在body上<body oncontextmenu = "return false" &原创 2021-12-04 19:30:24 · 2669 阅读 · 0 评论 -
前端通过js控制滚动条位置
前端通过js控制滚动条位置以纵向滚动条为例，要通过js控制滚动条位置，我们需要使用到的属性是scrollTop ，即滚动条在Y轴上的滚动距离。（横向滚动条是scrollLeft）const dom = document.getElementById('scrollElement');dom.scrollTop = 100;...原创 2021-12-21 14:34:05 · 5828 阅读 · 0 评论 -
css怎么隐藏滚动条
css怎么隐藏滚动条背景做法背景我们需要实现这样的功能，在隐藏滚动条的时候，还需要保留滚动的功能，那么我们应该如何操作呢？做法法一：①使用伪类隐藏滚动条（仅限Chrome与Safari）②scrollbar-width: none;（仅限firefox）③-ms-overflow-style: none;（仅限IE 10+）/* 隐藏滚动条 */.element { width: 100%; height: 72px; box-sizing: border-box;原创 2021-12-21 14:06:57 · 2133 阅读 · 0 评论 -
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端的复制功能在ios端的兼容性问题问题1问题2问题1通过document.execCommand('copy');方法调用复制功能，在ios端无效。解决办法：利用copy-to-clipboard库实现复制问题2ios端复制，不支持点击复制功能，先异步请求后台数据，再复制后台返回的异步数据。简而言之就是，ios的复制方法，不能复制异步数据，只能复制同步数据。如下示例：点击“复制链接”按钮，先调用后端接口获取数据、再复制数据，这样ios是不能复制异步数据的 <div cla原创 2021-12-08 10:03:22 · 4094 阅读 · 0 评论 -
前端禁止复制页面上的文字内容
前端禁止复制页面上的文字内容原创 2021-11-30 19:20:24 · 2033 阅读 · 0 评论 -
前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico步骤1：将小图标favicon.ico文件（或者普通的icon小图片）放在项目的public或者static目录下步骤2：index.html代码中设置favicon.icofavicon.ico文件<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />或普通icon图片<link rel="icon" href="%PUBLIC_URL%/logo.png" /&g原创 2021-12-17 15:47:38 · 6177 阅读 · 0 评论 -
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长背景做法背景前端通过input上传视频或音频文件时，想同时获取视频或者音频文件的时长，核心是createObjectURL以及loadedmetadata做法前端通过input上传视频或音频文件时，想同时获取视频或者音频文件的时长的方法如下import React, { Component, Fragment, createRef } from 'react';import './Upload.less';type StateType = { [原创 2021-10-21 18:20:51 · 5758 阅读 · 0 评论 -
前端实现视频或者图片直链下载
前端实现视频或者图片直链下载前端通过a标签点击视频直链或者图片直链，会单独打开页面并进行播放视频或者展示图片，但是不会实现直接下载。为了解决这一问题，我们可以通过以下方法，实现视频或者图片直链下载downVideo (url, name){ var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; // 返回类型blob xhr.onload = fu原创 2021-09-14 15:51:51 · 3107 阅读 · 0 评论 -
使用react-color实现前端取色器
使用react-color实现前端取色器背景安装使用背景我们可以通过react-color实现前端界面的取色器，效果如下图所示：安装npm i react-color -S使用import React, { Component, Fragment, createRef } from 'react';import { Popover } from 'antd';import { SketchPicker } from 'react-color';type StateType = {原创 2021-11-10 09:51:53 · 2386 阅读 · 0 评论 -
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条案例思路完整代码案例如下图所示，我们想通过canvas来绘制一个环形的进度条，且封装成组件，让进度条能自适应宽高包裹元素，进度条的进度依据百分比进行渲染思路父盒子设置相对定位canvas画布基于父盒子绝对定位，设置其宽高百分比为父盒子100%canvas画布首先绘制一个矩形边框，让其渲染出进度条底色设置定时器，依据时间流速，先后绘制上边框进度条、右边框进度条、下边框进度条、左边框进度条，每个进度条所耗时间占总时间的1/4进度条走完之后，清除定时器进度条原创 2021-11-04 10:59:54 · 1023 阅读 · 0 评论 -
a标签实现文件流下载
a标签实现文件流下载方法1：<a href="地址">download</a>对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载，而是会直接打开，这时候一个新属性就要上场了–【download】download属性不止可以实现下载，其属性值还可以规定下载时的文件名，如果不填写，会自动使用默认文件名。<a href="地址" download="test.pdf">download</a>很遗憾，兼容性不佳，本人实际测原创 2021-09-14 14:26:05 · 2150 阅读 · 0 评论 -
百度地图缩放级别与比例尺的关系
背景最近做了一个项目，需要用户在缩放百度地图的时候，能根据地图缩放级别以及地图中心坐标，动态更新地图上的标注点（比如根据地图缩放级别以及地图中心坐标动态获取手机屏幕视界范围内的共享单车位置），这时候就需要根据地图中心坐标点以及通过地图缩放级别获取比例尺，来计算手机屏幕视界的经纬度范围，从而获取当前范围内的共享单车位置百度地图缩放级别与比例尺对应数值百度地图缩放级别从19~1，共分为19级，级别越大，范围越小：[19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级原创 2021-08-12 18:52:14 · 10399 阅读 · 1 评论 -
前端通过input标签封装Upload组件实现文件上传
前端通过input标签实现文件上传基于input标签封装upload组件修改样式父级使用封装好的Upload组件上传文件常见的input标签accept属性接收的参数基于input标签封装upload组件import React, { Component, Fragment, createRef } from 'react';import './Upload.less';type StateType = { [propName: string]: any;};interface chan原创 2021-09-06 15:18:53 · 2019 阅读 · 0 评论 -
通过jr-qrcode生成二维码并下载到客户端本地
前端通过jr-qrcode生成二维码并下载到客户端本地生成二维码引入jr-qrcode生成二维码图片的地址展示二维码图片下载生成好的二维码图片到本地生成二维码首先生成二维码图片的地址引入jr-qrcodeimport jrQrcode from 'jr-qrcode';生成二维码图片的地址// 生成二维码地址getQRCodeUrl(spreadUrl) { const QRCodeUrl = jrQrcode.getQrBase64(spreadUrl); return QRCod原创 2021-01-11 18:10:20 · 698 阅读 · 0 评论 -
前端使用jr-qrcode生成二维码图片
前端使用jr-qrcode生成二维码图片安装引入使用结果安装npm install jr-qrcode -S引入import jrQrcode from 'jr-qrcode';使用<img id="mix_img" src={qrcode.getQrBase64('hello world')} alt="tgUrl"/>结果原创 2021-01-11 17:17:18 · 1013 阅读 · 0 评论 -
react+typescript接入百度地图
前言本章我们将通过react+typescript的方式给项目接入百度地图步骤一：注册百度开发者，获取密匙百度地图开放平台注册成为开发者，进入控制台，创建应用获取AK密钥步骤二：修改项目的index.html贴入如下代码<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script>步骤三：修改webpack.config.js添加如下代码//原创 2020-10-24 19:54:32 · 1755 阅读 · 0 评论 -
友盟统计如何去掉“站长统计”
友盟统计如何去掉“站长统计”背景解决办法方法1：方法2：方法3：效果背景在项目添加友盟统计之后，页面顶部会出现“站长统计”，如图所示解决办法方法1：最常见的是把统计代码放在一个DIV中，然后填写class再用样式块隐藏，还有比较常见的就是直接给div写内嵌样式隐藏整个div然后把统计代码放入div中。如：<div style="display:none"> <script src="https://s5.cnzz.com/stat.php?id=5844924&we原创 2021-01-07 18:36:40 · 1758 阅读 · 0 评论 -
H5唤起手机打电话（拨号）和发短信功能
H5唤起手机打电话（拨号）和发短信功能拨打电话发送短信移动web页面自动探测电话号码使用wtai协议进行拨打电话关于微信页面出现屏蔽的情况，采用以下解决方案在移动端页面，有时候我们需要唤起用户手机的打电话功能，拨打客服电话，以及发送短信功能，此时我们可以按照以下操作实现打电话和发短信功能拨打电话index.html在<head></head>中加入这一段<meta name="format-detection" content="telephone=yes"/>原创 2020-09-14 17:00:27 · 5543 阅读 · 1 评论 -
vue-cli3读取本地json文件
vue-cli3读取本地json文件背景前端如何读取本地json文件前端存放json文件的位置请求JSON数据封装axios实例封装请求方法页面组件调用请求方法背景一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。由于公司业务，需要在进入页面的时候，一次获取15万条数据用于输入框的模糊搜索，但是这样前端一次性获取如此大量的数据，直接就导致了页面崩溃，加载奇慢。这么大量且不需要时常做变更的数原创 2020-06-30 14:27:02 · 4027 阅读 · 0 评论 -
微信小程序的直播功能
微信小程序的直播功能最近听说了微信小程序居然有直播功能？？？这是什么神仙操作啊，好吧，一搜索，还真的有。下面是官方的小程序直播运营操作手册，可以查阅参考一下原创 2020-06-12 18:29:47 · 758 阅读 · 0 评论 -
前端解析Excel文件
前端解析Excel文件背景安装依赖 xlsx组件中使用（以elementUI的el-upload作为上传组件）背景用户上传excel文件需要在前端进行预览，在数据量不大，不影响性能体验的情况下，可以将excel解析放到前端进行操作，之后再将解析出来的数据传给后端安装依赖 xlsxnpm i xlsx -S关于xlsx的文档，可以查阅js-xlsx官方文档组件中使用（以elementUI的el-upload作为上传组件）<template> <div class="act原创 2020-06-01 14:07:27 · 1422 阅读 · 0 评论 -
前端接受后端文件流并下载到本地的方法
前端接受后端文件流并下载到本地的方法背景法一：针对get方法的文件流下载法二：针对get和post通用的文件流下载配置axios请求方法组件调用背景项目中时常需要从后端下载文件到本地，如下载excel模板，或者合同文件之类的，前端应该如何处理后端返回的文件流并下载到本地呢？法一：针对get方法的文件流下载此方法是最为简单的，直接将页面路径重新定向到后端请求文件流的接口地址即可window.location.href = '后端的文件流下载接口地址';法二：针对get和post通用的文件流下载原创 2020-06-01 14:42:40 · 5453 阅读 · 5 评论 -
前端使用fingerprintjs2获取浏览器指纹
使用fingerprintjs2获取浏览器指纹什么是浏览器指纹什么是fingerprintjs2如何使用fingerprintjs2以VUE中使用为例自定义选择浏览器的部分配置信息生成浏览器指纹什么是浏览器指纹浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等什么是fingerprintjs2fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（原创 2020-05-29 14:51:31 · 12265 阅读 · 2 评论 -
vue中使用vue-clipboard2实现文字复制到剪贴板
vue中使用vue-clipboard2实现文字复制到剪贴板背景安装vue-clipboard2main.js中引入组件中使用vue-clipboard2背景在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示6916 4008 ** **** **1782），而要实现复制真实银行卡号到剪贴板，去支付宝，微信进行绑卡操作的功能，这就可以利用原创 2020-05-25 23:52:02 · 356 阅读 · 0 评论 -
H5实现隐形水印的一些思路
背景 最近公司有这样一个需求，H5在用户截图的时候是否能在截取的图片上携带用户信息和公司信息，以实现产品产权的追踪和定位原创 2020-05-26 09:44:59 · 3536 阅读 · 15 评论 -
H5利用face++和腾讯云慧眼实现活体检测（人脸识别）的流程总结
H5利用face++和腾讯云慧眼paas模式实现活体检测（人脸识别）的流程总结背景paas模式活体检测流程（以数字模式的活体检测为例）saas模式活体检测流程背景随着当前业务安全以及风控的要求，在做一些业务特别是涉及金融领域的业务，需要对用户进行OCR身份证上传识别，活体检测辨别真人，以规避风险和风控评估。再说说为何不使用face++或者腾讯云慧眼的saas模式，因为saas模式集合了身份证OCR，银行卡OCR，活体检测于一体，不可拆分，自定义空间不多，因此我们公司使用的多是paas模式，借用face原创 2020-05-26 16:17:30 · 3887 阅读 · 0 评论 -
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现背景有这样一个需求，后台返回了url地址，微信小程序将url地址转成二维码图片，展示在页面上，并且该二维码图片可下载到用户手机相册中实现安装wx-qrnpm i wx-qr -S在页面组件的json文件中引入wx-qr{ "navigationBarTitleText": "我的线索库", "usingComponents": { "qr-container": "wx-qr" }}页面中使用wx-qr原创 2022-03-15 11:25:14 · 4826 阅读 · 0 评论 -
前端实现生成pdf文件并下载
前端实现生成pdf文件并下载原创 2022-11-25 17:45:18 · 1411 阅读 · 0 评论