记一次react-hooks项目获取图表图片集合并生成pdf的需求
需求: 获取子组件中所有图片的dom元素并生成图片,再把生成的图片转化为pdf下载
- 难点
众所周知,react是单向数据流,倡导f(data)⇒ UI的哲学, 并不建议过多直接操作dom,但是生成图片的base64格式时使用的ant design charts 要求必须获取ref才可以
逻辑流转如下图, 兄弟组件b发出按钮click事件后告知a组件去收集自身组件内图标的ref,由于是兄弟组件通信,此处借助了react-redux
a组件获取所有图标ref
const myRef = useRef() //每个组件类似于此:
<BoxPlot ref={handleRefCallback}/> const handleRefCallback = React.useCallback((dom) => {
handleRefs(dom)
}, []) //此处通过回调来获取ref
// 之前,每个charts子组件通过memo浅比较,但是使用了ref之后,memo不再生效,所有此处要通过useCallback来缓存回调函数来实现memo的效果
// charts子组件:
const child = React.forwardRef((props,ref) =>{
<Box {...config} chartRef={ref} />
})
a通过react-redux获得b组件点击指令后,开始按照3步骤收集dom到ref的current中,存在storage中,由于生成base64的过程是异步的,所以在PageB中无法获取实时的storage. 所以需要在PageB中通过状态锁让页面在跳转的过程中只刷新一次
兄弟组件b点击时同时生成一个同步的sessionStorage的标记作为在PageB中执行状态锁的依据
生成pdf的代码: html2canvas 和 jspdf
记一次react-hooks项目获取图表图片集合并生成pdf的需求的更多相关文章
- 从零搭建react hooks项目(github有源代码)
前言 首先这是一个react17的项目,包含项目中常用的路由.状态管理.less及全局变量配置.UI等等一系列的功能,开箱即用,是为了以后启动项目方便,特地做的基础框架,在这里分享出来. 这里写一下背 ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- 关于React Hooks,你不得不知的事
React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- React Hooks 你不来了解下?
前言 最近在看 React 的新语法-- React Hooks,只能一句话概括:React 语法真的是越来越强大,越写代码越少. 强烈推荐还没看 React Hooks 的同学去学习下,这会让你写r ...
随机推荐
- Spring mvc 使用@RequestBody 500错误
今天在使用@RequestBody的时候,遇到一个http500错误,记录一下 让我们来看看我是怎么样错的,贴上代码 @PostMapping("/User") public Us ...
- sa-token client登录逻辑
- [游记] pkusc 2021 游记
流水账 Day-4 写了ICPC的一道DP,有点细节,虽然写得有点难受,但挺好玩 Day-3 写了PKUSC2018最水的一题 是随机开的题 Day-2 可以去pkusc了,从今天中午开始停课 刚吃完 ...
- Python自定义排序及我实际遇到的一些题目实例
写在前面,本文主要介绍Python基础排序和自定义排序的一些规则,如果都比较熟悉,可以直接翻到第三节,看下实际的笔试面试题中关于自定义排序的应用. 一.基础排序 排序是比较基础的算法,与很多语言一样, ...
- linux系统平均负载高(load average)
系统平均负载高(load average) 问题现象 两个案例都是:系统平均负载高,但cpu,内存,磁盘io都正常 什么是系统平均负载 平均负载是指单位时间内,系统处于可运行状态和不可中断状态的平均进 ...
- mysql二进制日志和mysql备份工具介绍以及日志恢复
mysql备份: 三种备份方式 冷备:数据库停机,在进行备份 热备:lock table锁表,read 数据库只可以读不能写,在备份 温备:备份时数据库正常运行 备份类型:完整备份:全部备份,部分 ...
- python之模块(hashlib、logging)
hashlib模块 加密的概念 加密,是以某种特殊的算法改变原有的数据,当其他人获得数据时,也无法了解数据的内容.简单的来说,就是将明文(人看得懂)数据通过一些手段变成密文数据(人看不懂),密文数据的 ...
- 每天一个 HTTP 状态码 204
204 No Content 204 No Content 表示服务器成功地处理了客户端的请求,但是没有任何要响应的内容.API 设计上,在用 PUT 请求更新某个资源成功后,后端可以在 HTTP 响 ...
- js算法-埃筛法
- 基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传
在基于SqlSugar的开发框架的服务层中处理文件上传的时候,我们一般有两种处理方式,一种是常规的把文件存储在本地文件系统中,一种是通过FTP方式存储到指定的FTP服务器上.这种处理应该由程序进行配置 ...