明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

uni-app中使用web-view预览pdf文件

Posted on   且行且思  阅读(1493)  评论(0编辑  收藏  举报

对应的hybrid/html下即可,小程序的把html文件丢到服务器,小程序通过带参跳转到web预览;

 https://files.cnblogs.com/files/Fooo/jack-pdf_1.0.0_example.zip?t=1665103409

复制代码
<template>
    <view>
        <web-view :src="pdfUrl"></web-view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                pdfUrl:'',
                from:''
            }
        },
        onLoad(option) {
            /**
             * 浏览情景
             */
            
            // 浏览情景1:浏览本地的pdf文件
            // this.pdfUrl = '/hybrid/html/web/viewer.html?file=./compressed.tracemonkey-pldi-09.pdf'
            let newurl = encodeURI(option.url)
            // 浏览情景2:浏览在线的pdf文件
            this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(newurl)
        },
        methods: {
            /**
             * 下载情景
             */
        //     downloadPdfClick(){
        //         // 下载情景1:h5内嵌app,通过分享给朋友的方式进行下载
        //         if(this.from == 'app'){
        //             let item = 'http://自己的域名/hybrid/html/web/pdf.html?shareUrl='+encodeURIComponent(this.bgUrl)
        //                         +'&shareTitle=PDF文件';
        //             window.open(item);
        //             return;
                    
        //         }else if(this.from == 'wx wq'){
        //         // 下载情景2:h5内嵌微信小程序,从h5页面跳转到小程序页面后,然后通过调用小程序原生API进行下载
        //         // 注意: 先要引入微信jssdk  [命令: npm install jweixin-module]
        //             // this.$wx.miniProgram.navigateTo({
        //             //     url: '/pages/pdf/pdf_download?pdf='+ encodeURIComponent(this.bgUrl) //小程序页面链接
        //             // });
        //         }
                
        //     }
        }
    }
</script>
 
<style>
 
</style>
复制代码

 

相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
历史上的今天:
2006-10-07 谢谢你让我爱过你·····················
点击右上角即可分享
微信分享提示