uniapp在线预览文件(pdf.js)

4,226 阅读1分钟

1、pdf.js包

pdf.jsmozilla.github.io/pdf.js/

pdf.png

将下载的文件解压,把解压的文件放到项目的hybild文件夹下的html里

目录.png

在pages文件夹下新建一个filePreview.vue页面来预览pdf文件,在pages.json中注册路由,代码如下

<template>
    <view>
        <web-view :src="allUrl"></web-view>
    </view>
</template>
<script>
 export default {
    data() {
        return {
            viewerUrl: '/hybrid/html/web/viewer.html',
            allUrl: ''
        }
    },
    onLoad(option) {
        let data = JSON.parse(decodeURIComponent(option.item));
        //url有长度限制,太长的字符串会传递失败,encodeURIComponent对参数进行编码
        this.allUrl = this.viewerUrl + '?file=' + encodeURIComponent(data.url);
    }
}
</script>

2、在线wps地址

在pages文件夹下新建一个filePreview.vue页面来预览pdf文件,在pages.json中注册路由,代码如下

目标地址https://wps-view.zhihuipk.com/?src=附件地址

<template>
    <view>
        <web-view :src="allUrl"></web-view>
    </view>
</template>
<script>
 export default {
    data() {
        return {
            viewerUrl: 'https://wps-view.zhihuipk.com/',
            allUrl: ''
        }
    },
    onLoad(option) {
        let data = JSON.parse(decodeURIComponent(option.item));
        //url有长度限制,太长的字符串会传递失败,encodeURIComponent对参数进行编码
        this.allUrl = this.viewerUrl + '?src=' + encodeURIComponent(data.url);
    }
}
</script>