HarmonyOS 鸿蒙Next中模拟机X86预览PDF

HarmonyOS 鸿蒙Next中模拟机X86预览PDF 机型：

cke_727.png

代码：

Web({
  src:
  "http://192.168.10.228/shop/%E6%AC%A2%E8%BF%8E%E4%BD%BF%E7%94%A8%E5%8D%8E%E4%B8%BA%E6%96%87%E4%BB%B6%E7%AE%A1%E7%90%86_20250924162619A001.pdf",                     // 方式一 加载网络PDF文档
  // (this.getUIContext()
  //   .getHostContext() as common.UIAbilityContext)!.cacheDir + "/欢迎使用华为文件管理_20250924165906A001.pdf", // 方式二 加载本地应用沙箱内PDF文档
  // "resource://rawfile/1.pdf",                         // 方式三 本地PDF文档 (格式一)
  // $rawfile('1.pdf'),                                 // 方式三 本地PDF文档 (格式二)
  // $rawfile('2.html'),                                 // 方式三 本地PDF文档 (格式二)
  controller: this.controller
})
  .fileAccess(true)
  // .javaScriptAccess(true)
  .domStorageAccess(true)
  // .onlineImageAccess(true)
  // .mixedMode(MixedMode.All)

效果：

cke_11183.png

测试结果：只有html、txt之类的文件可以正常加载、PDF或者Doc文件都是空白（PDF地址可在浏览器正常访问）

问题：模拟器如何才能正确加载PDF吗


更多关于HarmonyOS 鸿蒙Next中模拟机X86预览PDF的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

可以升级6.0的IDE，然后使用6.0的模拟器试下，当前在6.0上使用是可以正常显示的。官网可以直接下载6.0IDE。

【背景知识】

  • Web组件提供了在网页中预览PDF的能力。应用可以通过Web组件的src参数和loadUrl()接口中传入PDF文件，来加载PDF文档。
  • Web组件具备下载能力，应用可以通过调用startDownload来下载PDF文件。
  • 也可以通过request.agent.create方法来下载PDF文件。

【解决方案】

  • 使用Web组件自身下载能力下载PDF，然后预览：

    1. 设置保存路径，初始化并调用WebDownloadItem接口开始下载PDF文件并保存到应用沙箱内；
    2. 通过loadUrl接口加载本地PDF文件。

    示例代码如下：

import { webview } from '@kit.ArkWeb'
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  private webVC: webview.WebviewController = new webview.WebviewController();
  // 此处'example.pdf'仅做示例，请自行替换为目标PDF文件地址
  private testUrl: string = 'example.pdf';
  private delegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate();
  private fileName: string = 'test.pdf';

  build() {
    Column() {
      Button('下载并预览PDF文件')
        .width('60%')
        .margin({
          bottom: 20
        })
        .onClick(() => {
          // 获取下载路径
          let context = this.getUIContext()?.getHostContext() as common.UIAbilityContext;
          let filePath: string = context.tempDir + '/' + this.fileName;
          console.info(`get file path: ${filePath}`);
          try {
            this.delegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
              console.info('onBeforeDownload: Ready to download');
              webDownloadItem.start(filePath);
            });
            this.delegate.onDownloadFailed((webDownloadItem: webview.WebDownloadItem) => {
              console.error(`onDownloadFailed: download failed guid: ${webDownloadItem.getGuid()}`)
            });
            this.delegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => {
              console.info(`onDownloadFinish: download finish guid: ${webDownloadItem.getGuid()}`)
              // 下载完成后通过Web组件加载
              this.webVC.loadUrl(filePath);
            });
            this.webVC.setDownloadDelegate(this.delegate);

            // 开始下载
            this.webVC.startDownload(this.testUrl)
          } catch (error) {
            console.error(`catch exception: ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({
        // 此处'example.com'仅做示例，请自行替换为目标网址地址
        src: 'example.com',
        controller: this.webVC,
      })
        .fileAccess(true)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .mixedMode(MixedMode.All)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中模拟机X86预览PDF的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好、回复消息不能放图片，详细的内容用回答代替，辛苦您看一下

OK，

首先、感谢您的回复并且问题已解决

其次、出现一个新问题：如何才能取消PDF的导航栏如图：

cke_2431.png

最后：附带模拟器机型如下

cke_4295.png

在Web组件加载的链接添加“#toolbar=0&navpanes=0”即可实现隐藏顶部菜单栏和侧边导航窗口参数。

可行，感谢回复、但是我有2点疑问：

1、上述的配置，我应该在文档中那个地方查询 2、Web组件中展示pdf，现在是默认需要滚动Web模块才能查看完整的内容，如何取消内部滚动，让PDF作为页面平铺

  1. 上面那个配置不是Harmony特有的，是浏览器加载PDF网页的特性，可以在百度查到。
  2. https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-fit-content Web组件大小自适应页面内容布局模式layoutMode(WebLayoutMode.FIT_CONTENT)时，能使Web组件的大小根据页面内容自适应变化。

在HarmonyOS鸿蒙Next中，X86模拟机预览PDF可通过系统内置的PDF查看器实现。鸿蒙Next的分布式能力允许模拟器直接调用本地或云端的PDF渲染服务，无需额外依赖。开发者可使用ArkUI的Web组件或PDF组件进行集成，通过声明式API加载和显示PDF文件。系统自动处理X86架构的兼容性，确保预览流畅。

在HarmonyOS Next的X86模拟器中，使用Web组件加载PDF文件时出现空白是常见问题。这是因为模拟器的Web内核可能不完全支持PDF渲染。

解决方案：

  1. 启用JavaScript访问 取消注释.javaScriptAccess(true)，PDF渲染通常需要JavaScript支持。

  2. 使用PDF.js方案 推荐集成PDF.js库来渲染PDF：

    // 将PDF.js放入rawfile目录
Web({
  src: $rawfile('pdfjs_viewer.html?file=yourfile.pdf'),
  controller: this.controller
})

  3. 检查网络权限 确保在module.json5中声明了网络权限：

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

  4. 本地文件路径验证 如果使用本地PDF，确认文件路径正确且文件已放入rawfile目录。

当前直接加载PDF的方式在模拟器中受限，建议优先采用PDF.js方案实现稳定渲染。

回到顶部