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接口如下：

1. /**
2.      * @功能：pdf预览
3.      */
4.     @IgnoreAuth
5.     @RequestMapping("/pdf/preview/**")
6.     public void pdfPreviewIframe(HttpServletRequest request, HttpServletResponse response) {
7.         String imgPath = extractPathFromPattern(request);
8.         // 其余处理略
9.         InputStream inputStream = null;
10.         OutputStream outputStream = null;
11.         try {
12.             inputStream = MinioUtil.getMinioFile(imgPath);
13.             outputStream = response.getOutputStream();
14.             response.setContentType("application/pdf; charset=UTF-8");
15.             byte[] buf = new byte[1024];
16.             int len;
17.             while ((len = inputStream.read(buf)) > 0) {
18.                 outputStream.write(buf, 0, len);
19.             }
20.             response.flushBuffer();
21.         } catch (Exception e) {
22.             log.error("预览文件失败" + e.getMessage());
23.         } finally {
24.             if (inputStream != null) {
25.                 try {
26.                     inputStream.close();
27.                 } catch (IOException e) {
28.                     log.error(e.getMessage(), e);
29.                 }
30.             }
31.             if (outputStream != null) {
32.                 try {
33.                     outputStream.close();
34.                 } catch (IOException e) {
35.                     log.info("imgPath：{}", imgPath);
36.                     log.error(e.getMessage(), e);
37.                 }
38.             }
39.         }
40.     }

复制代码

一、下载pdf.js
http://mozilla.github.io/pdf.js/getting_started
二、解压文件并引入到项目
说明：网上许多案例说，在项目目录下创建hybrid文件夹，把解压后的文件全部放到内里的方式我试了后行不通。
查阅了官方文档，发现是我肤浅了。

必须严酷按照上面说是的目录才行。 
在static目录下新建pdfview目录，将解压后的文件拷贝到该目录下。如下图所示：

表明viewer.mjs代码，pdf.js不支持加载跨域文件，会报 “file origin does not match viewer’”错误：

三、 webview内预览pdf

1. <template>
2.         <view>
3.                 <web-view :src="fileUrl"></web-view>
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 data() {
10.                         return {
11.                                 fileUrl: "",
12.                                 pdfViewUrl: '/static/pdfview/web/viewer.html'
13.                         }
14.                 },
15.                 onLoad(options) {
16.                         this.fileUrl = decodeURI(options.fileUrl)
17.                         if (!!options.isPdfView) {
18.                                 this.fileUrl = this.pdfViewUrl + '?file=' + encodeURI(this.fileUrl)
19.                         }
20.                 },
21.                 methods: {
23.                 }
24.         }
25. </script>
27. <style>
29. </style>

复制代码

 四、安卓、微信小步伐分别预览

1.             //h5预览pdf
2.                         h5PdfView(item) {
3.                                 uni.showLoading({
4.                                         title: '加载中...'
5.                                 })
6.                                 uni.request({
7.                                         url: this.baseFileURL + '/pdf/preview/' + item.resourceId,
8.                                         method: 'POST',
9.                                         responseType: 'arraybuffer'
10.                                 }).then(res => {
11.                                         uni.hideLoading()
12.                                        
13.                                         let pdfData = res.data
14.                                         let blob = new Blob([pdfData], {
15.                                                 type: 'application/pdf;charset=UTF-8'
16.                                         })
17.                                         pdfData = window.URL.createObjectURL(blob)
18.                                         this.h5PdfUrl = encodeURIComponent(pdfData)
19.                                         uni.navigateTo({
20.                                                 url: '/subpages/webview/webview?fileUrl=' + this.h5PdfUrl + "&isPdfView=true",
21.                                         })
22.                                 })
23.                         },
25.                         //pdf预览
26.                         pdfView(item) {
27.                                 item.fileUrl = this.baseFileURL + '/pdf/preview/' + item.resourceId
29.                                 // #ifdef APP-PLUS
30.                                 switch (uni.getSystemInfoSync().platform) {
31.                                         case "android":
32.                                                 console.log("android")
33.                                                 uni.navigateTo({
34.                                                         url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl) +
35.                                                                 "&isPdfView=true",
36.                                                 })
37.                                                 break;
38.                                         case "ios":
39.                                                 console.log("ios")
40.                                                 uni.navigateTo({
41.                                                         url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl),
42.                                                 })
43.                                                 break;
44.                                 }
45.                                 // #endif
47.                                 // #ifdef H5
48.                                 this.h5PdfView(item)
49.                                 // #endif
51.                                 //  #ifdef MP-WEIXIN
52.                                 let fileName = item.resourceId.substring(item.resourceId.lastIndexOf('/') + 1);
53.                                 uni.downloadFile({
54.                                         url: item.fileUrl, //文件地址
55.                                         filePath: wx.env.USER_DATA_PATH + '/' + fileName,
56.                                         success: function(res) {
57.                                                 const filePath = res.filePath || res.tempFilePath;
58.                                                 uni.openDocument({
59.                                                         filePath: filePath,
60.                                                         showMenu: false,
61.                                                         success: function(res) {}
62.                                                 });
63.                                         }
64.                                 });
65.                                 // #endif
66.                         }

复制代码

五：预览效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。