当前位置：首页 > news >正文

HarmonyOS 鸿蒙Next 预览pdf文件

news 2025/7/10 5:01:21

HarmonyOS 鸿蒙Next 预览pdf文件
1、使用filePreview
2、使用web组件
在线pdf（网址是直接下载的，不是直接可以预览的），先下载再预览

import media from '@ohos.multimedia.media';import web_webview from '@ohos.web.webview';import { request } from '@kit.BasicServicesKit';import common from '@ohos.app.ability.common';import fs from '@ohos.file.fs';@Entry@Componentstruct WebViewPageDemo {webviewController: web_webview.WebviewController = new web_webview.WebviewController();@State fileUrl: string = ''@State title: string = ''path=''hasFile(filePath:string){let b = fs.accessSync(filePath)return b}aboutToAppear() {const context = getContext(this) as common.UIAbilityContextthis.path=context.filesDir+'/1700182405099.pdf'console.log('demo ', this.path)console.log(this.hasFile(this.path)+'123456')if(!this.hasFile(this.path)) {request.downloadFile(context, {url: 'https://prdc-ams.oss-cn-shenzhen.aliyuncs.com/1700182405099.pdf',filePath: this.path}).then((data: request.DownloadTask) => {data.on('complete', () => {console.log('demo complete', this.path)this.fileUrl = this.path})data.on('fail', (err) => {console.log('demo fail', this.path)this.fileUrl = this.path})})}}build(){Column(){Button('loadUrl').onClick(()=>{this.webviewController.loadUrl('file://'+this.path)})Web({src: '', controller: this.webviewController}).javaScriptAccess(true).domStorageAccess(true).verticalScrollBarAccess(true).fileAccess(true).height('100%').width('100%').onControllerAttached(() => {this.webviewController.loadUrl('file://'+this.path)})}.height('100%').width('100%')}}

3、使用PdfView
PdfView使用的坑

如果是在线pdf，可下载到本地沙箱，然后获取本地地址进行预览
文件目录与路径

import { pdfService, pdfViewManager, PdfView } from '@kit.PDFKit'
import { common } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct PDFView {private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();aboutToAppear(): void {let context = getContext() as common.UIAbilityContext;let dir: string = context.filesDir//files文件下let filePath: string = dir + "/" + '文件名';(async () => {let loadResult1: pdfService.ParseResult = await this.controller.loadDocument(filePath);if (pdfService.ParseResult.PARSE_SUCCESS === loadResult1) {hilog.info(0x0000, 'aboutToAppear', 'PdfView Component has been successfully loaded!');}})()}build() {Column() {Row() {PdfView({controller: this.controller,pageFit: pdfService.PageFit.FIT_WIDTH,showScroll: true}).id('pdfview_app_view').layoutWeight(1)}.width('100%').height('100%')}}
}

预览本地rawfile中的pdf

import { pdfService, pdfViewManager, PdfView } from '@kit.PDFKit'
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct Index {private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();aboutToAppear(): void {let context = getContext() as common.UIAbilityContext;let dir: string = context.filesDir// 确保在工程目录src/main/resources/rawfile里存在input.pdf文档let filePath: string = dir + '/input.pdf';let res = fileIo.accessSync(filePath);if (!res) {let content: Uint8Array = context.resourceManager.getRawFileContentSync('rawfile/input.pdf');let fdSand =fileIo.openSync(filePath, fileIo.OpenMode.WRITE_ONLY | fileIo.OpenMode.CREATE | fileIo.OpenMode.TRUNC);fileIo.writeSync(fdSand.fd, content.buffer);fileIo.closeSync(fdSand.fd);}(async () => {// 该监听方法只能在文档加载前调用一次this.controller.registerPageCountChangedListener((pageCount: number) => {hilog.info(0x0000, 'registerPageCountChanged-', pageCount.toString());});let loadResult1: pdfService.ParseResult = await this.controller.loadDocument(filePath);// 注意：这里刚加载文档，请不要在这里立即设置PDF文档的预览方式})()}build() {Row() {PdfView({controller: this.controller,pageFit: pdfService.PageFit.FIT_WIDTH,showScroll: true}).id('pdfview_app_view').layoutWeight(1);}.width('100%').height('100%')}
}