uniapp 打包成安卓APP预览base64pdf实现方法

下载PDF.js

问题描述

在uniapp中预览base64的PDF,可以使用web-view组件嵌入一个PDF.js的实例。以下是一个简单的示例:

解决方案:

1.在页面的.vue文件中添加web-view组件:

复制代码
<template>
  <view style="width: 50%;">
    <web-view :src="allUrl"></web-view>
  </view>
</template>
 
<script>
  export default {
    data () {
      return {
        allUrl: '',
        viewerUrl: '/static/hybrid/html/web/viewer.html',//引入下载好的文件
        // pdfUrl: 'http://172.11.11.11:8888/ceshi.pdf',//可访问的http地址
		'pdfUrl':'data:application/pdf;base64'// 可以去线上生成一个base64pdf
      }
    },
    onLoad (options) {
      this.pdfUrl = options.pdfUrl
      let fileUrl = encodeURIComponent(this.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
      this.allUrl = this.viewerUrl + '?file=' + fileUrl
    }
  }
</script>
 
<style>
 
</style>

2.将PDF.js的预览页面viewer.html与PDF.js库一起打包到你的应用中。

这是一个简化的示例,实际情况可能需要考虑更多因素,如PDF.js的版本兼容性、应用的性能和兼容性等。

相关推荐
千里马学框架1 天前
一起学 Android 14:ShellTransition 屏幕旋转过程深度剖析
android·智能手机·性能优化·framework·性能·屏幕旋转·rotation
美狐美颜SDK开放平台1 天前
开发直播APP时如何接入视频美颜SDK?开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
AFinalStone1 天前
Android7 SystemUI源码解析(七)Keyguard锁屏模块深度解析
android·systemui
致远ccc1 天前
Google Play 上架前如何测试 App?多国家 Android 环境测试
android·app测试·googleplay·多国家应用测试
ttyyttemo1 天前
Kotlin 协程中的 Job 结构化并发与取消
android
sun0077001 天前
tbox 4g/5g切换,导致wan ip 改变,导致车机旧网络不可用。需要重启车机才行
android
其实防守也摸鱼1 天前
内网穿透与反向代理:原理、工具与实战指南
android·大数据·运维·安全·网络安全·自动化·渗透
码兄科技1 天前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
AFinalStone1 天前
Android7 SystemUI 源码解析(四)NavigationBar 导航栏与 SystemBars
android·systemui
JMchen1 天前
属性动画原理与高级动画实现
android·kotlin·canvas