在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>