最近要实现一个签合同的需求需要前端实现合同展示、增加签名及公章、生成合同诉求：不允许用户随意更改复制文案网上搜到的方法 canvas生产pdf 但会出现页面被截断情况，所以研究了一下 [react-pdf](https://github.com/wojtekmaj/react-pdf) 和 [@react-pdf/renderer](https://react-pdf.org/)，很好用~ >** @react-pdf/renderer ** 它会提供自带的元素，可以自定义样式，生成你想要的pdf pdf内容 ```react import { Document, Page, Text, StyleSheet, View, Image } from '@react-pdf/renderer'; // 自定义字体 Font.register({ family: 'Oswald', src: 'https://64a478.ttf' }); const styles = StyleSheet.create({ body: { paddingTop: 60, paddingLeft: 40, paddingRight: 40, paddingBottom: 30, fontFamily: 'Oswald' }, title: { fontSize: 14, textAlign: 'center', marginBottom: 30, }, subtitle: { fontSize: 14, textAlign: 'center', marginTop: 20, marginBottom: 20, }, introduce: { fontSize: 12, lineHeight: 1.6, }, graph: { fontSize: 12, lineHeight: 1.6, wrap: true, fontWeight: 'thin', color: 'rgba(0,0,0,.8)', }, graphText: { fontWeight: 'bold', textDecoration: 'underline', color: '#000', }, signImg: { width: '80px', height: '80px', position: 'absolute', left: 0, top: 0, zIndex: 2 }, pageNumber: { position: 'absolute', fontSize: 12, bottom: 30, left: 0, right: 0, textAlign: 'center', color: 'grey', }, }); const Content = (name?: string) => { return BBBBB This Agreement. AAAAAAa 加粗文案当前文案在一行内

{name ? {name} : <>} ( `${pageNumber} / ${totalPages}` )} fixed /> } export default Content ``` pdf展示 * hooks方式生成pdf连接和blob文件 ```react import Content from './Content'; const [instance] = usePDF({ document: Content('xiaoming') }); // instance // loading/url/blob/error ``` * DOM渲染 * iframe方式展示，iframe底色无法更改，对于样式要求较高的不太适用 ``` import { PDFViewer } from '@react-pdf/renderer'; import Content from './Content'; const App = () => ( ); ReactDOM.render(, document.getElementById('root')); ``` > **react-pdf** pdf链接渲染展示pdf，解决@react-pdf/renderer样式问题，可以通过第一种方式生成的blob地址或url渲染 ``` import React, { useState } from "react"; import { Document, Page, pdfjs } from 'react-pdf'; // 6版本会报错，且此方法无法解决需要使用5版本 // "Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler')". pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; const PdfView = ({ url, loadSuccess, loadError }: any) => { const [numPages, setNumPages] = useState(null); function onDocumentLoadSuccess({ numPages: nextNumPages }: any) { setNumPages(nextNumPages); loadSuccess?.() } // 页面会渲染2层有一层的文案可被选中 renderTextLayer设为false即可解决 return url ? {Array.from(new Array(numPages), (el, index) => ( ))} : <> } export default PdfView ``` ---------- 这两个包结合应该可以实现不同场景不同需求的pdf文档需求~