zoukankan      html  css  js  c++  java
  • uni-app 预览pdf文件

    安卓uni-app实现pdf文件预览功能:

    1.https://mozilla.github.io/pdf.js/getting_started/#download下载

    放在根目录下,

    2.新建一个webView页面

     1 <template>
     2     <view style=" 100%;" >
     3         <web-view :src="allUrl"></web-view>
     4     </view>
     5 </template>
     6 
     7 <script>
     8     export default {
     9         data() {
    10             return {
    11                 allUrl:'',
    12                 viewerUrl: '/hybrid/html/web/viewer.html', // 格式化文件流的一个js 文件
    13             }
    14         },
    15         onLoad(options) {
    16             // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。decodeURIComponent解码
    17             let fileUrl = encodeURIComponent(decodeURIComponent(options.fileUrl)); 
    18             this.allUrl = this.viewerUrl + '?file=' + fileUrl
    19           }
    20     }
    21 </script>

    3.前一个页面增加跳转:

    1 // 预览pdf
    2 toViewFile(item) {
    3     let fileUrl = `${this.baseUrl}/share/downloadFile?filePath=${item.filePath}&fileName=${item.fileName}`;
    4     uni.navigateTo({
    5         url: '/pages/webView/webView?fileUrl='+ encodeURIComponent(fileUrl)
    6     });
    7 },

    由于url路径比较长,带有&符号,传参,&后面的会被截断,故需要加上encodeURIComponent。完美解决pdf无法打开问题。

    相关网站:https://mozilla.github.io/pdf.js/getting_started/#download   

         https://blog.csdn.net/mwh_user/article/details/112368597

  • 相关阅读:
    mysql同步之otter/canal环境搭建完整详细版
    Linux安装aria2
    mysql多源复制(多主一从)配置
    分布式调度框架TBSchedule使用方法
    hbase shell插入根据条件查询数据
    hive内部表&外部表介绍
    Canal( 增量数据订阅与消费 )的理解及应用
    tidb入门
    ES命令
    java8新特性
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/14962051.html
Copyright © 2011-2022 走看看