HarmonyOS 鸿蒙Next Web 组件如何预览 file协议沙盒 pdf 文件

Web 组件可以预览 resource 协议和 http 网络连接资源的 pdf 文件，如何预览 file 协议的沙盒pdf 文件，示例链接为： file://com.example.myapplication/data/storage/el2/base/haps/entry/files/test.pdf#toolbar=0

示例代码如下：

aboutToAppear(): void {
// 获取文件的沙箱路径
let pathInSandbox = getContext(this).filesDir + “/test.pdf”;
// 将沙箱路径转换为uri
this.url = fileUri.getUriFromPath(pathInSandbox) +’#toolbar=0’;

console.log(this.url)
}

Web({ src: this.url, controller: this.controller })
.javaScriptAccess(true)
.domStorageAccess(true)
.fileAccess(true)
.layoutWeight(1)

sinazl 1楼•3 天前

可以尝试一下demo

Web({
  src:
  "https://www.example.com/test.pdf", // 方式一 加载网络PDF文档
  // "file://" + getContext(this).filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档
  // "resource://rawfile/test.pdf", // 方式三 应用内resource资源PDF文档
  // $rawfile('test.pdf'), // 方式四 应用内resource资源PDF文档
  controller: this.controller
})
  .domStorageAccess(true)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-pdf-preview-0000001852735730-V5

nodeper 2楼•3 天前

关于HarmonyOS鸿蒙Next Web组件预览file协议沙盒PDF文件的问题，以下是一些专业解答：

HarmonyOS鸿蒙Next Web组件支持通过file协议预览沙盒中的PDF文件。要实现这一功能，需确保已配置相应的文件系统访问权限（如ohos.permission.READ_EXTERNAL_STORAGE），并正确使用Web组件的loadUrl接口或src参数加载PDF文件路径。

在Web组件中，可以通过以下方式加载沙盒中的PDF文件：

使用loadUrl接口，并传入file协议路径，例如：this.controller.loadUrl("file:///data/user/0/com.example.yourapp/files/test.pdf")。
或在Web组件创建时，通过src参数指定file协议路径，例如：Web({ src: "file:///data/user/0/com.example.yourapp/files/test.pdf", controller: this.controller })。

请注意，路径需为沙盒内的实际文件路径。另外，需确保已开启domStorageAccess权限，以确保PDF文件能够正常预览。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。