前端（React）生成pdf終極解決方案（^_^）

最近要實現一個籤合同的需求需要前端實現合同展示、增加簽名及公章、生成合同
訴求：不允許使用者隨意更改複製文案

網上搜到的方法
canvas生產pdf 但會出現頁面被截斷情況，所以研究了一下 react-pdf 和 @react-pdf/renderer，很好用~

@react-pdf/renderer
它會提供自帶的元素，可以自定義樣式，生成你想要的pdf

pdf內容

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 <Document>
    <Page size="A4" style={styles.body} >
      <Text style={styles.title}>BBBBB</Text>
      <Text style={styles.introduce}>This Agreement.</Text>
      <Text style={styles.subtitle}>AAAAAAa</Text>

      <Text style={styles.graph}>
        <Text style={styles.graphText}>加粗文案 </Text><Text>當前文案在一行內</Text>
      </Text>
      <Image
            style={styles.signImg}
            src="https:xxxxx.jpg"
          />
     {name ? <Text>{name}</Text> : <></>}
      <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
        `${pageNumber} / ${totalPages}`
      )} fixed />
    </Page>
  </Document>
}

export default Content

pdf展示

hooks方式生成pdf連線和blob檔案

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 = () => (
<PDFViewer>
  <Content />
</PDFViewer>
);

ReactDOM.render(<App />, 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 ? <Document file={url} onLoadSuccess={onDocumentLoadSuccess} onLoadError={loadError} options={options} >
  {Array.from(new Array(numPages), (el, index) => (
    <Page className="contract-content-pdf-page" width={800} key={`page_${index + 1}`} renderTextLayer={false} pageNumber={index + 1} />
  ))}
</Document> : <></>
}

export default PdfView

這兩個包結合應該可以實現不同場景不同需求的pdf檔案需求~

前端（React）生成pdf終極解決方案（^_^）

相關文章