在uni-app中使用web-view进行PDF预览的方法分享

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

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

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

具体可以看uniapp官网介绍

  1. 下载hybrid放置在项目根目录

  1. 创建组件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>
  1. 引用
<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文件");
},

资源下载

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息