How to download base64 encoded link file in Webview using React native

Question

We have list of download links with base64 encoded string in the href with download attribute which works well in the browser but in Webview it gives error.

Here is the webview code

<WebView style={styles.WebView}
        useWebKit={true}
        source={{ uri: url }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        decelerationRate="normal"
        startInLoadingState={true}
        // originWhitelist={['*']}
        originWhitelist={['http://*','https://*', 'git://*',"file://"]}
        mixedContentMode="compatibility"
        injectedJavaScript={INJECTEDJAVASCRIPT}
        mediaPlaybackRequiresUserAction={false}
        allowsInlineMediaPlayback={true}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
        onNavigationStateChange={
          (newNavState) => {
            console.log('TEST');
        }

      }

    // onShouldStartLoadWithRequest={this.onLoadStart}

    />

Here is the Error I get

How Can I intercept the link and decode the base64 string to file and save in mobile? Thanks.

score 0 · Answer 1 · answered Apr 28 '23 at 22:29

Have you struggled with this? Have similar issue - looks like it is not possible to serve in WebView base64 encoded uri, as well local file:// urls.

I have already workaround, which allow to 'share' the file, so I can open it in browser:

    import * as FileSystem from 'expo-file-system';
    import * as Sharing from "expo-sharing";

    ...

    const pdfUri = `${FileSystem.cacheDirectory}file.pdf`;
    try {
      await FileSystem.writeAsStringAsync(pdfUri, base64String, {
        encoding: FileSystem.EncodingType.Base64,
      });
    } catch (e) {
      console.log(e)
    }

    const localUrl = Platform.OS === 'ios' ? pdfUri : `file://${pdfUri}`;

    Sharing.shareAsync(localUrl);

How to download base64 encoded link file in Webview using React native

1 Answers1