uni-app 预览pdf文件

交通参与者

安卓uni-app实现pdf文件预览功能：

1.https://mozilla.github.io/pdf.js/getting_started/#download下载

放在根目录下，

2.新建一个webView页面

 1 <template>
 2     <view style="width: 100%;" >
 3         <web-view :src="allUrl"></web-view>
 4     </view>
 5 </template>
 6 
 7 <script>
 8     export default {
 9         data() {
10             return {
11                 allUrl:'',
12                 viewerUrl: '/hybrid/html/web/viewer.html', // 格式化文件流的一个js 文件
13             }
14         },
15         onLoad(options) {
16             // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。decodeURIComponent解码
17             let fileUrl = encodeURIComponent(decodeURIComponent(options.fileUrl)); 
18             this.allUrl = this.viewerUrl + '?file=' + fileUrl
19           }
20     }
21 </script>

3.前一个页面增加跳转：

1 // 预览pdf
2 toViewFile(item) {
3     let fileUrl = `${this.baseUrl}/share/downloadFile?filePath=${item.filePath}&fileName=${item.fileName}`;
4     uni.navigateTo({
5         url: '/pages/webView/webView?fileUrl='+ encodeURIComponent(fileUrl)
6     });
7 },

由于url路径比较长，带有&符号，传参，&后面的会被截断，故需要加上encodeURIComponent。完美解决pdf无法打开问题。

 

相关网站：https://mozilla.github.io/pdf.js/getting_started/#download   

　　　　　https://blog.csdn.net/mwh_user/article/details/112368597

 

【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

https://blog.csdn.net/weixin_49521721/article/details/114064682?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2

 

来源：https://www.cnblogs.com/guwufeiyang/p/14962051.html