uniapp 在线预览pdf

爱睡D小猪

已于 2022-07-13 21:58:51 修改

阅读量9.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： APP功能相关移动端相关文章标签： uni-app javascript

于 2020-12-14 00:15:58 首次发布

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/111148025

APP功能相关同时被 2 个专栏收录

7 篇文章

订阅专栏

移动端相关

7 篇文章

订阅专栏

本文介绍如何在uniapp项目中实现PDF文件的在线预览功能。通过复制特定文件夹并设置模板与脚本来加载PDF文件，最终实现在安卓平板上的PDF预览。提供了一个具体的示例代码以及相关项目的下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp项目APP 在线预览pdf

1、将hybrid这个文件夹整个复制到你的项目
在这里插入图片描述

2、先创建一个 pdf页面用于展示pdf文件

<template>
    <view style="width: 100%;" >
        <web-view  :src="pdfUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            pdfUrl:'',
            htmlUrl: '/hybrid/html/web/viewer.html', 
           }
        },
        onLoad(options) {
        //从A页面点击跳转传递pdf文件路径过来
                let fileUrl = encodeURIComponent(options.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.pdfUrl= this.htmlUrl+ '?file=' + fileUrl
          }
    }
</script>

2、在A页面点击跳转

 <view class="content-right">
			   <!-- pdf文件预览 -->
			   <view class="pdf-box" >
					<image src="../../static/images/pdf.jpg"  class="pdf-img" @click="showPdf"></image>
				</view>
		 </view>

	//pdf,传入pdf的url 可实现在线预览
			showPdf(){
				   let pdfUrl= encodeURIComponent('http://rtdsoft.xxx.pdf')
				        uni.navigateTo({
						  url:'../pdfWebview/pdfWebview?pdfUrl='+ pdfUrl
				    })
			},

3、效果如下，我是用于安卓平板上。
在这里插入图片描述
本文章的demo下载链接(包含了uniapp app使用websocket的demo)：https://gitee.com/ZhouLoveBrother/uniapp-websocket-pdf