React Native에서 HTML에서 PDF를 생성하는 방법
26311 단어 pdfhtmlmobilereactnative
소개
다른 트랜잭션을 기반으로 PDF를 생성하는 것은 모든 소매 응용 프로그램의 중요한 부분입니다. 오늘 우리는 React Native에서 PDF 문서를 생성하는 방법을 보여줄 것입니다.
React Native에는 PDF를 생성하는 몇 가지 좋은 NPM 라이브러리가 있지만 기사와 블로그는 거의 없습니다. 그래서
react-native-html-to-pdf라는 매우 인기 있는 React Native PDF 생성 라이브러리를 사용하여 React Native에서 PDF를 생성하는 방법을 알려드립니다.React Native 프로젝트 생성
npx react-native init MyRNPDF --template react-native-template-typescript
이 명령은 새로운 반응 네이티브 프로젝트를 생성합니다.
새로 생성된 React Native 프로젝트의 폴더 구조
Hello World!를 인쇄하도록 App.tsx 파일을 변경합니다.
// App.tsx
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#aac',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
color: '#fff',
},
});
export default App;
프로젝트 빌드 및 에뮬레이터에서 실행
npm run android
프로젝트를 성공적으로 빌드한 후 에뮬레이터/장치 화면에
Hello World! 메시지가 표시됩니다.
PDF 생성을 위한 종속성 라이브러리 추가
npm i react-native-html-to-pdf
우리는 프로젝트에서 TypeScript를 사용하고 있습니다. 따라서
react-native-html-to-pdf 라이브러리의 타입 정의를 위해서도 아래 패키지를 설치해야 합니다.npm i @types/react-native-html-to-pdf
iOS 전용 권장 사항
React Native 버전 >= 0.60.0, 도입autolinking하므로 라이브러리를 연결할 필요는 없지만 포드를 설치해야 합니다. 하지만 iOS의 경우에만
pod를 통해 설치 종속성이 필요합니다.cd ios && pod install && cd ..
파일 경로 편집
당신의 소스 코드로 직접 이동
node modulesreact-native-html-to-pdf androidconvert() 함수에서 다음 코드 블록을 변경합니다.File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));
아래 코드 블록 포함:
File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));
그러면 파일 경로가 에뮬레이터/장치 내부의 적절한 위치로 변경됩니다.
안드로이드에 대한 권한
외부 저장소에 액세스하고 있으므로
AndroidManifest.xml 파일에 두 가지 권한을 추가해야 합니다.AndroidManifest.xml에 다음 권한을 추가할 예정입니다.AndroidManifest.xml 파일: 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
PDF 생성 설정
필요에 따라
App.tsx 라이브러리 설정으로 react-native-html-to-pdf 파일을 업데이트하십시오.import React, {useState} from 'react';
import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
function App() {
const [isLoading, setIsLoading] = useState(false);
const [count, setCount] = useState(1);
const orderLines = [
{
id: 1,
product: 'Product 1',
quantity: 1,
price: '$10.00',
},
{
id: 2,
product: 'Product 2',
quantity: 2,
price: '$20.00',
},
{
id: 3,
product: 'Product 3',
quantity: 3,
price: '$30.00',
},
];
const generatePDF = async () => {
setIsLoading(true);
try {
const html = `
<html>
<head>
<style>
body {
font-family: 'Helvetica';
font-size: 12px;
}
header, footer {
height: 50px;
background-color: #fff;
color: #000;
display: flex;
justify-content: center;
padding: 0 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 5px;
}
th {
background-color: #ccc;
}
</style>
</head>
<body>
<header>
<h1>Invoice for Order #${count}</h1>
</header>
<h1>Order Details</h1>
<table>
<tr>
<th>Order ID</th>
<td>${count}</td>
</tr>
<tr>
<th>Order Date</th>
<td>29-Jul-2022</td>
</tr>
<tr>
<th>Order Status</th>
<td>Completed</td>
</tr>
<tr>
<th>Order Total</th>
<td>$13232</td>
</tr>
</table>
<h1>Order Lines</h1>
<table>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Qty</th>
<th>Product Price</th>
</tr>
${orderLines
.map(
line => `
<tr>
<td>${line.id}</td>
<td>${line.product}</td>
<td>${line.quantity}</td>
<td>${line.price}</td>
</tr>
`,
)
.join('')}
</table>
<footer>
<p>Thank you for your business!</p>
</footer>
</body>
</html>
`;
const options = {
html,
fileName: `invoice_${count}`,
directory: 'Invoices',
};
const file = await RNHTMLtoPDF.convert(options);
Alert.alert('Success', `PDF saved to ${file.filePath}`);
setCount(count + 1);
setIsLoading(false);
} catch (error: any) {
Alert.alert('Error', error.message);
}
};
if (isLoading) {
return <Text>Generating PDF...</Text>;
}
return (
<View style={styles.container}>
<Pressable style={styles.button} onPress={() => generatePDF()}>
<Text style={styles.text}>Generate PDF</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#aac',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 24,
color: '#fff',
},
button: {
backgroundColor: '#6c8ee3',
padding: 15,
borderRadius: 10,
margin: 20,
},
});
export default App;
프로젝트를 다시 빌드하십시오.
npm run android
산출
성공 알림에 표시된 위치를 방문하여 생성된 PDF 파일을 확인하십시오.
실제 장치에서는 외부 장치 폴더에 있는 파일을 볼 수 있습니다.
자원
신용 거래
Reference
이 문제에 관하여(React Native에서 HTML에서 PDF를 생성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jaamaalxyz/how-to-generate-pdf-from-html-in-react-native-oj0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
