React Native WebView中阻止iframe内PDF自动下载的问题

方案1：修改服务器PDF响应头 #

如果能控制目标网站的服务器，调整PDF文件的响应头：

• 设置Content-Type: application/pdf，明确告知WebView这是PDF文件
• 添加Content-Disposition: inline，强制WebView内嵌渲染而非触发下载

方案2：注入PDF.js到WebView渲染PDF #

无法修改服务器时，可将PDF.js核心文件打包到项目中，通过注入JS替换iframe为PDF.js渲染容器：

1. 下载PDF.js预构建包，将其放入项目的asset目录
2. 修改WebView代码如下：

import React from "react";
import { WebView } from "react-native-webview";

export default function MCA() {
  return (
    <WebView
      source={{
        uri: "https://kleit.ac.in/master-of-computer-applications/",
      }}
      startInLoadingState={true}
      injectedJavaScript={`
        // 隐藏不需要的页面元素
        document.getElementsByClassName('toolbar-container')[0]?.style.display = 'none';
        document.getElementsByClassName('thim-nav-wrapper container')[0]?.style.display = 'none';
        document.getElementsByClassName('site-footer')[0]?.style.display = 'none';
        
        // 替换iframe为PDF.js渲染容器
        const iframe = document.getElementsByTagName("iframe")[0];
        if (iframe) {
          const pdfUrl = iframe.src;
          const pdfContainer = document.createElement('div');
          pdfContainer.style.width = '100%';
          pdfContainer.style.height = '500px';
          iframe.parentNode.replaceChild(pdfContainer, iframe);
          
          // 加载PDF.js并渲染第一页
          const script = document.createElement('script');
          script.src = 'file:///android_asset/pdf.js/build/pdf.min.js'; // Android路径
          // iOS路径改为 './pdf.js/build/pdf.min.js'（需配置asset目录）
          script.onload = () => {
            pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
              pdf.getPage(1).then(page => {
                const canvas = document.createElement('canvas');
                pdfContainer.appendChild(canvas);
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                page.render({
                  canvasContext: canvas.getContext('2d'),
                  viewport: viewport
                });
              });
            });
          };
          document.body.appendChild(script);
        }
      `}
      javaScriptEnabled={true}
      allowFileAccess={true} // Android需开启此权限
    />
  );
}

方案3：配置WebView原生属性（仅部分设备有效） #

Android端 #

启用WebView内置PDF渲染支持：

<WebView
  source={{ uri: "https://kleit.ac.in/master-of-computer-applications/" }}
  startInLoadingState={true}
  injectedJavaScript={`
    document.getElementsByClassName('toolbar-container')[0]?.style.display = 'none';
    document.getElementsByClassName('thim-nav-wrapper container')[0]?.style.display = 'none';
    document.getElementsByClassName('site-footer')[0]?.style.display = 'none';
  `}
  androidSettings={{
    allowFileAccess: true,
    allowContentAccess: true,
    builtInZoomControls: true,
    displayZoomControls: false,
    javaScriptCanOpenWindowsAutomatically: true
  }}
  javaScriptEnabled={true}
/>

iOS端 #

iOS的WKWebView默认支持PDF内嵌渲染，但如果服务器返回Content-Disposition: attachment响应头仍会触发下载。此时需配合原生代码拦截请求修改响应头，或优先使用方案2。

为什么之前的方法无效？ #

• controlsList="nodownload"是桌面Chrome专属属性，React Native WebView的内核（Android系统WebView、iOS WKWebView）不支持该属性
• 操作iframe的contentDocument存在两个问题：一是iframe加载完成时机晚于JS注入时机，导致contentDocument为null；二是部分WebView内核限制了对iframe内部DOM的直接修改

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