App.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * @flow
  5. */
  6. import React, { Component } from 'react';
  7. import {
  8. AppRegistry,
  9. Button,
  10. StyleSheet,
  11. NativeModules,
  12. Platform,
  13. Text,
  14. View
  15. } from 'react-native';
  16. import RNHTMLtoPDF from 'react-native-html-to-pdf';
  17. import RNPrint from 'react-native-print';
  18. export default class RNPrintExample extends Component {
  19. state = {
  20. selectedPrinter: null
  21. }
  22. // @NOTE iOS Only
  23. selectPrinter = async () => {
  24. const selectedPrinter = await RNPrint.selectPrinter()
  25. this.setState({ selectedPrinter })
  26. }
  27. // @NOTE iOS Only
  28. silentPrint = async () => {
  29. if (!this.state.selectedPrinter) {
  30. alert('Must Select Printer First')
  31. }
  32. const jobName = await RNPrint.print({
  33. printerURL: this.state.selectedPrinter.url,
  34. html: '<h1>Silent Print</h1>'
  35. })
  36. }
  37. async printHTML() {
  38. await RNPrint.print({
  39. html: '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>'
  40. })
  41. }
  42. async printPDF() {
  43. const results = await RNHTMLtoPDF.convert({
  44. html: '<h1>Custom converted PDF Document</h1>',
  45. fileName: 'test',
  46. base64: true,
  47. })
  48. await RNPrint.print({ filePath: results.filePath })
  49. }
  50. async printRemotePDF() {
  51. await RNPrint.print({ filePath: 'https://graduateland.com/api/v2/users/jesper/cv' })
  52. }
  53. customOptions = () => {
  54. return (
  55. <View>
  56. {this.state.selectedPrinter &&
  57. <View>
  58. <Text>{`Selected Printer Name: ${this.state.selectedPrinter.name}`}</Text>
  59. <Text>{`Selected Printer URI: ${this.state.selectedPrinter.url}`}</Text>
  60. </View>
  61. }
  62. <Button onPress={this.selectPrinter} title="Select Printer" />
  63. <Button onPress={this.silentPrint} title="Silent Print" />
  64. </View>
  65. )
  66. }
  67. render() {
  68. return (
  69. <View style={styles.container}>
  70. {Platform.OS === 'ios' && this.customOptions()}
  71. <Button onPress={this.printHTML} title="Print HTML" />
  72. <Button onPress={this.printPDF} title="Print PDF" />
  73. <Button onPress={this.printRemotePDF} title="Print Remote PDF" />
  74. </View>
  75. );
  76. }
  77. }
  78. const styles = StyleSheet.create({
  79. container: {
  80. flex: 1,
  81. justifyContent: 'center',
  82. alignItems: 'center',
  83. backgroundColor: '#F5FCFF',
  84. },
  85. });