锐客网

  1. 首页 > it技术 > >

react-pdf|react-pdf 打造在线简历生成器的示例代码

目录

  • 前言
  • React-PDF简介
  • 程序实现
  • 初始化项目
  • 实现逻辑
  • 遇到问题
  • 重构
  • 部署
  • 参考

前言 PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合同、发票、电子书等文件的格式，最主要的原因是文档格式可以兼容多种设备和应用程序，而且内容 100%保持相同的格式。

React-PDF 简介 React PDF 是一个使用 React 创建 PDF 文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。
可以用它们轻松地将内容呈现到文档中，我们可以使用 CSS 属性进行样式设置，使用 flexbox 进行布局，它支持渲染文本、图像、 svg 等等，详情可以参考官网

程序实现 今天我将使用 React-pdf 和 next.js 来构建一个在线简历生成器，先一起来看下效果
react-pdf|react-pdf 打造在线简历生成器的示例代码
文章图片

在线地址：cv.runjs.cool/

初始化项目
yarn create next-app --example with-ant-design next-resume cd next-resumeyarn add @react-pdf/renderer

React-pdf 渲染需要一些额外的依赖项和 webpack5 配置。
yarn add process browserify-zlib stream-browserify util buffer assert

这一步骤是因为 React-pdf 构建在 PDFKit 的基础之上，在使用浏览器时需要使用两个 node.js API polyfill。 而 webpack 5不再包括自动引入 nodejs polyfill ，我们必须选择进入所有我们想要的 polyfill。为了做到这一点，我们必须为我们的项目添加一些依赖项:
【react-pdf|react-pdf 打造在线简历生成器的示例代码】在根目录下创建一个 next.config.js
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 中，然后时时渲染预览页面
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)}}/> {handleChange(e.target.name, e.target.value)}}/>
)}export default App

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