Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Expo print isn´t printing an custom html

See original GitHub issue

🐛 Bug Report

Expected behaviour: print an pdf passing an “html”

Environment: “react-native-web”: “~0.11.7”, “expo-print”: “~9.0.1”, “expo”: “~38.0.8”

Target Plataform: Web

Reproducible Demo

    const htmlContent = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pdf Content</title>
        <style>
            body {
                font-size: 16px;
                color: rgb(255, 196, 0);
            }            h1 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Hello, Unica Exames!</h1>
    </body>
    </html>
`;

const createPDF = async (html) => {
    console.log(html);
    try {
        const { uri } = await Print.printToFileAsync({ html });
        console.log(uri);
        return uri;
    } catch (err) {
        console.error(err);
    }
};

export const PrescriptionPage  = ({ navigation }) => {
    return(
        <View style={{flex: 1}}>
            <SafeAreaView style={{ flex: 1, width: null, height: null }}>
                <ImageBackground source={backgroundImage} style={styles.backgroundContainer}>
                    <TouchableOpacity style={styles.sideOptionsButton} onPress={() => createPDF(htmlContent)}>
                        <Ionicons name='ios-menu' size={28} color='#ffffff' />
                    </TouchableOpacity>
                    <Text style={styles.logoTextStyle}>PrescriptionPage</Text>
                </ImageBackground>
            </SafeAreaView>
        </View>
    );
};

<– As an added benefit- creating a repro may help you identify the source of the bug, which means we are one step closer to fixing it! Thanks for helping us help you! –>

Steps to Reproduce

Expected Behavior vs Actual Behavior

the function is printing the content of “PrescriptionPage” As if im passing the “PrescritionPage” html not my HTMLcontent varible

The Log:

TypeError: _await$Print$printToF is undefined createPDF$ EspecialPrescriptionPage.js:77 tryCatch runtime.js:45 invoke runtime.js:274 method runtime.js:97 tryCatch runtime.js:45 invoke runtime.js:135 invoke runtime.js:145 promise callback*invoke runtime.js:144 callInvokeWithMethodAndArg runtime.js:170 callInvokeWithMethodAndArg runtime.js:169 enqueue runtime.js:192 method runtime.js:97 async runtime.js:219 createPDF EspecialPrescriptionPage.js:70 onPress EspecialPrescriptionPage.js:206 touchableHandlePress index.js:192 _performSideEffectsForTransition index.js:777 _receiveSignal index.js:692 touchableHandleResponderRelease index.js:456 propName index.js:74 React 17 unstable_runWithPriority scheduler.development.js:818 React 4 index.js:1

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

3reactions

X0RW3LLcommented, Dec 20, 2020

Here’s a very hacky workaround:

const print = () => {
    const pW = window.open('', '', 'height=500, width=500')
    pW.document.write(htmlContent)
    pW.document.close()
    pW.print()
}

Pass this into your TouchableOpacity’s onPress. What this will do is it will open a new window (with 500x500 dimensions) with whatever HTML you have inside htmlContent rendered, and it will prompt you to print either to file or to a printer.

Only works on desktop though (to my knowledge; I only tested iOS)

0reactions

github-actions[bot]commented, Feb 10, 2022

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.