--- highlight: an-old-hope --- 「这是我参与 2022 首次更文挑战的第 10 天，活动详情查看：[2022 首次更文挑战](https://juejin.cn/post/7052884569032392740)」。 ## 前言 PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合同、发票、电子书等文件的格式，最主要的原因是文档格式可以兼容多种设备和应用程序，而且内容 100%保持相同的格式。 ## React-PDF 简介 React PDF 是一个使用 React 创建 PDF 文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。可以用它们轻松地将内容呈现到文档中，我们可以使用 CSS 属性进行样式设置，使用 flexbox 进行布局，它支持渲染文本、图像、 svg 等等，详情可以参考[官网](https://react-pdf.org/) ## 程序实现今天我将使用 React-pdf 和 next.js 来构建一个在线简历生成器，先一起来看下效果 ![image-20220221172531731.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70a405e3a13141c0999772f1aaf766f9~tplv-k3u1fbpfcp-watermark.image?) 在线地址：https://cv.runjs.cool/ ### 初始化项目 ```shell yarn create next-app --example with-ant-design next-resume cd next-resume yarn add @react-pdf/renderer ``` React-pdf 渲染需要一些额外的依赖项和 webpack5 配置。 ```shell yarn add process browserify-zlib stream-browserify util buffer assert ``` 这一步骤是因为 React-pdf 构建在 PDFKit 的基础之上，在使用浏览器时需要使用两个 node.js API polyfill。而 webpack 5不再包括自动引入 nodejs `polyfill` ，我们必须选择进入所有我们想要的 `polyfill`。为了做到这一点，我们必须为我们的项目添加一些依赖项: 在根目录下创建一个 `next.config.js` ```javascript module.exports = { reactStrictMode: true, webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { config.resolve.fallback = { ...config.resolve.fallback, module: "empty", dgram: "empty", dns: "mock", fs: "empty", http2: "empty", net: "empty", tls: "empty", child_process: "empty", process: require.resolve("process/browser"), zlib: require.resolve("browserify-zlib"), stream: require.resolve("stream-browserify"), util: require.resolve("util"), buffer: require.resolve("buffer"), asset: require.resolve("assert"), }; config.plugins.push( new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"], process: "process/browser", }) ); return config; }, }; ``` ### 实现逻辑新建在 `App.js` 将用户输入实时绑定到 state 中，然后时时渲染预览页面 ```javascript import Preview from './component/Preview' import React, { useState } from 'react' function App() { const [profile, setProfile] = useState({ name: "狂奔滴小马", about: "分享 Javascript 热门\n框架，探索 web 极致\n优化体验。", email: "maqi1520@qq.com", avatar:"https://p6-passport.byteacctimg.com/img/user-avatar/585e1491713363bc8f67d06c485e8260~300x300.image", }) const handleChange = (name, value) => { setProfile({ ...profile, [name]: value }) } return (

姓名 { handleChange(e.target.name, e.target.value) }} />

头像地址 { handleChange(e.target.name, e.target.value) }} />

简介 { handleChange(e.target.name, e.target.value) }} />

email { handleChange(e.target.name, e.target.value) }} />

) } export default App ``` `Preview.js` 是页面的右侧部分，并嵌入我们将要创建的PDF文档。另外我们还有 `PDFDownloadLink`，它可以用来下载 pdf 文件。 ```javascript import React from 'react' import { Document, Page, PDFViewer, PDFDownloadLink } from '@react-pdf/renderer' import LeftSection from './LeftSection' import RightSection from './RightSection' import styles from '../styles' const Preview = ({ profile }) => { return (