我想将数据传递给 html

Question

我想将来自其他页面的 react-native 代码的数据传递给我上面的 HTML 代码（就像我们传入 react js 一样）。 我知道我们不能在 react-native 中做到这一点。 是否有一些图书馆或其他东西有没有其他方法可以做到？

import * as React from 'react';
import { View, StyleSheet, Button, Platform, Text } from 'react-native';
import * as Print from 'expo-print';
import { shareAsync } from 'expo-sharing';

const html = `
<html>
  <head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  </head>
  <body style="text-align: center;">
   <div class="container-fluid mt-100 mb-100">
    <div id="ui-view">
        <div>
            <div class="card">
                <div class="card-header"> Invoice<strong>#BBB-245432</strong>
                    <div class="pull-right"> <a class="btn btn-sm btn-info" href="#" data-abc="true"><i class="fa fa-print mr-1"></i> Print</a> <a class="btn btn-sm btn-info" href="#" data-abc="true"><i class="fa fa-file-text-o mr-1"></i> Save</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-4">

                        <div class="col-sm-4">
                            <h6 class="mb-3">Details:</h6>
                            <div>Invoice<strong> #BBB-245432</strong></div>
                            <div>March 22, 2020</div>
                            <div>VAT: BBB0909090</div>
                            <div>Account Name: BANK OF AMERICA</div>
                            <div><strong>SWIFT code: 985798579487</strong></div>
                        </div>
                    </div>
                    <div class="table-responsive-sm">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th class="center">#</th>
                                    <th>Item</th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="center">1</td>
                                    <td class="left">Laptops</td>
                                    
                                </tr>
                                <tr>
                                    <td class="center">2</td>
                                    <td class="left">Samsung SSD</td>
                                   
                                </tr>
                                <tr>
                                    <td class="center">3</td>
                                    <td class="left">PEN DRIVES</td>
                                  
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</div>
                        <div class="col-lg-4 col-sm-5 ml-auto">
                            <table class="table table-clear">
                                <tbody>
                                    <tr>
                                        <td class="left"><strong>Subtotal</strong></td>
                                        <td class="right">$8500</td>
                                    </tr>
                                    <tr>
                                        <td class="left"><strong>Discount (20%)</strong></td>
                                        <td class="right">$160</td>
                                    </tr>
                                    <tr>
                                        <td class="left"><strong>VAT (10%)</strong></td>
                                        <td class="right">$90</td>
                                    </tr>
                                    <tr>
                                        <td class="left"><strong>Total</strong></td>
                                        <td class="right"><strong>$9000</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="pull-right"> <a class="btn btn-sm btn-success" href="#" data-abc="true"><i class="fa fa-paper-plane mr-1"></i> Proceed to payment</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
      
  </body>
</html>
`;

export default function Pdf() {
  

 
  const printToFile = async () => {
    
    const { uri } = await Print.printToFileAsync({
      html
    });
    console.log('File has been saved to:', uri);
    await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
  }


  return (
    <View style={styles.container}>
      <View />
      <Button title='Print to PDF file' onPress={printToFile}/>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    marginTop: 20
  }
});

我在网上搜索过，但没有找到任何解决方案。

我是否必须在 react native 标签中编写 HTML 代码。

Answer 1

你可以像那样使用 webview 来做到这一点；

const yourHtmlFile = "<html> ..."
<WebView
    originWhitelist={['*']}
    source={{ html: yourHtmlFile }}
  />

有用。

我想将数据传递给 html

问题描述

1 个解决方案

解决方案1
0 2021-10-28 08:58:43

我想将数据传递给 html

问题描述

1 个解决方案

解决方案1 0 2021-10-28 08:58:43

解决方案1
0 2021-10-28 08:58:43