将本机 base64 反应为 pdf 展览打印答案

【问题标题】：React native base64 to pdf expo print将本机 base64 反应为 pdf 展览打印
【发布时间】：2021-08-16 00:06:49
【问题描述】：

我想在 react 本机移动应用程序上打印一个 pdf 文件，我从 api 收到一个 base64 代码，并通过使用它向客户展示他/她的发票 pdf。我尝试使用 Expo Print 但我无法处理它，我不断收到

错误：对象作为 React 子对象无效（找到：带有键 {_40、_65、_55、_72} 的对象）。如果您打算渲染一组子项，请改用数组。]

我将不胜感激！

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet,TouchableHighlight } from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import * as Print from 'expo-print';

const InvoiceScreen = async({ route, navigation }) => {
  const { invoice} = route.params;
  const my_uri = "data:application/pdf;base64"+invoice
  console.log("DID INVIOCE COMEEE",invoice)
  await   Print.printAsync(
    {uri:my_uri,
      width: 595, height: 842 })
    return (
      <View></View>
      );
};

export default InvoiceScreen;

【问题讨论】：

我解决了这个问题，这是由于函数的异步方法，我删除异步后它起作用了。如果有人正在寻找答案:)

标签： reactjs react-native pdf base64 expo

【解决方案1】：

用这个替换你的代码：

const InvoiceScreen = async({ route, navigation }) => {
  const { invoice } = route.params;
  const my_uri = `data:application/pdf;base64,${invoice}`;
  await Print.printAsync({uri:my_uri});
};

export default InvoiceScreen;

【讨论】：

您好，感谢您的回答，但它不起作用:(我仍然得到相同的错误：对象作为 React 子项无效（找到：带有键 {_40、_65、_55、_72} 的对象） . 如果您打算渲染一组子项，请改用数组。] @Fabian

【解决方案2】：

可能问题出在“invoice”参数的数据类型上，它必须是一个字符串，它必须是 pdf 文件的 base64。 Reference

如果您使用 Expo - 托管工作流程（Expo CLI / 工具），要查看 pdf，我建议您使用 https://www.npmjs.com/package/rn-pdf-reader-js 我还留下了一个简单的实现：

import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import { globalStyles } from "../../constants/globalStyles";
import PDFReader from "rn-pdf-reader-js";

export default function XScreen({ navigation, route }) {

  return (
    <View style={globalStyles.backGround}>
      <PDFReader
        source={{
          base64: route.params.source,
        }}
        style={styles.pdf}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  pdf: {
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

注意：

route.params.source = data:application/pdf;base64,${response.data.data};
response.data.data = string base64 pdf

【讨论】：