使用React-Pdf创建在线简历生成器
时间：2023-03-13 06:25:07
科技观察
前言PDF格式是30年前开发的，是使用最广泛的文件格式之一，我们最喜欢使用它来制作简历、合同、发票、电子书等。文件，主要原因是文档格式可以兼容多种设备和应用程序，内容保持100%相同格式。React-PDF简介ReactPDF是一个使用React创建PDF文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。它们可用于轻松地将内容呈现到文档中。我们可以使用CSS属性进行样式设置，使用flexbox进行布局。支持渲染文字、图片、svg等，具体请参考官网。今天我将使用React-pdf和next.js搭建一个在线简历生成器，先看看效果在线地址：https://cv.runjs.cool/initializetheprojectyarncreatenext-app--examplewith-ant-designnext-resumecdnext-resumeyarnadd@react-pdf/rendererReact-pdf渲染需要一些额外的依赖和webpack5配置。yarnaddprocessbrowserify-zlibstream-browserifyutilbufferassert这一步是因为React-pdf构建在PDFKit之上，使用浏览器时需要两个node.jsAPIpolyfill。虽然webpack5不再包括自动导入nodejspolyfills，但我们必须选择加入我们想要的所有polyfills。为了做到这一点，我们必须向我们的项目添加一些依赖项：创建一个next.config.jsmodule.exports={reactStrictMode:true,webpack:(config,{buildId,dev,isServer,defaultLoaders,webpack})=>{config.resolve.fallback={...config.resolve.fallback，模块：“空”，dgram：“空”，dns：“模拟”，fs：“空”，http2：“空”，net：“空",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"),资产:require.resolve("assert"),};config.plugins.push(newwebpack.ProvidePlugin({Buffer:["buffer","Buffer"],process:"process/browser",}));返回配置；},};在App.js中实现逻辑创建，将用户输入实时绑定到状态，然后时时渲染预览页面importPreviewfrom'./component/Preview'importReact,{useState}from'react'functionApp(){const[profile,setProfile]=useState({name:"RunningPony",about:"分享热门Javascript\n框架，探索极致网络\n优化体验",邮箱:"maqi1520@qq.com",头像:"https://p6-passport.byteacctimg.com/img/user-avatar/585e1491713363bc8f67d06c485e8260~300x300.image",})consthandleChange=(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)}}/>
)}exportdefaultAppPreview.js是页面右侧部分，将PDF文档嵌入其中另外，我们还有PDFDownloadLink，可以用来下载pdf文件。importReactfrom'react'import{Document,Page,PDFViewer,PDFDownloadLink}from'@react-pdf/renderer'constPreview=({profile})=>{return(
}fileName='somename.pdf'>{({loading})=>(加载?'正在加载文档...':'立即下载！')} )}//创建文件组constTemplate=({profile})=>{return(
)}exportdefaultPreview我们可以直接将PDF设置为A4纸大小import{StyleSheet}from'@react-pdf/renderer'exportdefaultStyleSheet.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'importstylesfrom'../styles'exportconstProfile=({profile})=>{return(
{profile.name}{profile.about})}constLeftSection=({profile})=>{return()}exportdefaultLeftSection也是available直接写内联样式来控制PDF中的样式但是不支持float浮动属性。具体可以看官网和遇到的问题。本来以为可以这样搞的，没想到挖了个大坑。不支持中文，pdf显示中文会乱码，通过issueimport{StyleSheet,Font}from"@react-pdf/renderer";Font.register({family:"Alibaba-PuHuiTi-Light",src:"/Alibaba-PuHuiTi-Light.ttf",});exportconststyles=StyleSheet.create({page:{fontFamily:"Alibaba-PuHuiTi-Light",flexDirection:"row",display:"flex",...},})然后就可以显示中文了字体就起来了。这里我下载了阿里巴巴普惠。重构以上是实现的简化版本。通过上面的代码例子，你至少应该明白了其中的原理。为了丰富整个简历数据，我用antd实现了一个富表单列表。使用React上下文来管理我们的数据。目录结构如下所示：├──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部署绑定一个自定义域名体验地址https://cv.runjs.cool/以上就是本文的全部内容。希望这篇文章对大家有所帮助，也可以参考我之前的文章或者在评论区交流一下自己的想法和经验，欢迎一起探讨前端。参考文献[1]官网：https://react-pdf.org/[2]issue：https://github.com/diegomura/react-pdf/issues/267[3]dev.to：https://dev.to/przpiw/react-pdf-rendering-4g7b[4]开发工具：https://cv.devtool.tech/app
