美文网首页
在uni-app中使用pdf.js实现在手机上打开pdf

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

作者: 上海_前端_求内推 | 来源:发表于2021-10-18 16:38 被阅读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>
    

    相关文章

      网友评论

          本文标题:在uni-app中使用pdf.js实现在手机上打开pdf

          本文链接:https://www.haomeiwen.com/subject/soenoltx.html