uniapp图片文档预览

1、新建pages/webview/pdfView.vue

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

<script>    
    export default {
        data() {
            return {
                url: '',
            };
        },
        onLoad(params) {
            // console.log("params:"+JSON.stringify(params));
            let {
                url
            } = params
            this.url = `/static/pdf.html?url=${url}`
        },
    }
</script>
 

2、查看文件

<button class="uni-button" size="mini" type="info" @click="previewPdf(item)">查看</button>

​
previewPdf(obj) {
    if (obj.attachmentPath != '' && obj.attachmentPath != null) {
        let fileUrl = baseUrl + obj.attachmentPath;
        console.log("==fileUrl==https://www.×××.com/profile/upload/123.jpg");
        console.log("==obj.attachmentPath==/profile/upload/123.jpg");
        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
        let suffix = obj.attachmentPath.split('.').pop().toLowerCase();
        if (imageExtensions.includes(suffix)) {
            const imageList = [fileUrl];
            uni.previewImage({
                urls: imageList,
                current: imageList[0],
            });
        } else if (suffix === 'doc' || suffix === 'docx') {
            // H5
            const url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`
            window.open(url);

            // 小程序
            uni.showLoading({
                title: '正在加载中...'
            })
            uni.downloadFile({
                url: fileUrl,
                success: function(res) {
                    var filePath = res.tempFilePath;
                    uni.openDocument({
                        filePath: filePath,
                        showMenu: true,
                        success: function(res) {
                            console.log('打开文档成功');
                            uni.hideLoading()
                        },
                        fail(err) {
                            console.log(err)
                            uni.hideLoading()
                        }
                    });
                },
                fail(err) {
                    console.log(err)
                    uni.hideLoading()
                }
            });
        } else if(suffix === 'pdf') {
            this.$tab.navigateTo('/pages/filePreview/pdfView?url=' + fileUrl);
        }
    } else {
        uni.showToast({
            title: '文件地址缺失',
            icon: "error"
        });
    }
},

​

​