uniapp 安卓、IOS、H5、微信小步伐实现PDF在线预览
在使用uniapp开辟移动端时，微信开辟者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后，在配置了业务域名和服务器域名的条件下，预览pdf文件却只能看到白屏，因此我推测微信小步伐不能通过webview读取文件流。这个想法有问题的话请大家给与指正。后来我通过uniapp api将文件下载在临时目录，再调用api打开，实现了微信小步伐的预览。但在安卓端会调用安装的WPS打开，假如用户没有安装pdf阅读器，则无法打开，造成了不好的用户体验。因此，手机端我用pdf.js实现在线预览。
苹果IOS直接使用webview预览pdf。
h5我刚开始的时候使用webview无法预览。报错： no enabled plugin supports this MIME type。以是h5也使用pdf.js实现在线预览，但是我遇到cors跨域问题。后来采用blob实现了在线预览。
后端的api接口如下：
/**
* @功能：pdf预览
*/
@IgnoreAuth
@RequestMapping("/pdf/preview/**")
public void pdfPreviewIframe(HttpServletRequest request, HttpServletResponse response) {
String imgPath = extractPathFromPattern(request);
// 其余处理略
InputStream inputStream = null;
OutputStream outputStream = null;
try {
inputStream = MinioUtil.getMinioFile(imgPath);
outputStream = response.getOutputStream();
response.setContentType("application/pdf; charset=UTF-8");
byte[] buf = new byte;
int len;
while ((len = inputStream.read(buf)) > 0) {
outputStream.write(buf, 0, len);
}
response.flushBuffer();
} catch (Exception e) {
log.error("预览文件失败" + e.getMessage());
} finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
log.error(e.getMessage(), e);
}
}
if (outputStream != null) {
try {
outputStream.close();
} catch (IOException e) {
log.info("imgPath：{}", imgPath);
log.error(e.getMessage(), e);
}
}
}
} 一、下载pdf.js
http://mozilla.github.io/pdf.js/getting_started
二、解压文件并引入到项目
说明：网上许多案例说，在项目目录下创建hybrid文件夹，把解压后的文件全部放到内里的方式我试了后行不通。
查阅了官方文档，发现是我肤浅了。
https://img-blog.csdnimg.cn/direct/63dba07ddbaf4bf195d441041322232e.png
必须严酷按照上面说是的目录才行。
在static目录下新建pdfview目录，将解压后的文件拷贝到该目录下。如下图所示：
https://img-blog.csdnimg.cn/direct/a88c55e1f0544e1b8e8a07352b92de4d.png
表明viewer.mjs代码，pdf.js不支持加载跨域文件，会报 “file origin does not match viewer’”错误：
https://img-blog.csdnimg.cn/direct/76622a022930461dbdfbe130caccb4ab.png
三、 webview内预览pdf
<template>
<view>
<web-view :src="fileUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
fileUrl: "",
pdfViewUrl: '/static/pdfview/web/viewer.html'
}
},
onLoad(options) {
this.fileUrl = decodeURI(options.fileUrl)
if (!!options.isPdfView) {
this.fileUrl = this.pdfViewUrl + '?file=' + encodeURI(this.fileUrl)
}
},
methods: {
}
}
</script>
<style>
</style> 四、安卓、微信小步伐分别预览
//h5预览pdf
h5PdfView(item) {
uni.showLoading({
title: '加载中...'
})
uni.request({
url: this.baseFileURL + '/pdf/preview/' + item.resourceId,
method: 'POST',
responseType: 'arraybuffer'
}).then(res => {
uni.hideLoading()
let pdfData = res.data
let blob = new Blob(, {
type: 'application/pdf;charset=UTF-8'
})
pdfData = window.URL.createObjectURL(blob)
this.h5PdfUrl = encodeURIComponent(pdfData)
uni.navigateTo({
url: '/subpages/webview/webview?fileUrl=' + this.h5PdfUrl + "&isPdfView=true",
})
})
},
//pdf预览
pdfView(item) {
item.fileUrl = this.baseFileURL + '/pdf/preview/' + item.resourceId
// #ifdef APP-PLUS
switch (uni.getSystemInfoSync().platform) {
case "android":
console.log("android")
uni.navigateTo({
url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl) +
"&isPdfView=true",
})
break;
case "ios":
console.log("ios")
uni.navigateTo({
url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl),
})
break;
}
// #endif
// #ifdef H5
this.h5PdfView(item)
// #endif
//#ifdef MP-WEIXIN
let fileName = item.resourceId.substring(item.resourceId.lastIndexOf('/') + 1);
uni.downloadFile({
url: item.fileUrl, //文件地址
filePath: wx.env.USER_DATA_PATH + '/' + fileName,
success: function(res) {
const filePath = res.filePath || res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: false,
success: function(res) {}
});
}
});
// #endif
} 五：预览效果
https://img-blog.csdnimg.cn/direct/1864fa00b8aa4bed8c21f5a9118817e9.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]