uni-app中的PDF预览

一般APP中使用pdf预览功能很常见，下面分享下关于uniapp中使用web-view进行pdf预览

web-view
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

创建组件pdf-preview

<template>
    <view>
        <web-view :src="pdfUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pdfUrl: '',
            };
        },
        onLoad(params) {
            this.pdfUrl = '/hybrid/html/pdf.html?url=' + params.url
        },
        onBackPress() {}
    }
</script>

引用

<view v-if="item.imageList != ''" class="bo-img">
    附件：<view v-for="(img,index) in item.imageList" :key="index">
        <span @click="img.type === 'pdf' ? preview(baseUrl + img.fileUrl) : tips()">{{img.originalName}}            </span>
            </view>
</view>

preview(fileUrl) {
    this.$u.route({
        url: "/pages/common/pdfPreview",
        params: {
           url: fileUrl
        },
    })
},
tips() {
    console.log("不是pdf文件");
},

资源下载

uni-app中的PDF预览

发表评论