扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react-pdf 打造在线简历生成器的示例代码
  • 262

0
分享到

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

2024-04-02 19:04:59 262人浏览 薄情痞子
摘要

目录前言React-pdf 简介程序实现初始化项目实现逻辑遇到问题重构部署参考前言 PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合

前言

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

React-PDF 简介

React PDF 是一个使用 React 创建 PDF 文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。

可以用它们轻松地将内容呈现到文档中，我们可以使用 CSS 属性进行样式设置，使用 flexbox 进行布局，它支持渲染文本、图像、 svg 等等，详情可以参考官网

程序实现

今天我将使用 React-pdf 和 next.js 来构建一个在线简历生成器，先一起来看下效果

在线地址：cv.runjs.cool/

初始化项目

yarn create next-app --example with-ant-design next-resume 
cd next-resume
yarn 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。为了做到这一点，我们必须为我们的项目添加一些依赖项:

在根目录下创建一个 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 (
    <div
      style={{
        width: '100%',
        height: '100vh',
        display: 'flex',
      }}
    >
      <div style={{ width: '50%' }}>
        <div>
          <label>姓名</label>
          <input
            name='name'
            defaultValue={profile.name}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>头像地址</label>
          <input
            name='avatar'
            defaultValue={profile.avatar}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>简介</label>
          <input
            name='about'
            defaultValue={profile.about}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>email</label>
          <input
            name='email'
            defaultValue={profile.email}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
      </div>
      <Preview profile={profile} />
    </div>
  )
}

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'
import  RightSection from './RightSection'
import styles from '../styles'

const Preview = ({ profile }) => {
  return (
    <div style={{ flexGrow: 1 }}>
      <PDFViewer
        showToolbar={false}
        style={{
          width: '100%',
          height: '95%',
        }}
      >
        <Template profile={profile} />
      </PDFViewer>
      <PDFDownloadLink
        document={<Template profile={profile} />}
        fileName='somename.pdf'
      >
        {({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
      </PDFDownloadLink>
    </div>
  )
}
// 创建文档组件
const Template = ({ profile }) => {
  return (
    <Document>
      <Page size='A4' style={styles.page}>
        <LeftSection profile={profile} />
        <RightSection about={profile.about} />
      </Page>
    </Document>
  )
}

export default Preview

我们可以直接设置 PDF 为 A4 纸尺寸。

import { StyleSheet } from '@react-pdf/renderer'

export default StyleSheet.create({
  page: {
    display: 'flex',
    flexDirection: 'row',
  },
  section_right: {
    margin: 10,
    padding: 10,
    paddingTop: 20,
    width: '75%',
  },
  section_left: {
    width: '25%',
    height: '100%',
    backgroundColor: '#084c41',
  },
  profile_container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: '20',
    marginBottom: '20px',
    height: '150',
  },
  name_text: {
    paddingTop: '10px',
    paddingBottom: '5px',
    fontSize: '14px',
    fontWeight: '900',
    color: 'white',
  }
})

通过 StyleSheet.create 创建 JavaScript 样式表

LeftSection.js 代码展示

import { View, Text, Image, } from '@react-pdf/renderer'
import styles from '../styles'

export const Profile = ({ profile }) => {
  return (
    <View style={styles.profile_container}>
      <Image style={styles.profile_img} src={profile.avatar} />

      <View
        style={{
          justifyContent: 'center',
        }}
      >
        <Text style={styles.name_text}>{profile.name}</Text>
      </View>
      <Text style={styles.profession_text}>{profile.about}</Text>
    </View>
  )
}

const LeftSection = ({ profile }) => {
  return (
    <View style={styles.section_left}>
      <Profile profile={profile} />
    </View>
  )
}

export default LeftSection

也可以直接写内联样式控制 FDF 内的样式。但是不支持 float 浮动属性，具体大家可以看官网

遇到问题

本以为这样就可以完成，没想到还有一个巨坑，不支持中文，中文在pdf 中会显示乱码， 通过 issue 找到了答案

import { StyleSheet, Font } from "@react-pdf/renderer";

Font.reGISter({
  family: "Alibaba-PuHuiTi-Light",
  src: "/Alibaba-PuHuiTi-Light.ttf",
});

export const styles = StyleSheet.create({
  page: {
    fontFamily: "Alibaba-PuHuiTi-Light",
    flexDirection: "row",
    display: "flex",
    ...
  },
})

然后就可以显示中文字体了。这边我下载了阿里巴巴普惠体。

重构

以上是一个简易版的实现，通过上面的代码示例，你应该至少看懂了原理，为了让整个简历数据丰富，我使用了antd 来实现丰富的表单列表。使用 react context 来管理我们的数据。下面展示下目录结构：

├── components
│   ├── app
│   │   └── index.tsx
│   ├── editor
│   │   ├── FORMCreator.tsx
│   │   ├── conifg.js
│   │   └── index.tsx
│   ├── icon
│   │   └── index.tsx
│   └── preview
│       ├── avatar.tsx
│       ├── awardList.tsx
│       ├── educationList.tsx
│       ├── index.tsx
│       ├── profile.tsx
│       ├── projectList.tsx
│       ├── skillList.tsx
│       ├── style.ts
│       └── workExpList.tsx
├── context
│   └── resumeContext.ts
├── hooks
│   └── useResume
│       └── index.ts
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.js
│   └── index.tsx
└── styles
    ├── loGo.png
    └── globals.css

部署

最后我使用 vercel 部署并且绑定自定义域名

体验地址 cv.runjs.cool/

参考

https://dev.to/przpiw/react-pdf-rendering-4g7b

https://cv.devtool.tech/app

到此这篇关于react-pdf 打造在线简历生成器的示例代码的文章就介绍到这了,更多相关react-pdf  在线简历生成器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: react-pdf 打造在线简历生成器的示例代码

本文链接: https://lsjlt.com/news/140022.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react-pdf 打造在线简历生成器的示例代码
    目录前言React-PDF 简介程序实现初始化项目实现逻辑遇到问题重构部署参考前言 PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合...
    99+
    2024-04-02
  • MyBatisPlus代码生成器的使用示例
    目录导入依赖表结构当前项目结构配置代码生成器1、globalConfig 全局策略配置2、dataSourceConfig 数据源配置AutoGenerator 是 MyBatis-...
    99+
    2024-04-02
  • Mybatis-Plus代码生成器的示例分析
    小编给大家分享一下Mybatis-Plus代码生成器的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！ 实战 数据库脚本 创建一张商品表test_goodsCREATE&nbs...
    99+
    2024-04-02
  • Python打造虎年祝福神器的示例代码
    目录背景故事一、Python Turtle模块画小老虎1. 定义库以及初始化界面2. 画出左右两只耳朵3. 画出小老虎头部轮廓4. 画出老虎的两只眼睛5. 画出老虎的鼻子和嘴巴6. ...
    99+
    2024-04-02
  • C#实现文字视频生成器的示例代码
    目录前言实现功能开发环境实现代码实现效果前言 简单的描述下写这个软件的背景吧。之前短视频平台很火的时候，相信很多人都想进去分一杯羹，俺当然也不能免俗，但是人丑家穷又没才艺，咋办呢？看...
    99+
    2024-04-02
  • C#实现封面图片生成器的示例代码
    目录实现功能开发环境实现代码实现效果这个东西我已经用了有段时间了，从开始写文章就在用这个，主要原因还是因为我比较懒。懒得去寻找图片，同时又怕万一惹来版权争议。。。 跟我所有的文章的...
    99+
    2024-04-02
  • Python打造虎年祝福神器的示例代码怎么写
    今天就跟大家聊聊有关Python打造虎年祝福神器的示例代码怎么写，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。python是什么Python是一种跨平台的、具有解释性、编译性、互动性...
    99+
    2023-06-26
  • WPF+ASP.NET SignalR实现简易在线聊天功能的示例代码
    目录涉及知识点什么是ASP.NET SignalR在线聊天整体架构ASP.NET SignalR在线聊天服务端1. 创建ASP.NET Web API项目2. 创建消息通知中心Hub...
    99+
    2024-04-02
  • springboot整合freemarker代码自动生成器的示例分析
    这篇文章给大家分享的是有关springboot整合freemarker代码自动生成器的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。技术架构页面是用 Vue ，element-ui开发；网络请求是 Axi...
    99+
    2023-06-15
  • Python随机生成均匀分布在单位圆内的点代码示例
    Python有一随机函数可以产生[0,1)区间内的随机数，但是如果我们想生成随机分布在单位圆上的，那么我们可以首先生成随机分布在单位圆边上的点，然后随机调整每个点距离原点的距离，但是我们发现这个距离不是均匀...
    99+
    2022-06-04
    示例 均匀 单位
  • promise和co搭配生成器函数方式解决js代码异步流程的示例分析
    这篇文章将为大家详细讲解有关promise和co搭配生成器函数方式解决js代码异步流程的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在es6中引入的原生Prom...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作