HarmonyOS鸿蒙Next中pdf在线预览显示空白问题

使用的是api13，不知道什么原因，试了很久不能实现在线预览问题。看了文档，web组件好像在模拟器上不显示，又没有真机测试，每次都是盲写，然后被别人把bug打回来。就很恼火，想请教下我的代码需要怎么修改

// import web_webview from '@ohos.web.webview';

import { webview } from '@kit.ArkWeb';
import { font, router } from '@kit.ArkUI';
import { NavigationHead } from '../../../common/viewModel/NavigationHead';

interface GetParams{
  explainBookUrl:string
}
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State explainBookUrl:string = ''
  aboutToAppear(): void {
    font.registerFont({
      familyName: 'alibaba_puhuiti', // 注册的字体名称
      familySrc: '/font/AlibabaPuHuiTi-2-55-Regular.ttf' // font文件夹与pages目录同级
    })
    let params = router.getParams() as GetParams
    if(params){
      this.explainBookUrl = params.explainBookUrl
      webview.WebviewController.setWebDebuggingAccess(true);
      // this.explainBookUrl = 'https://yjl-1325281534.cos.ap-chengdu.myqcloud.com/yjlx-prod/2025/06/21/9718be74d5594065b44bc1312c865974.pdf'
    }
  }
  build() {
    Column(){
      NavigationHead()
      Column({ space: 10 }) {
        // 预览在线的pdf文件资源
          Web({
            src: this.explainBookUrl,
            controller: this.webviewController
          })
            .domStorageAccess(true)
            .fileAccess(true)
            .layoutWeight(1)
        Button('点击刷新')
          .onClick(()=>{
            this.webviewController.loadUrl(this.explainBookUrl)
          })
      }
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
      .borderWidth(1);
    }
    .width('100%')
    .height('100%')
    .padding({top:20,bottom:44})
  }
}

更多关于HarmonyOS鸿蒙Next中pdf在线预览显示空白问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

【背景知识】

Content-Disposition：此HTTP头指示内容是通过网页直接展示，还是下载成本地文件。

【解决方案】

对于无法预览的文档（需要先下载才能查看的PDF文档），通过监听Web组件的WebDownloadDelegate事件，将在线文档下载到本地沙箱，再通过Web打开预览。对于inline文档，不会触发该事件，不受影响，正常预览。

注意：此种方式需要使能Web组件的fileAccess属性。

代码如下：

Web({
    src: this.urlStr,
    controller: this.controller
})
.fileAccess(true)
.domStorageAccess(true)
.layoutWeight(1)
.onControllerAttached(() => {
    try {
        this.delegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
            // 传入本地沙箱路径并开始下载
            webDownloadItem.start(getContext().cacheDir + '/' + webDownloadItem.getSuggestedFileName());
        })
        this.delegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => {
            // 下载任务进度和速度监测处理
        })
        this.delegate.onDownloadFailed((webDownloadItem: webview.WebDownloadItem) => {
            // 下载任务失败处理
        })
        this.delegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => {
            // 下载成功通过Web重新加载本地文件打开预览
            this.controller.loadUrl(`file://${getContext().cacheDir}/` + webDownloadItem.getSuggestedFileName())
        })
        this.controller.setDownloadDelegate(this.delegate);
    } catch (error) {
        // 异常处理
    }
})

更多关于HarmonyOS鸿蒙Next中pdf在线预览显示空白问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼

鸿蒙Next中PDF在线预览显示空白可能由以下原因导致：

PDF渲染引擎未正确加载
文件权限未正确配置
网络资源加载失败
文件格式不兼容

解决方法：

检查使用的PDF预览组件是否支持HarmonyOS Next
确保文件路径或URL可访问
验证文件完整性
确认组件所需权限已声明

注意：鸿蒙Next的PDF预览实现方式与安卓不同，需使用鸿蒙原生API。

songsunli 3楼

针对HarmonyOS Next中PDF在线预览显示空白的问题，建议从以下几个方面排查：

网络权限问题：

确保在config.json中已添加网络权限：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

PDF加载方式优化：

尝试使用Google Docs的PDF查看器作为中转：

this.explainBookUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(params.explainBookUrl)}&embedded=true`

Web组件配置补充：

Web({
  src: this.explainBookUrl,
  controller: this.webviewController
})
.onError((event) => { console.error('WebView error:', event) })
.onPageEnd((event) => { console.log('Page loaded:', event.url) })
.javascriptAccess(true)

模拟器限制：

目前DevEco模拟器对PDF渲染支持有限，建议：

使用远程真机调试服务
临时改用本地HTML文件测试WebView功能

备选方案：如果仍无法解决，可以考虑：

使用第三方PDF.js库
请求后端服务将PDF转为图片序列
调用系统原生PDF预览能力（需确认设备支持）