【React】使用 react-pdf 将数据渲染为pdf并提供下载

文章目录

前言
环境
步骤
- 1. 安装react脚手架
- 2. 使用 create-react-app 创建项目（首字母不要大写、不要使用特殊字符）
- 3. 用 vscode 打开目录 react-staging
4. yarn 启动项目
5. 参考 react-pdf readme加入依赖
6. 结合 github readme 和官方文档产出 demo 代码
7. 启动项目查看效果
后记

前言

最近看了Thoughworks 官网的能力雷达功能，如下图的页面，可以把页面的数据渲染到pdf并用于下载。作为一个Java程序员，这个功能引发了我的思考: 如何较低成本实现这个功能？

Java 可行吗？ —— 可行，有api，但是github上没有star比较多的项目，自己封装底层操作pdf的api比较费劲。
前端可行吗？
- 考虑前端的初衷是因为前端已经拿到数据了，如果前端能够独立处理，就没必要把同样的数据再传到Java后端
- github上搜了下 react-pdf ，star 还ok，看文档也很好懂，所以研究一下。
从未用过react，实现前端导出pdf的功能，刚好作为一个探索的动机学习一下。值得注意的是，本文只是个demo，不要作为工程代码直接使用。

环境

node.js
yarn (可以使用npm安装，是Facebook自家的依赖工具)

步骤

1. 安装react脚手架

# i 是install 的缩写 -g表示全局安装
npm i create-react-app -g

2. 使用 create-react-app 创建项目（首字母不要大写、不要使用特殊字符）

# cd 进你喜欢的目录
# react-staging 是项目名
create-react-app react-staging

3. 用 vscode 打开目录 react-staging

配置热更新插件

4. yarn 启动项目

# 进入react-staging目录
yarn start

弹出的窗口能看到react logo则环境ok

5. 参考 react-pdf readme加入依赖

react-pdf readme
注意，主页并没有给出下载按钮的示例，需要看步骤6

6. 结合 github readme 和官方文档产出 demo 代码

react-pdf 官方文档
关注并修改脚手架代码的三个文件

App.js

import './App.css';
import React from 'react';
// 引入的框架能力
import { Document, Page, Text, View, StyleSheet, PDFDownloadLink} from '@react-pdf/renderer';// Create styles
const styles = StyleSheet.create({page: {flexDirection: 'row',backgroundColor: '#E4E4E4'},section: {margin: 10,padding: 10,flexGrow: 1}
});// Create Document Component
const MyDoc = () => (<Document><Page size="A4" style={styles.page}><View style={styles.section}><Text>Section #1</Text></View><View style={styles.section}><Text>Section #2</Text></View></Page></Document>
);// 该 App 组件与 index.js 中的 App绑定
// index.js 会经过webpack打包封装到bundle.js中，index.html 则会默认引入bundle.js
function App() {return (<div className="App"><PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}</PDFDownloadLink></div>);
}export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
// 获取index.html 中的dom节点，并借React的能力渲染App组件
root.render(<React.StrictMode><App /></React.StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /></head><body><div id="root"></div></body>
</html>

7. 启动项目查看效果

后记

已经证实将数据渲染到pdf上的需求是可行的，后续希望能慢慢解放后端服务的压力。并且，标签式的语句更能描述层次信息、样式信息。让pdf调整起来更方便更直观。另外react的虚拟dom还有webpack把index.js打包的细节都可以研究下，遇到问题再回过头来看看。

【React】使用 react-pdf 将数据渲染为pdf并提供下载相关推荐

php导出csv数据在浏览器中输出提供下载或保存到文件的示例
来源:http://www.jb51.net/article/49313.htm 1.在浏览器输出提供下载 /*** 导出数据到CSV文件* @param array $data 数据* @param ...
EasyExcel导出数据到Excel，浏览器提供下载
最近的一个项目需求,需要为用户提供一个导出数据功能,点击批量下载按钮,将所选中的数据导入到Excel文档中供用户下载.如下图点击批量下载报告后,浏览器提供下载功能下面提供一下实现该功能的思路后 ...
优秀的PDF文档阅读软件-Adobe Reader提供下载
Adobe Reader是美国Adobe公司开发的一款优秀的PDF文档阅读软件.Adobe Reader功能强大,不仅可以用来阅读PDF文件,还可以编辑打印,最大的特色是免费的,有需要的话不要错过了哦 ...
金融数据分析之pdfplumber提取年报PDF关键数据（其他PDF数据通用）
目录一.前言二.难点三.提取难点解决思路四.源代码一.前言小编最近遇到需求了: <1>从PDF提取出关键数据: <2>将关键数据整理到对应的Excel文件: < ...
python pdf提取数据_python从PDF中提取数据的示例
01 前言数据是数据科学中任何分析的关键,大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据.然而,由于可移植文档格式(pdf)文件是最常用的文件格式之一,因此每个数据科学家都 ...
pdf java 开源_Java开源PDF类库分类列表
iText iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好的给合.使用 ...
react大数据量渲染_React大量数据渲染的绝佳解决方案——React虚拟化组件
介绍在当下Web开发盛行的时代里,Web应用随之面临着各种问题,虽然前端框架或者前端解决方案百花齐放,但是并不是所有的问题都能很完美的解决.由于Web应用是基于浏览器渲染界面的,而由于浏览器瓶颈的限 ...
react中表格的数据渲染
数据列表渲染数据列表处理使我们常见的事物类型,到后台给你一串数据列表,你将如何展示在前端页面上呢,传统的我们都是通过循环来实现,那么在react里面我们又是怎样实现的呢? 数据如下 const bo ...
16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】
一.页面二.react-router4.x 路由配置 App.js import React from "react";import { BrowserRouter as Rou ...

【React】使用 react-pdf 将数据渲染为pdf并提供下载

文章目录

前言

环境

步骤

1. 安装react脚手架

2. 使用 create-react-app 创建项目（首字母不要大写、不要使用特殊字符）

3. 用 vscode 打开目录 react-staging

4. yarn 启动项目

5. 参考 react-pdf readme加入依赖

6. 结合 github readme 和官方文档产出 demo 代码

7. 启动项目查看效果

后记

【React】使用 react-pdf 将数据渲染为pdf并提供下载相关推荐

最新文章

热门文章

【React】使用 react-pdf 将数据渲染为pdf并提供下载

文章目录

前言

环境

步骤

1. 安装react脚手架

2. 使用 create-react-app 创建项目 （首字母不要大写、不要使用特殊字符）

3. 用 vscode 打开目录 react-staging

4. yarn 启动项目

5. 参考 react-pdf readme加入依赖

6. 结合 github readme 和官方文档产出 demo 代码

7. 启动项目查看效果

后记

【React】使用 react-pdf 将数据渲染为pdf并提供下载相关推荐

最新文章

热门文章

2. 使用 create-react-app 创建项目（首字母不要大写、不要使用特殊字符）