如何将 hltm 中的 react native 代码转换为 react native

Question

在下面的代码中，我正在生成收据并将其下载为本地的 pdf 格式。在此之前，我以模式显示它，即反应原生视图代码。现在对于 pdf 的东西，我正在使用一个库“react-native- html到pdf”。但它只转换 html 。在下面的第二部分中是我的反应原生格式的收据代码。请帮助我如何将其转换为 html 或如何做到这一点。 “saleRequest”是我在道具中获得的一个数组，所有数据都在这里可用，我需要生成收据。 请帮忙

const createPDF = async (props) => {
    const {saleRequest}=props.navigation.state.params;

    if (await isPermitted()) {
      const message = "hello";
      let options = {
        //Content to print
        html:
          `<h1 style="text-align: center;"><strong>${message}</strong></h1><p style="text-align: center;">Here is an example of pdf Print in React Native</p><p style="text-align: center;"><strong>Team About React</strong></p>`,
        //File Name
        fileName: 'receipt',
        //File directory
        directory: 'documents',
      };
      let file = await RNHTMLtoPDF.convert(options);
      setFilePath(file.filePath);
    }
  };

//// 下面的代码我必须下载到 pdf 中，但它是 react native jsx

  <View style={{ width: deviceWidth - 30, }}> 
                <View style={{ marginTop: hp('2%'), flex: 1, justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', width: wp('100%') }}>
                  <View style={{ flex: 1,left:wp('2%') }}>
                    <RegularText text={saleRequest.custName} textColor='#231F20' style={{ fontSize: hp('2%'), }} />
                    <RegularText text={saleRequest.mobileNum} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                  </View>
                  {
                    !_.isEmpty(saleRequest.receiptNum) ?
                      <View style={{ flex: 1 }}>
                        <RegularText text='Receipt Number' textColor='#808080' style={{ fontSize: hp('2%'), }} />
                        <RegularText text={saleRequest.receiptNum} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                      </View>
                      :
                      <View style={{ flex: 1 }}>
                        <RegularText text='Transaction Date' textColor='#808080' style={{ fontSize: hp('2%'), }} />
                        <RegularText text={saleRequest.transDate} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                      </View>
                  }

                </View>
                <View style={{ marginTop: hp('2%'), flex: 1, justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', width: wp('100%') }}>
                  <View style={{ flex: 1,left:wp('2%') }}>
                    <RegularText text='Txn#' textColor='#808080' style={{ fontSize: hp('2%'), }} />
                    <RegularText text={saleRequest.transNumber} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                  </View>
                  <View style={{ flex: 1 }}>
                    <RegularText text='Payment Method' textColor='#808080' style={{ fontSize: hp('2%'), }} />
                    {
                      !_.isEmpty(saleRequest.payCash) &&
                      <RegularText numberOfLines={4} text={saleRequest.payCash} textColor='#231F20' style={{ paddingRight : 60,fontSize: hp('2%'), fontWeight: 'bold' }} />
                    }
                    {
                      !_.isEmpty(saleRequest.payCc) &&
                      <RegularText numberOfLines={4} text={saleRequest.payCc} textColor='#231F20' style={{ paddingRight : 60,fontSize: hp('2%'), fontWeight: 'bold' }} />
                    }
                    {
                      !_.isEmpty(saleRequest.payDc) &&
                      <RegularText numberOfLines={4} text={saleRequest.payDc} textColor='#231F20' style={{ paddingRight : 60,fontSize: hp('2%'), fontWeight: 'bold' }} />
                    }
                    {
                      _.isEmpty(saleRequest.payCash) &&
                      <RegularText text={'Instalment'} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                    }
                  </View>
                </View>
                {!_.isEmpty(saleRequest.payCash) &&
                  <View style={{ flex: 1, flexDirection: 'row', marginRight : 100, marginTop: 10 }}>
                      <RegularText text='Cash Amount' textColor='#838384' style={{ flex:1,fontSize: hp('2%'),left:wp('2%') }} />
                      <RegularText text={saleRequest.payCashAmt} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                    </View>
                }

                {
                  !_.isEmpty(saleRequest.payCc) &&
                  <View style={{ flex: 1, flexDirection: 'row', marginRight : 100,marginTop: 10 }}>
                    <RegularText text={`Credit Card Amount`} style={{ flex: 1, fontSize: hp('2%'), color: '#838384' }} />
                    <RegularText text={saleRequest.payCcAmt} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                  </View>
                }
                {
                  !_.isEmpty(saleRequest.payDc) &&
                  <View style={{ flex: 1, flexDirection: 'row', marginRight : 100, marginTop: 10 }}>
                    <RegularText text={`Debit Card Amount`} style={{ flex: 1, fontSize: hp('2%'), color: '#838384' }} />
                    <RegularText text={saleRequest.payDcAmt} textColor='#231F20' style={{ fontSize: hp('2%'), fontWeight: 'bold' }} />
                  </View>
                }

                <View style={{
                  paddingBottom: 5, paddingTop: 20, borderBottomColor: '#231F20B3',
                  borderBottomWidth: 1, flex: 1, justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', width: wp('100%'),
                }}>
                  <RegularText text='Items' textColor='#231F20' style={{ flex: .4, fontSize: hp('1.5%'),left:wp('2%') }} />
                  <RegularText text='QTY' textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%'), textAlign: 'center' }} />
                  <RegularText text='Price' textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%'), }} />
                  <RegularText text='Amount' textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%'), }} />
                </View>
                {
                  saleRequest.itemData.map((data, index) => {
                    return (
                      <View key={index} style={{
                        paddingBottom: 10, paddingTop: 10, borderTopColor: '#D2D2D2', borderTopWidth: index !== 0 ? 1 : 0, flex: 1,
                        justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', width: wp('100%')
                      }}>
                        <View style={{ flex: .4, justifyContent: 'center',left:wp('2%') }}>
                          <RegularText text={data.itemDescV} textColor='#808080' style={{ fontSize: hp('1.5%'), flex: .4 }} />
                        </View>
                        <RegularText text={data.quantityN} textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%'), textAlign: 'center', }} />
                        <RegularText text={data.itemPrice} textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%') }} />
                        <RegularText text={data.quantityN * data.itemPrice} textColor='#231F20' style={{ flex: .2, fontSize: hp('1.5%') }} />
                      </View>
                    )
                  })
                }
                <View style={{ borderBottomColor: '#231F20B3', borderBottomWidth: 1 }} />
                <View style={{ flex: 1, width: wp('100%') - 60, paddingTop: 10 }}>
                  <View style={{ flexDirection: 'row' }}>
                    <RegularText text='Gross Total :' textColor='#231F20' style={{ flex: .6, fontSize: hp('1.5%'), textAlign: 'right' }} />
                    <RegularText text={saleRequest.grossTot} textColor='#231F20' style={{ flex: .4, fontSize: hp('1.5%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <RegularText text='Discounts :' textColor='green' style={{ flex: .6, fontSize: hp('1.5%'), textAlign: 'right' }} />
                    <RegularText text={saleRequest.totItemDisc} textColor='green' style={{ flex: .4, fontSize: hp('1.5%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>
                  {!isCredit&&<View style={{ flexDirection: 'row' }}>
                    <RegularText text='Transaction Discount :' textColor='green' style={{ flex: .6, fontSize: hp('1.5%'), textAlign: 'right' }} />
                    <RegularText text={saleRequest.totTransDisc} textColor='green' style={{ flex: .4, fontSize: hp('1.5%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>}
                  <View style={{ flexDirection: 'row' }}>
                    <RegularText text='Total Amount :' textColor='#231F20' style={{ flex: .6, fontSize: hp('1.5%'), textAlign: 'right' }} />
                    <RegularText text={isCredit?  "PGK " + parseInt(saleRequest.grossTot.slice(4) - saleRequest.totItemDisc.slice(4)) + ".00" : saleRequest.totalNet} textColor='#231F20' style={{ flex: .4, fontSize: hp('1.5%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>
                  {!isCredit &&<View style={{ flexDirection: 'row' }}>
                    <RegularText text='VAT :' textColor='#231F20' style={{ flex: .6, fontSize: hp('1.5%'), textAlign: 'right' }} />
                    <RegularText text={saleRequest.vat} textColor='#231F20' style={{ flex: .4, fontSize: hp('1.5%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>}
                  <View style={{ flexDirection: 'row' }}>
                    <RegularText text='Paid Amount :' textColor='#231F20' style={{ flex: .6, fontSize: hp('2%'), textAlign: 'right', fontWeight: 'bold' }} />
                    <RegularText text={isCredit  ? "PGK 0" : saleRequest.totalPaid} textColor='#231F20' style={{ flex: .4, fontSize: hp('2%'), textAlign: 'right', fontWeight: 'bold' }} />
                  </View>
                </View>
              </View>

Answer 1

import React, { useState } from 'react';
// Import required components
import {
  SafeAreaView,
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
  Image,
  PermissionsAndroid,
  Platform,
} from 'react-native';

// Import HTML to PDF
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import _ from "lodash";

const PdfContainer = (props) => {
  const [filePath, setFilePath] = useState('');
  console.log("saleRequestsaleRequest", props);

  const isPermitted = async () => {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'CameraExample App External Storage Write Permission',
            message:
              'CameraExample App needs access to Storage data in your SD Card ',
          },
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      } catch (err) {
        alert('Write permission err', err);
        return false;
      }
    } else {
      return true;
    }
  };

  const createPDF = async () => {
    const { saleRequest } = props.navigation.state.params;
    const paymentMethod =_.get(saleRequest,"payCash" ) || _.get(saleRequest,"payCc" ) || _.get(saleRequest,"payDc" );
    console.log("paymentMethod",paymentMethod);
    const tableData = saleRequest.itemData.map((data, index) => {
      return (
        `<tr style="text-align: center; background-color: #fff; color: #231F20;">
                <td>${data.itemDescV}</td>
                <td>${data.quantityN}</td>
                <td>${data.itemPrice}</td>
                <td>${data.quantityN * data.itemPrice}</td>
              </tr>`
      )
    })

    if (await isPermitted()) {
      let options = {
        //Content to print
        html:
          `<html>

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style>
                body {
                    font-family: calibri;
                }
        
                table,
                tr,
                td {
                    border: 1px solid #231F20;
                    border-collapse: collapse;
                }
        
                .page_break {
                    page-break-before: always;
                }
        
                .badge {
                    display: inline-block;
                    padding: 0.25em 0.4em;
                    font-size: 72%;
                    font-weight: 300;
                    line-height: 1;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: baseline;
                    border-radius: 0.25rem;
                    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                }
        
                .badge-pill {
                    padding-right: 0.6em;
                    padding-left: 0.6em;
                    border-radius: 10rem;
                }
        
                .badge-info {
                    color: #fff;
                    background-color: #30BCC9;
                }
        
                .white {
                    border-color: #fff !important;
                }
            </style>
        </head>
        
        <body>
      
      
        <div  style="width: 100%; text-align: left;margin-top:30;">
      <div style="width:50%;float:left;">
                      <h4 style= "color:#231F20;margin:0;">${saleRequest.custName}</h4>
                      </div>
                      <div style="width:50%;float:left;">
                      <h4 style= "color:#808080;margin:0;">Receipt Number</h4>
                      </div>
                    </div>
                    
                     <div style="width: 100%; text-align: left;">
                     <div style="width:50%;float:left;margin-top:20;">
                      <h4 style= "color:#231F20;margin:0;">${saleRequest.mobileNum}</h4>
                      </div>
                      <div style="width:50%;float:left;margin-top:20">
                      <h4 style= "color:#231F20;margin:0;">${saleRequest.receiptNum}</h4>
                      </div>
                    </div>
                    
                    <div style="width: 100%; text-align: left">
                     <div style="width:50%;float:left;margin-top:20">
                      <h4 style= "color:#808080;margin:0;">Txn#</h2>
                      </div>
                       <div style="width:50%;float:left;margin-top:20">
                      <h4 style= "color:#808080;margin:0;">Payment Method  </h2>
                      </div>
                    </div>
            <div style="width: 100%; text-align: left">
             <div style="width:50%;float:left;margin-top:20">
                      <h4 style= "color:#231F20;margin:0;">${saleRequest.transNumber}</h2>
                      </div>
                       <div style="width:50%;float:left;margin-top:20">
                      <h4 style= "color:#231F20;margin:0;">${paymentMethod}  </h2>
                      </div>
                    </div>
           
            <div style="width:100% ;margin-top: 15px;">
            <div style="width:50%;float:left;margin-top:20">
                    <h4 style= "color:#808080;margin:0;">Cash Amount </h4>
                    </div>
                    <div style="width:50%;float:left;margin-top:20">
                    <h4 style= "color:#231F20;margin:0;">${saleRequest.payCashAmt}</h4>
                    </div>
                    </div>
                    
          
            <table cellpadding="5" style="width: 100%">
                <thead>
                <tr style="text-align: center; background-color: #30BCC9; color: #fff;">
                        <td >Items</td>
                        <td >QTY</td>
                        <td >Price</td>
                        <td >Amount</td>
                    </tr>
                </thead>
                <tbody>
                ${tableData}
                </tbody>
            </table>
  
            <div style="width:100%">
            <div style="float:left;margin:5px; width:70%;text-align: right">Gross Total : </div>
            <div style="text-align: left;margin:5px;float:left;">${saleRequest.grossTot}</div>
            </div>
            <div style="width:100%">
            <div style="float:left;margin:5px;color:green; width:70%;text-align: right">Discounts : </div>
            <div style="text-align: left; color:green;margin:5px;float:left;">${saleRequest.totItemDisc}</div>
            </div>
            <div style="width:100%">
            <div style="float:left;margin:5px;color:green; width:70%;text-align: right">Transaction Discount : </div>
            <div style="text-align: left;margin:5px;color:green;float:left;">${saleRequest.totTransDisc}</div>
            </div>
            <div style="width:100%">
            <div style="float:left;margin:5px; width:70%;text-align: right">Total Amount : </div>
            <div style="text-align: left;margin:5px;float:left;">${saleRequest.totalNet}</div>
            </div>
            <div style="width:100%">
            <div style="float:left;margin:5px; width:70%;text-align: right">VAT : </div>
            <div style="text-align: left;margin:5px;float:left;">${saleRequest.vat}</div>
            </div>
           <div style="width:100%">
            <div style="float:left;margin:5px; width:70%;text-align: right">Paid Amount : </div>
            <div style="text-align: left;margin:5px;float:left;">${saleRequest.totalPaid}</div>
            </div>
        </body>
        
        </html>`,
        //File Name
        fileName: `receipt2`,
        //File directory
        directory: 'Documents',
      };
      let file = await RNHTMLtoPDF.convert(options);
      console.log(file.filePath);
      setFilePath(file.filePath);
    }
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text style={styles.titleText}>
        Example to Make PDF in React Native from HTML Text
      </Text>
      <View style={styles.container}>
        <TouchableOpacity onPress={createPDF}>
          <View>
            <Image
              //We are showing the Image from online
              source={{
                uri:
                  'https://raw.githubusercontent.com/AboutReact/sampleresource/master/pdf.png',
              }}
              //You can also show the image from you project directory like below
              //source={require('./Images/facebook.png')}
              style={styles.imageStyle}
            />
            <Text style={styles.textStyle}>Create PDF</Text>
          </View>
        </TouchableOpacity>
        <Text style={styles.textStyle}>{filePath}</Text>
      </View>

    </SafeAreaView>
  );
};

export default PdfContainer;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  titleText: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: 20,
  },
  textStyle: {
    fontSize: 18,
    padding: 10,
    color: 'black',
    textAlign: 'center',
  },
  imageStyle: {
    width: 150,
    height: 150,
    margin: 5,
    resizeMode: 'stretch',
  },
});