微信小程序预览PDF文件
vue 2023-04-07 21:21:19

两种场景：

1、对于url返回的文件流，先downloadfile，然后再预览

2、直接返回可预览的URL地址

3、小程序后台，需要配置：开发管理-开发设置-服务器域名（request合法域名，uploadFile合法域名，业务域名）

 

 

第一种，download之后，可以获取到一个本地临时地址，wx.openDocument可以直接打开文档

JavaScript Code复制内容到剪贴板
  1.             // #ifdef MP  
  2.             // 仅限于微信小程序可用  
  3.             this.$store.dispatch('user/downloadFile', {  
  4.                 url: graceRequestConfig.apiBaseUrl + 'user/protocol'  
  5.             }).then(filePath => {  
  6.                 console.log('下载成功', filePath)  
  7.                 // 新开页面打开文档，pdf预览  
  8.                 wx.openDocument({  
  9.                     filePath: filePath,  
  10.                     // 展示菜单在手机右上角，可提供保存功能  
  11.                     showMenu: true,  
  12.                     success: function(res) {  
  13.                         console.log('打开文档成功')  
  14.                     }  
  15.                 })  
  16.             }).catch(err => {  
  17.                 console.log(err)  
  18.             })  
  19.             // #endif  
  20.   
  21.   
  22.   
  23.   
  24.   
  25.   
  26. / vuex的action添加一个：  
  27. downloadFile: async function({  
  28.     state,  
  29.     commit,  
  30.     rootState  
  31. }, params) {  
  32.     // 获取实时数据  
  33.     return new Promise((resolve, reject) => {  
  34.         const token = '1234'  
  35.         const header = {}  
  36.         header['auth'] = 'Auth ' + token;  
  37.         uni.downloadFile({  
  38.             url: params.url,  
  39.             header: header,  
  40.             success: (res) => {  
  41.                 if (res.statusCode === 200) {  
  42.                     resolve(res.tempFilePath)  
  43.                 }else{  
  44.                     reject(res)  
  45.                 }  
  46.             },  
  47.             fail:function(e){  
  48.                 console.log('下载失败')  
  49.                 reject(e)  
  50.             }  
  51.         });  
  52.           
  53.     })  
  54. },  

 

相关文档：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

 

第二种，有url之后，需要在web-view打开，可以自由开发页面，依赖，pdf.js

下载：http://mozilla.github.io/pdf.js/getting_started/

 

 1、前往 pdf.js 的 官网 下载库文件，我们下载哪个版本都是可以的，后者适用于旧版浏览器，我这里下载的后者。

 2、下载完成后，因为微信小程序打包的限制，我将库文件放到云服务器上，如果想测试可以联系我提供测试资源，H5 可以放到本地。目录如下：

 

这里注意一下：PDF.js访问远程服务器报file origin does not match viewer's

简单粗暴的方法就是把viewer.js的判断远程地址的代码注释掉即可。

JavaScript Code复制内容到剪贴板
  1. //   if (fileOrigin !== viewerOrigin) {  
  2. //     throw new Error("file origin does not match viewer's");  
  3. //   }  

 

3、通过web目录下 viewer.html 查看器 + pdf文件路径预览pdf文件

 

XML/HTML Code复制内容到剪贴板
  1. <web-view :webview-styles="webviewStyles" :src="url"></web-view>  
  2.   
  3.   
  4. <script>  
  5.     export default {  
  6.         data() {  
  7.             return {
  8.                 webviewStyles: {  
  9.                     progress: {  
  10.                         color: '#ff0a22'  
  11.                     },  
  12.                     url: ''  
  13.                 }  
  14.     //.....
  15. </script>  

 

可以前端直接跳到webview页面

JavaScript Code复制内容到剪贴板
  1. const url = encodeURIComponent('https://xxxxx.com/web/viewer.html?file=https://static.xxx.com/zhongqizhongbao/qianshuwenjian.pdf')  
  2.                 uni.navigateTo({  
  3.                     url: '/pages/ucenter/protocol?title=签署文件&href='+url,  
  4.                     success: res => {},  
  5.                     fail: () => {},  
  6.                     complete: () => {}  
  7.                 });  

 

 

本文来自于：http://www.yoyo88.cn/study/vue/663.html

上一篇 vue3+vite使用环境变量.env的一些配置说明
下一篇 vue3整合UEditor编辑器
相关的文章
Powered by yoyo苏ICP备15045725号