在uni-app中使用pdf.js实现在手机上打开pdf

2021-10-18  本文已影响0人  上海_前端_求内推

1,以下代码支持h5及安卓版本,访问的是pdf的真实地址,而文件流仅支持h5版本,在安卓上无法使用,猜测是安卓解析不了blod
以下为访问真实地址

<template>
    <view v-if="allUrl!=''">
        <web-view :src="allUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                viewerUrl: '/hybrid/html/web/viewer.html',
                allUrl: '',
                url: ""
            }
        },
        onLoad(options) {
            this.$request('/api/eurekamedicalsystem/v2/medical-emrdoc/file', {
                "HospitalCode": this.HospitalCode,
                "docId": options.docID,
                // "key": this.searchValue
            }).then(res => {
                if(res.isSuccess){
                    this.url = res.url
                    this.allUrl = `${this.viewerUrl}?file=${(this.url)}`;
                }
            
            })
            uni.setNavigationBarTitle({
            title: options.title //这是修改后的导航栏文字
            })
        },
    }
</script>

如果是文件流使用以下代码
文件流需要修改请方式
responseType: "arraybuffer",
headers: {
'Content-Type': 'application/pdf',
},

  let pdfData = "";
                let data = {}
                data.fileUrl = this.query.id
                uni.request({
                    url: baseUrl + `xxxxx/access_token=${token}`,
                    method: "POST",
                    data: data,
                    responseType: "arraybuffer",
                    headers: {
                        'Content-Type': 'application/pdf',
                    },
                    success: (res) => {
                        pdfData = res.data //接口调用返回文件流
                        let blob = new Blob([pdfData], {
                            type: 'application/pdf;charset=UTF-8'
                        })
                        pdfData = window.URL.createObjectURL(blob);
                        this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
                    },
                    fail: (err) => {}
                })

遇到的问题:跨域需要修改站点的web.config文件

 <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
上一篇下一篇

猜你喜欢

热点阅读