鸿蒙系统中实现保存pdf至本地

作者 Star768

2025年4月10日 14:13

最近开发过程中遇到这样一个需求，需要将发票保存到本地，在网上看了一些案例，没有实现所需要的功能，并且都需要声明额外权限，于是我决定自己实现，在这里记录下我的实现过程。

pdf 展示方式

在下载之前首先是将 pdf 展示出来，ArkUI 中有一个 Web 组件，可以非常方便的实现这个功能。 Web 组件的用途就是用来展示和下载 web 内容，其能力由@ohos.web.webview 提供，因此也可以通过 url 来展示和下载 pdf。

Web({
  src: this.pdfUrl, // 加载网络PDF文档
  controller: this.controller,
}).domStorageAccess(true); // domStorageAccess 方法用于控制Web中对文档对象模型存储（DOM Storage API）的启用状态，若将其设置为 false，会影响到PDF文件在Web中的预览功能

实现思路

由于发票是由第三方平台所返回的，格式不固定，存在图片格式及已.pdf 结尾的 PDF 文件和无后缀的 PDF 文件，因此需要先判断文件类型，然后进行不同的处理。第二步下载文件到应用沙箱，第三部利用文件选择器将文件复制到公共目录下。

首先是通过url后缀判断文件类型

function getFileExtension(url: string): string {
  // 去除URL中的查询参数和锚点
  const cleanUrl = url.split('?')[0].split('#')[0];
  const filename = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1);
  // 提取扩展名（带点判断）
  const lastDotIndex = filename.lastIndexOf('.');
  if (lastDotIndex > 0) {
    // 确保点不在文件名开头
    return filename.substring(lastDotIndex).toLowerCase();
  }
  return '';
}

然后第二步，就是先将文件下载到沙箱中

 @State pdfUrl: string = '' // pdf地址
 ... // 省略其他代码 
 // 保存到本地沙箱
async saveToSandbox(){
      const sandboxDir = getContext().cacheDir;
    // 创建唯一文件名
      const fileExtension = this.getFileExtension(this.pdfUrl);
      const fileName = `invoice_${new Date().getTime()}${fileExtension ? fileExtension : '.pdf'}`;
      const fullPath = `${sandboxDir}/${fileName}`; // 直接拼接路径
      // 下载文件到沙箱中
      await this.downloadPDF(fullPath)
      // 保存到Download中
      this.copyToDownload(fileName,fullPath)
 }


 // 根据沙箱路径下载,这是一个异步过程
  async downloadPDF(fullPath: string): Promise<void> {
    this.controller.startDownload(this.pdfUrl);
    return new Promise((resolve, reject) => {
      try {
        this.delegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
          // 传入下载路径，并开始下载。
          webDownloadItem.start(fullPath);
        })
        this.delegate.onDownloadFailed((webDownloadItem: webview.WebDownloadItem) => {
          console.log("download failed guid: " + webDownloadItem.getGuid());
          ToastUtil.showToast('加载失败')
          reject()
        })
        this.delegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => {
          console.log("download finish guid: " + webDownloadItem.getGuid());
          resolve()
        })
        this.controller.setDownloadDelegate(this.delegate);
      } catch (error) {
        console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
        reject()
      }
    })
  }

最后，复制沙箱中的文件到本地Download目录中

 copyToDownload(fileName:string,fullPath:string){
    // 文件选择器配置
    const context = getContext(this) as common.UIAbilityContext;
    const documentViewPicker = new picker.DocumentViewPicker(context);
    const documentSaveOptions = new picker.DocumentSaveOptions();

    documentSaveOptions.newFileNames = [fileName]; // 设置默认文件名
    documentSaveOptions.pickerMode = picker.DocumentPickerMode.DOWNLOAD;

    // 打开文件选择器
    const uris = await documentViewPicker.save(documentSaveOptions);
    if (uris.length > 0) {
      const targetDir = new fileUri.FileUri(uris[0]).path;
      const targetUri = `${targetDir}/${fileName}`;
      // 复制到Download下
      const sourceStats = fs.statSync(fullPath);
      if (sourceStats.isFile()) {
        try {
          fs.copyFileSync(fullPath, targetUri);
          console.info(`文件已保存至：${targetUri}`);
          ToastUtil.showToast('下载成功：' + targetUri)
          // 删除临时文件
          fs.unlinkSync(fullPath);
        } catch (e) {
          console.error('文件复制失败' + e)
          ToastUtil.showToast('下载失败')
        }
      }
    }
 }