HarmonyOS 如何实现pdf文件在线预览及下载功能

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

请参考以下demo示例:

在module.json5中设置requestPermissions属性值

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

pdf预览:

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
  webController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      // 加载线上PDF
      Web({ src: 'http:www.pdf.com', controller: this.webController })
        .mixedMode(MixedMode.All)
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
  }
}

pdf下载demo如下:

下载完成之后可以到文件的相对路径ide界面的右下角Device File Browser->data->app->e2->100->base->com.example.myapplication(这里的myapplication是指项目名称)->hsp->entry->filesk可以找到下载的内容。

import common from '@ohos.app.ability.common';
import request from '@ohos.request';
import { BusinessError } from '@ohos.base';
import { webview } from '@kit.ArkWeb'
// 获取应用文件路径 
let context = getContext(this) as common.UIAbilityContext;
let filesDir = context.filesDir;
@Entry @Component
export struct PdfPage {
  @State message: string = 'Hello World';
  @State urlPdf:string=''
  private webviewController: WebviewController = new webview.WebviewController();
  build() {
    Row() {
      Scroll() {
        Column(){
          Button('下载') .onClick(() => {
            try {
              console.log('downloadTask1 filesDir' + filesDir + '/00sg00izg2.pdf');
              //下载文件 
              this.urlPdf = '/00sg00izg2.pdf'
              request.downloadFile(context, {
                url: 'https://www.pdf.com',
                filePath: filesDir + '/00sg00izg2.pdf'
              }).then((downloadTask: request.DownloadTask) => {
                //开启回调 
                downloadTask.on('complete', () => {
                  console.info('downloadTask1 complete====');
                })
              }).catch((err: BusinessError) => {
                console.error(`Invoke downloadTask failed-----, code is ${err.code}, message is ${err.message}`);
              }); } catch (error) {
              let err: BusinessError = error as BusinessError;
              console.error(`Invoke downloadTask downloadFile failed====, code is ${err.code}, message is ${err.message}`); } })
            .width('100%') } }
      .height('100%') } }}

文件路径不合法或文件路径下文件已存在解决方案:

以同步方法检查文件是否存在:使用accessSync,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fs-V5#fsaccesssync

如何实现文件不存在则创建文件:可以通过调用函数fs.open来实现,open(path: string, mode?: number),指定第二个参数mode为fs.OpenMode.CREATE,表示若文件不存在,则创建文件。参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fs-V5#fsopen

分享
微博
QQ
微信
回复
3天前
相关问题
鸿蒙支持在线pdf,word这些预览功能
11783浏览 • 3回复 待解决
HarmonyOS PDF打印PDF预览失败
39浏览 • 1回复 待解决
如何实现pdf文件预览
526浏览 • 1回复 待解决
基于WebDownloadDelegate的PDF下载预览
539浏览 • 1回复 待解决
HarmonyOS 如何打开在线PDF
25浏览 • 1回复 待解决
HarmonyOS 是否支持pdf、Word文件预览
367浏览 • 1回复 待解决
HarmonyOS 文件预览功能失败
31浏览 • 1回复 待解决
PDF预览如何隐藏PDF操作按钮
1332浏览 • 1回复 待解决
HarmonyOS PDF 预览问题
425浏览 • 1回复 待解决
问 鸿蒙JS 怎么实现PDF预览,求教。
7357浏览 • 1回复 已解决
使用web组件实现预览沙箱中pdf
2065浏览 • 1回复 待解决