WebView应用内网页Div打印按钮失效，如何实现该功能？

我来帮你搞定这个WebView里打印指定Div的问题！你的原代码在普通浏览器里可能没问题，但WebView有自己的上下文限制，直接替换document.body.innerHTML很容易破坏页面结构，导致打印失败或者页面异常。下面分步骤给你解决思路和改进后的代码：

一、先分析原代码的问题 #

你的代码通过替换整个body内容来打印，这种方式在WebView环境下有几个坑：

• 直接修改body会丢失原页面的事件绑定、WebView的内部状态，可能导致打印后页面无法正常交互
• WebView对window.print()的处理和普通浏览器有差异，可能在替换DOM后还没渲染完成就触发打印，导致内容空白
• 没有保留原页面的样式，打印出来的内容可能和页面显示不一致

二、改进后的JavaScript代码（推荐用iframe隔离打印内容） #

这种方法不会修改原页面的DOM结构，而是创建一个隐藏的iframe来承载要打印的内容，同时复制原页面的样式，保证打印效果和页面一致：

function printDiv(divName) {
    const targetDiv = document.getElementById(divName);
    if (!targetDiv) {
        console.error('目标Div不存在');
        return;
    }

    // 创建隐藏的iframe容器
    const iframe = document.createElement('iframe');
    iframe.style.position = 'absolute';
    iframe.style.top = '-9999px';
    iframe.style.left = '-9999px';
    iframe.style.width = '100%';
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
    // 复制原页面的所有样式（包括内联样式和外部样式表）
    const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
    styles.forEach(style => {
        iframeDoc.head.appendChild(style.cloneNode(true));
    });

    // 写入要打印的Div内容
    iframeDoc.body.innerHTML = targetDiv.innerHTML;

    // 等待iframe内容完全渲染后再触发打印
    iframe.onload = function() {
        // 触发打印
        iframe.contentWindow.print();
        // 打印完成后清理iframe
        setTimeout(() => {
            document.body.removeChild(iframe);
        }, 1000);
    };

    // 手动触发iframe的加载事件（确保onload能执行）
    iframe.contentWindow.document.close();
}

三、WebView平台配置（关键！） #

光改JS还不够，你需要确保WebView的配置允许JavaScript和打印功能：

Android平台配置 #

在你的Android代码中，需要启用JavaScript并配置WebChromeClient来处理打印相关的窗口请求：

WebView webView = findViewById(R.id.your_webview_id);
WebSettings webSettings = webView.getSettings();

// 启用JavaScript
webSettings.setJavaScriptEnabled(true);
// 如果需要加载本地样式或资源，允许文件访问
webSettings.setAllowFileAccess(true);

// 设置WebChromeClient，处理打印时的窗口创建
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        WebView newWebView = new WebView(view.getContext());
        newWebView.getSettings().setJavaScriptEnabled(true);
        view.addView(newWebView);
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(newWebView);
        resultMsg.sendToTarget();
        return true;
    }
});

另外，Android 4.4及以上版本的WebView才支持完整的打印API，如果你需要兼容更低版本，可能需要额外的处理逻辑。

iOS平台配置 #

如果你用的是WKWebView，确保启用JavaScript即可，WKWebView会自动处理window.print()调用并弹出系统打印界面：

import WebKit

class YourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let webConfig = WKWebViewConfiguration()
        // 启用JavaScript
        webConfig.preferences.javaScriptEnabled = true
        
        let webView = WKWebView(frame: view.bounds, configuration: webConfig)
        view.addSubview(webView)
        
        // 加载你的网站
        if let url = URL(string: "your_website_url") {
            webView.load(URLRequest(url: url))
        }
    }
}

四、测试小技巧 #

• 先在普通浏览器里测试JS代码，确保能正常打印
• 在WebView中测试时，可以先尝试保存为PDF（很多设备的打印功能支持这个），不用真的连接打印机
• 检查目标Div的ID是否正确，避免找不到元素的情况

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