打印反应本机文本和生成的 QR

Question

您好，我需要生成 PDF o HTML 视图以从 Android 设备打印文档。所以我开始使用Print from 'expo-print'。我可以做到这一点

Print.printAsync({
  html: "<h3>Hello World</h3>"
});

并且工作正常。但是我想在 HTML 中生成并包含一个 QR 码，我想使用 react-native-qrcode 但我不知道如何在其中包含它。

说明：二维码也需要无连接创建

谢谢

Answer 1

如果可以打印html代码，看来可以使用html中使用的代码。您将能够使用 img 标签。

const htmlcode = '<html>'
    + '<head>'
    + '<title>Testing QR code</title>'
    + '</head>'
    + '<body>'
    +  '<img id='barcode' src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" alt="" title="HELLO" width="50" height="50" />'
    + '</body>'
    + '</html>';
...
Print.printAsync({
  html: htmlcode
});

由于编辑问题而增加的答案：

如果想用QRCODE，用你想用的模块是解决不了的。相反，您可以通过“React-native-web”来解决这个问题。我会将 link 附加到 official document of Expo 以用于 网络设置 。设置完成后，使用现有的应用程序开发方法。但是，QRcode 模块目前无法在 Web 上运行。这个问题的解决方法是设置QRCODE为图片文件路径，而不是我第一个答案中的web路径，离线时显示。

二维码示例

import React, { Component } from 'react';
import QRCode from 'react-native-qrcode';

import { StyleSheet, View, TextInput } from 'react-native';

export default class HelloWorld extends Component {
  state = {
    text: 'testQRcode',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(text) => this.setState({text: text})}
          value={this.state.text}
        />
        <QRCode
          value={this.state.text}
          size={200}
          bgColor='purple'
          fgColor='black'/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },

    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    }
});

Answer 2

我刚遇到同样的问题，这是我的解决方案。

我使用 react-native-qrcode-svg 因为它有一个 getRef 道具供您进一步处理 QR 数据。下面，您可以找到我的粗略实现（我的主要代码在另一台计算机上）。您可以进一步自定义它以隐藏 QRCode 组件或使用 Redux 来存储 QRData 但它应该可以正常工作。

import QRCode from 'react-native-qrcode-svg';

...

constructor(props) {
    super(props)
    this.state = { qrData: "" }
}

componentDidMount () {
  this.getDataURL(); // => Calling this in here to make sure the QRCode component did mount
}

... more code ...
print = () => {
  Print.printAsync({
    html: `
       <h3>Hello World</h3>
       <img src="data:image/jpeg;base64,${this.state.qrData}"/>
     `
  });
}
...

getDataURL() {
  this.svg.toDataURL(this.callback);
}
callback(dataURL) {
  this.setState({qrData: dataURL});
}
render() {
  return (
    <QRCode
      value="Just some string value"
      getRef={(c) => (this.svg = c)}
    />
    <Button title="Print QR to HTML" onPress={this.print} />
  );
}

Answer 3

您可以使用 rn-qr-generator 模块 (https://www.npmjs.com/package/rn-qr-generator)。您需要将 value 传递给图书馆，它会 return 您 uri 和 base64 生成的二维码数据

import RNQRGenerator from 'rn-qr-generator';

componentDidMount() {
    RNQRGenerator.generate({
      value: 'otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example', // required
      height: 300,
      width: 300,
      base64: false, // default 'false'
      backgroundColor: 'black', // default 'white'
      color: 'white', // default 'black'
    })
      .then(response => {
        const { uri, width, height, base64 } = response;
        this.setState({ imageUri: uri });
      })
      .catch(error => console.log('Cannot create QR code', error));
  }

打印反应本机文本和生成的 QR

Print react native text and QR generated

qr-code

react-native

expo