React Native Android WebView无法加载PDF/DOCX/Xlsx问题求助

Hey there, I’ve run into similar headaches with React Native WebView failing to load PDFs, DOCX, and Xlsx files on Android before—let’s break down the most reliable fixes and workarounds:

1. Fix URL Encoding First #

The #1 culprit here is usually unencoded special characters in your attachmentUrl (like spaces, &, ?, or slashes). When you concatenate the raw URL directly, these characters break the viewer’s ability to parse the document link. Always encode the document URL first:

const encodedAttachmentUrl = encodeURIComponent(attachmentUrl);

Use this encoded string instead of the raw attachmentUrl when building your final viewer URL.

2. Use the Correct Viewer Prefixes #

Your existing prefixes had small issues that might block loading:

• For PDFs, stick with this Google Docs Viewer prefix (note the plain & instead of &—you don’t need HTML entity encoding in JS strings):

  https://docs.google.com/viewer?embedded=true&url=
  

• For Office files (DOCX/Xlsx), Microsoft’s online viewer is way more reliable than Google’s for these formats:

  https://view.officeapps.live.com/op/view.aspx?src=
  

3. Add Critical Android WebView Configurations #

Android’s WebView needs extra settings to properly render these third-party viewers. Update your component with these non-negotiable props:

<WebView
  source={{ uri: `${viewerPrefix}${encodedAttachmentUrl}` }}
  javaScriptEnabled={true}
  cacheEnabled={false}
  startInLoadingState={true}
  domStorageEnabled={true} // Required for the viewer's JavaScript to run
  allowFileAccess={true} // Helps with loading viewer resources
  mixedContentMode="compatibility" // Fixes issues if your document uses HTTP and the viewer uses HTTPS
/>

4. Check Document Accessibility #

A quick reality check: Both Google and Microsoft’s viewers require the document URL to be publicly accessible. If your document is behind authentication (like a private cloud storage link), these viewers won’t be able to pull it. In that case, you’ll need to either:

• Generate a temporary public access link for the document
• Use a native library (like react-native-pdf for PDFs) that can handle authenticated requests directly

Full Modified Example #

Here’s how all these pieces fit together in practice:

import WebView from 'react-native-webview';

// ...

const attachmentUrl = "your-document-url-here";
const encodedAttachmentUrl = encodeURIComponent(attachmentUrl);

// Auto-select the best viewer based on file type
const viewerPrefix = attachmentUrl.match(/\.(pdf)$/i)
  ? 'https://docs.google.com/viewer?embedded=true&url='
  : 'https://view.officeapps.live.com/op/view.aspx?src=';

<WebView
  source={{ uri: `${viewerPrefix}${encodedAttachmentUrl}` }}
  javaScriptEnabled={true}
  cacheEnabled={false}
  startInLoadingState={true}
  domStorageEnabled={true}
  allowFileAccess={true}
  mixedContentMode="compatibility"
/>

内容的提问来源于stack exchange，提问作者Hardik