Vue + Android WebView 实现大文件 PDF 预览完整解决方案

原创 已于 2025-12-05 22:59:58 修改 · 733 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #android #pdf #webview

于 2025-12-05 18:16:38 首次发布

Vue + Android WebView 实现大文件 PDF 预览完整解决方案

一、问题背景

在企业级 PAD 应用开发中，我遇到了一个棘手的问题：100MB+ 的大 PDF 文件在 Android WebView 中预览时，出现严重的性能问题。

1.1 具体表现

问题表现
缩放卡顿双指缩放时明显卡顿，甚至卡死
字体模糊放大后字体不清晰，影响阅读
内存溢出大文件加载时容易 OOM 崩溃
渲染异常部分页面白屏或渲染不完整

关键发现：同样的 Vue2 项目，在桌面端浏览器访问完全正常，问题只出现在 Android WebView 环境。

1.2 尝试过的方案

我尝试了市面上几乎所有主流的 Vue PDF 预览插件，均存在不同程度的问题：

插件名称存在的问题
vue-pdf• 部分字体丢失或显示异常
• WebView 中大文件缩放严重卡顿或卡死
• 需要手动实现缩放、翻页等功能
vue-pdf-signature• 部分字体渲染模糊
• WebView 中大文件缩放严重卡顿或卡死
• 需要手动实现缩放、翻页等功能
vue-pdf-app• WebView 中大文件缩放严重卡顿或卡死
• 放大后字体不清晰
• 功能完善（缩放、翻页、搜索等）
@vue-office/pdf• WebView 中大文件缩放严重卡顿或卡死
• 需要手动实现缩放、翻页等功能
pdfjs-dist• 高版本（v4+）在 WebView/移动端浏览器不兼容，样式错乱或报错
• 低版本放大后字体不清晰
• 自带 viewer.html，功能完善（缩放、翻页、搜索等）

💡 关键发现：以上插件在桌面端浏览器中表现正常，问题主要出现在 Android WebView 环境。推测可能与 WebView 的硬件加速、Canvas 渲染性能、内存限制等因素有关。

二、最终解决方案

经过大量测试，我采用了 “PDF.js 多版本 + Android PDF 组件” 的混合方案：

┌─────────────────────────────────────────────────────────────┐
│                      PDF 预览策略                            │
├─────────────────────────────────────────────────────────────┤
│  桌面端浏览器  →  PDF.js v5（最新特性）                         │
│  移动端浏览器  →  PDF.js v3（兼容性好）                         │
│  Android App   →  android-pdf-viewer 组件（性能最优）          │
└─────────────────────────────────────────────────────────────┘

2.1 为什么需要 PDF.js 多版本？

  • PDF.js v5+：使用了现代 JavaScript 特性，在部分 Android WebView 和移动端浏览器中会出现样式错乱或报错
  • PDF.js v3：兼容性更好，适合移动端环境

2.2 为什么需要 Android PDF 组件？

即使使用 PDF.js v3，大文件在 WebView 中仍有性能瓶颈。使用 android-pdf-viewer PDF 组件：

  • 直接调用 Android 原生渲染能力
  • 支持流畅的缩放和翻页
  • 字体渲染清晰
  • 内存占用更低

三、技术架构

3.1 整体架构图

┌──────────────────────────────────────────────────────────────────┐
│                          Vue2 前端                                │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │                    PdfJsViewer 组件                         │  │
│  │  ┌─────────────┐  ┌─────────────┐  ┌──────────────────┐    │  │
│  │  │ PDF.js v5   │  │ PDF.js v3   │  │ Android Bridge   │    │  │
│  │  │   (桌面端)   │  │   (移动端)   │  │ 	(原生预览)      │    │  │
│  │  └─────────────┘  └─────────────┘  └──────────────────┘    │  │
│  └────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────┘
                              │
                              │ JavaScript Bridge
                              ▼
┌──────────────────────────────────────────────────────────────────┐
│                       Android WebView                            │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │                     WebActivity                            │  │
│  │  ┌───────────────────────┐  ┌───────────────────────────┐  │  │
│  │  │ @JavascriptInterface  │  │ android-pdf-viewer 插件    │  │  │
│  │  │ previewPdfByUrl       │  │ (全屏弹窗预览)              │  │  │
│  │  └───────────────────────┘  └───────────────────────────┘  │  │
│  └────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────┘

3.2 技术栈

层级技术版本
前端框架Vue2^2.6.11
PDF 渲染 (桌面)PDF.js5.4.449
PDF 渲染 (移动)PDF.js3.11.174
Android 原生android-pdf-viewer3.2.0-beta.3
工具库Hutool5.8.16

四、前端实现

4.1 PDF.js 部署

将两个版本的 PDF.js 放到 Vue 项目的 public 目录：

public/
├── pdfjs-v3/
│   ├── build/
│   │   ├── pdf.js
│   │   ├── pdf.worker.js
│   │   └── ...
│   └── web/
│       ├── viewer.html
│       ├── viewer.js
│       ├── viewer.css
│       ├── locale/
│       ├── images/
│       └── ...
├── pdfjs-v5/
│   ├── build/
│   │   ├── pdf.mjs
│   │   ├── pdf.worker.mjs
│   │   └── ...
│   └── web/
│       ├── viewer.html
│       ├── viewer.mjs
│       ├── viewer.css
│       ├── locale/
│       ├── images/
│       └── ...

📝 说明：直接将下载的 PDF.js 发布包解压到 public 目录即可。

下载地址：

  • PDF.js: https://github.com/mozilla/pdf.js/releases

4.2 Vue PDF 预览组件

文件路径：src/components/PdfJsViewer/index.vue

<template>
    <div class="pdfjs-viewer-container" :style="containerStyle">
        <!-- Loading 状态 -->
        <div v-if="loading" class="pdfjs-loading">
            <div class="loading-spinner"></div>
            <span class="loading-text">{{ loadingText }}</span>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="pdfjs-error">
            <i class="el-icon-warning-outline"></i>
            <span class="error-text">{{ error }}</span>
            <el-button type="primary" @click="loadPdf">重新加载</el-button>
        </div>

        <template v-else-if="pdfBlobUrl">
            <!-- Android PDF 组件预览按钮 -->
            <span v-if="isAndroidApp" class="native-preview-btn" @click="openWithNativeViewer">
                查看原图
            </span>

            <!-- PDF 预览 iframe -->
            <iframe
                ref="pdfIframe"
                :src="viewerUrl"
                class="pdfjs-iframe"
                frameborder="0"
                allowfullscreen
            ></iframe>
        </template>

    </div>
</template>

<script>
import request from '@/utils/request'
import {isNotNull} from "@/utils/common";
import defaultSettings from "@/settings";
import {getToken} from "@/utils/auth";
import {md5} from "@/utils/secret";

export default {
    name: 'PdfJsViewer',
    props: {
        // PDF 文件路径（用于 API 请求）
        url: {
            type: String,
            required: true
        },
        // 容器高度
        height: {
            type: String,
            default: '100%'
        },
        // 容器宽度
        width: {
            type: String,
            default: '100%'
        },
        // 加载提示文字
        loadingText: {
            type: String,
            default: '正在加载PDF文件...'
        }
    },
    data() {
        return {
            loading: false,
            error: null,
            pdfBlobUrl: null
        }
    },
    computed: {
        containerStyle() {
            return {
                height: this.height,
                width: this.width
            }
        },
        // 检测是否为移动端
        isMobile() {
            const userAgent = navigator.userAgent.toLowerCase()
            const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'windows phone', 'mobile']
            return mobileKeywords.some(keyword => userAgent.includes(keyword))
        },
        // 检测是否为 Android App
        isAndroidApp() {
            const userAgent = navigator.userAgent.toLowerCase()
            return userAgent.includes('android') && window.android
        },
        viewerUrl() {
            if (!this.pdfBlobUrl) return ''
            // 根据设备类型选择不同的 pdfjs 版本
            // 移动端使用 pdfjs-v3，桌面端使用 pdfjs-v5
            const pdfjsPath = this.isMobile ? '/pdfjs-v3/web/viewer.html' : '/pdfjs-v5/web/viewer.html'
            // 将 Blob URL 作为参数传给 viewer.html
            return `${defaultSettings.publicPath}${pdfjsPath}?file=${encodeURIComponent(this.pdfBlobUrl)}#zoom=page-width`
        }
    },
    watch: {
        url: {
            immediate: true,
            handler(newUrl) {
                if (isNotNull(newUrl)) {
                    this.loadPdf()
                } else {
                    // 清理之前的 PDF 数据
                    this.revokePdfData()
                }
            }
        }
    },
    methods: {
        /**
         * 获取 PDF 文件流
         */
        async fetchPdfFile(previewUrl) {
            return request({
                url: previewUrl,
                method: 'get',
                responseType: 'arraybuffer'
            })
        },

        /**
         * 加载 PDF 文件
         */
        async loadPdf() {
            // 清理之前的 PDF 数据
            this.revokePdfData()

            this.loading = true
            this.error = null

            try {
                // 获取文件流
                const response = await this.fetchPdfFile(this.url)

                // 检查响应数据
                if (!response || response.byteLength === 0) {
                    this.error = '获取到的文件内容为空'
                    this.$emit('load-error', new Error(this.error))
                    return
                }

                // 创建 Blob 对象
                const blob = new Blob([response], { type: 'application/pdf' })

                // 创建 Blob URL
                this.pdfBlobUrl = URL.createObjectURL(blob)

                this.$emit('load-success')

                // 启动字体问题修复机制
                this.fixFontIssue()
            } catch (err) {
                console.error('PDF 加载失败:', err)
                this.error = err.message || '加载PDF文件失败，请重试'
                this.$emit('load-error', err)
            } finally {
                this.loading = false
            }
        },

        /**
         * 修复移动端PDF字体显示问题
         */
        fixFontIssue() {
            // 只在移动端执行
            if (!this.isMobile) return

            // 最大重试次数
            const MAX_RETRY_COUNT = 3;

            const attemptFix = (retryCount = 0) => {
                if (retryCount > MAX_RETRY_COUNT) return

                setTimeout(() => {
                    try {
                        const iframe = this.$refs.pdfIframe
                        if (iframe && iframe.contentWindow && iframe.contentWindow.PDFViewerApplication) {
                            const app = iframe.contentWindow.PDFViewerApplication

                            // 检查PDF是否已加载
                            if (app.pdfDocument && app.pdfViewer.pagesPromise) {
                                // 等待页面渲染完成后再进行修复
                                app.pdfViewer.pagesPromise.then(() => {
                                    // 切换缩放模式触发重新渲染
                                    app.pdfViewer.currentScaleValue = "page-fit"
                                    setTimeout(() => {
                                        app.pdfViewer.currentScaleValue = "page-width"
                                    }, 50)
                                })
                            } else if (retryCount < MAX_RETRY_COUNT) {
                                // 如果PDF还未完全加载，稍后重试
                                attemptFix(retryCount + 1)
                            }
                        } else if (retryCount < MAX_RETRY_COUNT) {
                            // 如果iframe还未准备好，稍后重试
                            attemptFix(retryCount + 1)
                        }
                    } catch (e) {
                        alert("字体修复尝试失败")
                        console.warn("字体修复尝试失败:", e)
                        if (retryCount < MAX_RETRY_COUNT) {
                            attemptFix(retryCount + 1)
                        }
                    }
                }, 500 * (retryCount + 1)) // 递增延迟时间
            }

            attemptFix()
        },

        /**
         * 使用 Android PDF 预览插件打开 PDF
         */
        async openWithNativeViewer() {
            if (!this.pdfBlobUrl) {
                this.$message.warning('PDF 文件未加载完成')
                return
            }

            if (!this.isAndroidApp) {
                this.$message.warning('当前环境不支持 Android PDF 预览插件')
                return
            }

            try {
                // 调用Android PDF预览插件方法
                const success = this.previewPdfByNative(this.url)

                if (!success) {
                    this.$message.error({message: "打开 Android PDF 预览插件失败，请重试", offset: 80})
                }
            } catch (err) {
                console.error('打开 Android PDF 预览插件失败:', err)
                this.$message.error({message: "打开 Android PDF 预览插件失败，请重试", offset: 80})
            }
        },

        /**
         * 使用 Android PDF 预览插件
         * @param {String} url - PDF 文件 URL
         * @returns {Boolean} 是否成功调用
         */
        previewPdfByNative(url) {
            if (!this.isAndroidApp || !window.android.previewPdfByUrl) {
                this.$message.warning({message: "'当前环境不支持 Android PDF 预览插件", offset: 80})
                return false
            }
            try {
                const fileName = md5(url) + ".pdf";
                window.android.previewPdfByUrl(
                    url,
                    fileName,
                    JSON.stringify({
                        Authorization: getToken()
                    })
                )
                return true
            } catch (err) {
                console.error('调用 Android PDF 预览插件失败:', err)
                return false
            }
        },

        /**
         * 释放 PDF 数据
         */
        revokePdfData() {
            if (this.pdfBlobUrl) {
                // 组件销毁时释放 Blob URL
                URL.revokeObjectURL(this.pdfBlobUrl)
                this.pdfBlobUrl = null
            }
        }
    },
    beforeDestroy() {
        // 组件销毁时释放 PDF 数据
        this.revokePdfData()
    }
}
</script>

<style scoped>
.pdfjs-viewer-container {
    position: relative;
    overflow: hidden;
    background-color: #525659;
}

.pdfjs-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.pdfjs-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    color: #606266;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(64, 158, 255, 0.3);
    border-top-color: #409eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 16px;
    font-size: 14px;
}

.pdfjs-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #525659;
    color: #fff;
}

.pdfjs-error .el-icon-warning-outline {
    font-size: 48px;
    color: #e6a23c;
    margin-bottom: 16px;
}

.error-text {
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
    padding: 0 20px;
}

/* Android PDF 预览插件按钮样式 */
.native-preview-btn {
    position: absolute;
    right: 50px;
    height: 32px;
    line-height: 33px;
    z-index: 1000;
    text-align: center;
    font-size: 14px;
    cursor: pointer;

    :active {
        background: none;
    }
}
</style>

4.3 组件使用方式

<template>
    <div>
        <pdf-js-viewer
            :url="pdfUrl"
            height="100vh"
            @load-success="onLoadSuccess"
            @load-error="onLoadError"
        />
    </div>
</template>

<script>
import PdfJsViewer from '@/components/PdfJsViewer'

export default {
    components: { PdfJsViewer },
    data() {
        return {
            pdfUrl: 'https://example.com/document.pdf'
        }
    },
    methods: {
        onLoadSuccess() {
            console.log('PDF 加载成功')
        },
        onLoadError(err) {
            console.error('PDF 加载失败:', err)
        }
    }
}
</script>

五、Android 端实现

5.1 添加权限

AndroidManifest.xml：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- 网络权限，用于下载 PDF 文件 -->
    <uses-permission android:name="android.permission.INTERNET" />
    
    <!-- ... -->
</manifest>

5.2 添加依赖

app/build.gradle：

dependencies {
    // ... 其他依赖
    
    // PDF 预览插件
    implementation 'com.github.mhiew:android-pdf-viewer:3.2.0-beta.3'
    
    // 工具库（用于 HTTP 请求和文件操作）
    implementation 'cn.hutool:hutool-all:5.8.16'
}

注意：该库托管在 JitPack，需要在项目根 build.gradle 中添加：

allprojects {
    repositories {
        // ...
        maven { url 'https://jitpack.io' }
    }
}

5.3 PDF 预览弹窗布局

res/layout/dialog_pdf_preview.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <!-- 标题栏 -->
    <RelativeLayout
        android:id="@+id/titleBar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:background="#F5F5F5"
        android:paddingHorizontal="16dp">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="PDF 预览"
            android:textColor="#333333"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvPageInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#666666"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/ivClose"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:contentDescription="关闭"
            android:padding="8dp"
            android:src="@android:drawable/ic_menu_close_clear_cancel" />

    </RelativeLayout>

    <!-- PDF 预览区域 -->
    <com.github.barteksc.pdfviewer.PDFView
        android:id="@+id/pdfView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/titleBar" />

</RelativeLayout>

5.4 WebActivity 核心代码

package com.qms.android;

import androidx.appcompat.app.AlertDialog;
import android.app.Activity;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.util.Base64;

import com.github.barteksc.pdfviewer.PDFView;

import cn.hutool.core.io.FileUtil;
import cn.hutool.crypto.SecureUtil;
import cn.hutool.http.HttpRequest;
import cn.hutool.http.HttpResponse;

import org.json.JSONException;
import org.json.JSONObject;

import java.io.File;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

public class WebActivity extends Activity {

    private WebView mWebView;

    // ... 其他代码省略 ...

    /**
     * 初始化 WebView，添加 JavaScript 接口
     */
    public void initWebView() {
        // ... WebView 配置代码 ...
        
        // 添加 JavaScript 接口，供前端调用
        mWebView.addJavascriptInterface(this, "android");
    }

    // ==================== PDF 预览相关方法 ====================

    /**
     * JavaScript 接口：通过 URL 预览 PDF
     * @param url PDF 文件的下载地址
     * @param fileName 文件名（用于缓存）
     * @param headersJson 请求头信息的 JSON 字符串
     */
    @JavascriptInterface
    public void previewPdfByUrl(String url, String fileName, String headersJson) {
        runOnUiThread(() -> {
            if (TextUtils.isEmpty(url)) {
                ToastUtils.showLong(this, "PDF 地址为空");
                return;
            }
            downloadPdfAndPreview(url, fileName, headersJson);
        });
    }

    /**
     * JavaScript 接口：通过 Base64 数据预览 PDF
     * @param base64Data PDF 文件的 Base64 编码数据
     */
    @JavascriptInterface
    public void previewPdfByData(String base64Data) {
        runOnUiThread(() -> {
            if (TextUtils.isEmpty(base64Data)) {
                ToastUtils.showLong(this, "PDF 数据为空");
                return;
            }
            saveBase64PdfAndPreview(base64Data);
        });
    }

    /**
     * 显示加载提示弹窗
     */
    private AlertDialog showLoadingDialog(String message) {
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.HORIZONTAL);
        layout.setPadding(48, 32, 48, 32);
        layout.setGravity(android.view.Gravity.CENTER_VERTICAL);

        ProgressBar progressBar = new ProgressBar(this);
        layout.addView(progressBar);

        TextView textView = new TextView(this);
        textView.setText(message);
        textView.setTextSize(16);
        textView.setPadding(32, 0, 0, 0);
        layout.addView(textView);

        AlertDialog dialog = new AlertDialog.Builder(this)
                .setView(layout)
                .setCancelable(false)
                .create();
        dialog.show();
        return dialog;
    }

    /**
     * 下载 PDF 文件并预览
     */
    private void downloadPdfAndPreview(String url, String fileName, String headersJson) {
        Map<String, String> headers = parseHeaders(headersJson);

        if (TextUtils.isEmpty(fileName)) {
            // 使用 URL 的 MD5 作为缓存文件名
            fileName = SecureUtil.md5(url) + ".pdf";
        }

        // 下载到缓存目录
        String cachePath = getCacheDir().getAbsolutePath() + File.separator + "pdf_preview";
        File pdfFile = new File(cachePath, fileName);
        
        if (pdfFile.exists()) {
            // 缓存已存在，直接显示
            showPdfDialog(pdfFile);
            return;
        }

        // 显示加载提示
        AlertDialog loadingDialog = showLoadingDialog("正在加载文件，请稍候...");

        // 在子线程中执行下载
        new Thread(() -> {
            try {
                HttpRequest request = HttpRequest.get(url);
                // 添加请求头
                if (!headers.isEmpty()) {
                    for (Map.Entry<String, String> entry : headers.entrySet()) {
                        request.header(entry.getKey(), entry.getValue());
                    }
                }

                HttpResponse response = request.execute();
                runOnUiThread(loadingDialog::dismiss);

                if (response.isOk()) {
                    FileUtil.writeBytes(response.bodyBytes(), pdfFile);
                    runOnUiThread(() -> showPdfDialog(pdfFile));
                } else {
                    runOnUiThread(() -> ToastUtils.showLong(this, "PDF 下载失败"));
                }
            } catch (Exception e) {
                e.printStackTrace();
                runOnUiThread(() -> {
                    loadingDialog.dismiss();
                    ToastUtils.showLong(this, "PDF 下载失败: " + e.getMessage());
                });
            }
        }).start();
    }

    /**
     * 解析请求头信息
     */
    private Map<String, String> parseHeaders(String headersJson) {
        Map<String, String> headers = new HashMap<>();
        if (TextUtils.isEmpty(headersJson)) return headers;
        
        try {
            JSONObject jsonObject = new JSONObject(headersJson);
            Iterator<String> keys = jsonObject.keys();
            while (keys.hasNext()) {
                String key = keys.next();
                headers.put(key, jsonObject.optString(key));
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return headers;
    }

    /**
     * 保存 Base64 格式的 PDF 数据并预览
     */
    private void saveBase64PdfAndPreview(String base64Data) {
        AlertDialog loadingDialog = showLoadingDialog("正在加载文件，请稍候...");

        try {
            // 使用 Base64 数据的 MD5 作为缓存文件名
            String cacheFileName = SecureUtil.md5(base64Data) + ".pdf";
            String cachePath = getCacheDir().getAbsolutePath() + File.separator + "pdf_preview";
            File pdfFile = new File(cachePath, cacheFileName);
            
            if (!pdfFile.exists()) {
                byte[] bytes = Base64.decode(base64Data, Base64.DEFAULT);
                FileUtil.writeBytes(bytes, pdfFile);
            }

            loadingDialog.dismiss();
            showPdfDialog(pdfFile);
        } catch (Exception e) {
            loadingDialog.dismiss();
            ToastUtils.showLong(this, "PDF 数据处理失败");
        }
    }

    /**
     * 显示 PDF 预览对话框
     */
    private void showPdfDialog(File pdfFile) {
        if (pdfFile == null || !pdfFile.exists()) {
            ToastUtils.showLong(this, "PDF 文件不存在");
            return;
        }

        View view = LayoutInflater.from(this).inflate(R.layout.dialog_pdf_preview, null, false);
        PDFView pdfView = view.findViewById(R.id.pdfView);
        ImageView ivClose = view.findViewById(R.id.ivClose);
        TextView tvPageInfo = view.findViewById(R.id.tvPageInfo);

        AlertDialog dialog = new AlertDialog.Builder(this)
                .setView(view)
                .setCancelable(true)
                .create();

        ivClose.setOnClickListener(v -> dialog.dismiss());
        dialog.show();

        // 设置弹窗全屏显示
        Window window = dialog.getWindow();
        if (window != null) {
            window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, 
                           WindowManager.LayoutParams.MATCH_PARENT);
            window.setBackgroundDrawableResource(android.R.color.white);
        }

        // 延迟加载 PDF，确保 View 已完成布局
        pdfView.post(() -> loadPdf(pdfView, pdfFile, tvPageInfo));
    }

    /**
     * 加载并显示 PDF 内容
     */
    private void loadPdf(PDFView pdfView, File pdfFile, TextView tvPageInfo) {
        pdfView.fromFile(pdfFile)
                .enableSwipe(true)           // 启用滑动翻页
                .swipeHorizontal(false)      // 垂直滑动
                .enableDoubletap(true)       // 启用双击缩放
                .defaultPage(0)              // 默认显示第一页
                .enableAnnotationRendering(false)
                .enableAntialiasing(true)    // 启用抗锯齿
                .spacing(4)                  // 页面间距
                .onPageChange((page, pageCount) -> {
                    tvPageInfo.setText(String.format("%d / %d", page + 1, pageCount));
                })
                .onLoad(nbPages -> {
                    tvPageInfo.setText(String.format("1 / %d", nbPages));
                    // 设置缩放范围
                    pdfView.setMinZoom(0.5f);
                    pdfView.setMaxZoom(10.0f);
                    pdfView.setMidZoom(2f);
                })
                .onError(t -> {
                    ToastUtils.showLong(this, "PDF 加载失败: " + t.getMessage());
                })
                .load();
    }
}

六、前端调用 Android PDF 组件方法

6.1 调用方式一：通过 URL 预览（推荐）

推荐使用此方式，由 Android 端负责下载和渲染，前端只需传递 URL 和请求头。

// 检测是否为 Android App 环境
const isAndroidApp = navigator.userAgent.toLowerCase().includes('android') && window.android

if (isAndroidApp && window.android.previewPdfByUrl) {
    window.android.previewPdfByUrl(
        'https://api.example.com/file/xxx',  // 下载 URL
      	'xxx.pdf',  						 // 文件名称（缓存使用）
        JSON.stringify({                	 // 请求头
            Authorization: 'Bearer xxx'
        })
    )
}

6.2 调用方式二：通过 Base64 数据预览（不推荐）

⚠️ 不推荐使用此方式

原因：前端使用 btoa() 将大文件转换为 Base64 时会导致浏览器卡死，100MB+ 的文件基本无法处理。

此接口仅适用于小文件（< 5MB）场景。

// 获取 PDF 的 ArrayBuffer
const response = await fetch(pdfUrl)
const arrayBuffer = await response.arrayBuffer()

// ⚠️ 大文件会导致浏览器卡死！
const base64Data = btoa(
    new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
)

// 调用 Android 原生方法
if (window.android?.previewPdfByData) {
    window.android.previewPdfByData(base64Data)
}

七、缓存策略优化

为了避免重复下载相同的 PDF 文件，我使用 MD5 哈希 作为缓存文件名：

场景缓存键说明
URL 方式（推荐）MD5(url) + ".pdf"相同 URL 只下载一次
Base64 方式MD5(base64Data) + ".pdf"仅适用于小文件

八、实现效果

8.1 桌面端浏览器 PDF 预览（PDF.js v5）

在这里插入图片描述

在这里插入图片描述

效果说明：

  • 桌面端使用 PDF.js v5，功能完善
  • 支持缩放、翻页、搜索等功能
  • 缩放流畅、放大后字体依然清晰

8.2 Android WebView PDF 预览（PDF.js v3）

在这里插入图片描述

效果说明：

  • Android WebView 使用 PDF.js v3 以保证兼容性
  • 支持手势缩放、翻页、搜索等功能
  • 大文件缩放时可能存在卡顿、放大后字体不清晰
  • 右上角提供「查看原图」按钮，点击后以弹窗方式打开 Android PDF 组件预览

8.3 Android PDF 组件预览（android-pdf-viewer）

在这里插入图片描述

在这里插入图片描述

效果说明：

  • 全屏弹窗预览，沉浸式体验
  • 顶部显示页码信息（如 1 / 1）
  • 右上角关闭按钮，操作便捷
  • 支持双指缩放
  • 放大后字体渲染清晰，缩放流畅无卡顿

8.4 使用体验对比

指标WebView + PDF.jsAndroid PDF 组件
缩放流畅度大文件卡顿明显，甚至卡死丝滑流畅
字体清晰度放大后模糊始终清晰
内存占用较高，易 OOM较低，稳定
首次加载快（直接渲染）需下载后预览

📝 以上为实际使用中的主观体验对比，非精确测量数据。

九、总结

本文介绍了在 Vue2 + Android WebView 环境下预览大文件 PDF 的完整解决方案：

  1. PDF.js 多版本策略：桌面端用 v5，移动端用 v3，解决兼容性问题
  2. Android PDF 组件：使用 android-pdf-viewer 实现高性能预览
  3. JS Bridge 通信：通过 @JavascriptInterface 实现前端与原生的交互
  4. MD5 缓存策略：避免重复下载，提升用户体验

这套方案已在生产环境稳定运行，成功解决了大文件 PDF 在 PAD 上的预览问题。

十、参考资源

标签：Vue2、Android、WebView、PDF预览、大文件、性能优化

uniapp [安卓苹果App端] - 详细实现PDF预览功能在线预览PDF文档，Uniapp App端实现pdf文件预览在线预览pdf二进制文件流、本地pdf文档、PDF文件地址url路径（解决白屏
🏆 前端领域优质创作者
11-10 1万+
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果安卓app，uniapp在线预览pdf功能，在安卓苹果app平台实现PDF的预览查看，uniappApp端实现pdf文件预览，UNIAPP在线预览PDF文档，Uniappapp在线预览pdf文件流，从后端接口里获取pdf文件如何转成链接预览，预览pdf的插件，uni-app的pdf预览功能，uniapp使用pdf.js插件预览pdf文件，预览pdf白屏没有报错，打开后没反应，打开是空白，加载PDF时发生错误，如
安卓H5预览PDF白屏解决方案
webzqr的博客
11-24 671
在安卓设备上，尤其是 APP 内嵌的 H5 页面 中预览 PDF 时出现问题，通常是因为 安卓系统和浏览器的兼容性 不如 iOS 设备上的 Safari 浏览器那样好。Safari 在 iOS 上自带对 PDF 的良好支持，而安卓系统的不同浏览器和 WebView 实现可能没有对 PDF 的原生支持，因此在内嵌 H5 页面时经常会遇到 白屏 或 无法渲染 PDF 的问题。解决方案：使用 PDF.js封装个预览PDF组件。
面试官：如何实现 PDF 预览和下载？
2401_83384536的博客
06-28 1390
在开发过程中要求对 PDF类型的发票提供预览和下载功能， PDF类型文件的来源又包括 H5 移动端和 PC 端，而针对这两个不同端的处理会有些许不同，下文会有所提及。针对 PDF 预览的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在评论区对文中的内容进行斧正，或是提供更优质的方案。支持 pdf 文件内容的完整预览多页 pdf 文件支持 分页查看PC 端。
PDF 预览和下载你是怎么实现的？
weixin_43822185的博客
11-29 1729
PDF 预览和下载你是怎么实现的？
Webview加载pdf遇到的一些坑及解决方法
前端开发博客
10-21 8557
大家好，我是 漫步，今天来分享一个Webview加载PDF遇到的一些坑，希望对你有所帮助。问题来源问题一切的来源还是得从那天说起...有一天产品小王拿着电脑兴致勃勃的来到我的工位旁：“诶，...
避坑！！webview如何加载pdf ？
Android技术之家
10-19 1846
作者：付十一链接：https://juejin.cn/post/7017840637450043422问题来源 问题一切的来源还是得从那天说起...有一天产品小王拿着电脑兴致勃勃的来到我的...
简单的了解下如何实现PDF 预览和下载
前端达人
03-21 1638
在开发过程中要求对PDF类型的发票提供预览和下载功能，**PDF** 类型文件的来源又包括H5 移动端和 **PC 端**，而针对这两个不同端的处理会有些许不同，下文会有所提及。针对PDF 预览的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在评论...
面试官：怎样实现PDF 预览和下载？
zz_jesse的博客
03-12 384
前言在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能，**PDF** 类型文件的来源又包括 H5 移动端 和 **PC 端**，而针对这两个不同端的处理会有些许不同，下文会有所提及。针对 PDF 预览 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在...
面试官：PDF 预览和下载你是怎么实现的？
程序员成长指北
03-10 334
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能，**PDF** 类型文件的来源又包括 H5 移动端 和 **PC 端**，而针对这两个不同端的处理会有些许不同，下文会有所提及。针对 PDF 预览 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何...
直接将webview内容转化为pdf 预览 不截图
08-08
但是，由于我们是在APP内，可以直接用`<web-view>`加载本地PDF文件（注意：iOS可能需要使用在线PDF预览，因为iOS的WebView不支持直接打开本地PDF文件，所以我们可以用PDF.js来预览本地PDF）。 但是，考虑到跨平台...
uniApp打包后安卓PDF预览失败解决方案
本文围绕标题“uniApp打包后PDF预览问题[源码]”及其描述内容，深入剖析该问题的技术成因，并详细阐述基于pdf.js的跨平台解决方案，涵盖技术原理、实现步骤、目录结构设计、兼容性处理策略以及实际部署中的注意事项...
uni-app实现非媒体文件上传的完整解决方案
在uni-app中实现非媒体文件上传是一个具有挑战性的技术难点，尤其是在APP端需要支持用户选择并上传如.doc、.txt、.pdf等常规文档格式的场景下。传统的H5或小程序开发中，通常可以使用`<input type="file">`来触发...
前端实现PDF预览的多种技术方案详解
本文所介绍的“前端PDF预览方法[项目代码]”涵盖了从基础标签嵌入到高级JavaScript库渲染的多种技术实现路径，全面满足不同业务场景下的PDF展示需求。以下将围绕标题与描述中的核心知识点进行深入剖析，系统阐述各类...
Vue3常用的组合式API 超详细讲解
只会写bug
12-03 310
Vue3响应式系统核心API解析：ref与reactive的底层原理、使用场景及对比 摘要： Vue3的响应式系统基于Proxy实现，主要提供ref和reactive两个基础API。ref通过包装对象处理基本类型（需.value访问），兼容复杂类型时会自动转为reactive；reactive直接代理对象/数组，支持深层属性响应。两者各有适用场景：ref适合基本类型和需要替换整个对象的场景，reactive适合简单对象操作。此外，computed提供响应式派生值并具有缓存机制。使用时需注意：ref避免直接覆
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
伟庭的博客
12-02 648
本文介绍了一个基于SpringBoot和Vue.js开发的数码商城系统。系统采用B/S架构，包含前台用户模块（商品浏览、购物车、会员中心）、后台管理模块（用户、商家、商品分类管理）和商家模块（商品发布、抢购活动）。使用MySQL数据库存储数据，Redis缓存高频访问数据，并采用Redisson分布式锁解决抢购超卖问题。系统实现了商品多级分类、动态属性、库存预警等功能，通过定时任务管理活动上下架，集成富文本编辑器支持资讯发布。该系统有效降低了运营成本，提高了电商管理效率。
vue实现页面不断插入内容并且自动滚动功能
weixin_50606255的博客
12-04 181
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
计算机毕业设计|基于springboot + vue零食商城管理系统(源码+数据库+文档)
12-03 357
本文介绍了一个基于SpringBoot+Vue的零食商城管理系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细阐述了系统设计原则、技术选型理由，并提供了代码片段和测试用例参考。此外还包含毕设选题推荐和源码获取方式，适合作为计算机专业毕业设计的参考项目。系统功能完善，技术栈主流，具有实际应用价值。
js实现替换输入框中选中的文字
最新发布
h_未来可期_的博客
12-04 134
如果已知一个文本框内输入值，想点击替换掉里面选中的值，可以采用以下方法;
python+django/flask+vue的基于协同过滤算法的体育商品推荐系统
Q_Q1963288475的博客
12-04 488
相比于传统的体育商品推荐方式，个性化智能的管理方式可以大幅提高体育商品推荐的管理效率，实现了个性化智能体育商品推荐的标准化、制度化、程序化的管理，有效地防止了体育商品推荐的随意管理， 功能主要包括首页、个人中心、用户管理、商品分类管理、商品信息管理、交流论坛、留言板、系统管理、订单管理等功能，从而实现个性化智能体育商品推荐方式，提高个性化智能体育商品推荐的效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值