记录一次微信小程序实现预览pdf

微信小程序预览pdf需要注意的是，在安卓端和ios端是有差异的。

安卓端不能用web-view直接打开，需要先下载到本地，再打开文件进行预览。

网上说的ios端可以直接用web-view进行预览，但是我使用ios预览pdf时，报400错误。

尚未解决，记录一下。

<template><view><web-view :webview-styles="webviewStyles" :src="fileUrl"></web-view></view>
</template><script>import globalConfig from '@/config/config.js'export default {data() {return {fileUrl: null,};}, onLoad(option) {console.log(option);this.fileUrl = globalConfig.imageRootUrl+option.file;console.log(this.fileUrl);} }
</script>

//这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件openReport(url) {uni.showLoading({title: '加载中',mask: true})wx.downloadFile({url: url,success: function(res) {console.log(res)uni.hideLoading()var filePath = res.tempFilePath;uni.showLoading({title: '正在打开',mask: true})wx.openDocument({filePath: filePath,fileType: 'pdf',success: function(res) {console.log(res)uni.hideLoading()console.log('打开文档成功');},fail: function(err) {uni.hideLoading()console.log('fail:' + JSON.stringify(err));}});},fail: function(err) {uni.hideLoading()console.log('fail:' + JSON.stringify(err));}});},navigateTo(url) {uni.navigateTo({url});},showPdf(){let self = this;switch (uni.getSystemInfoSync().platform) {case 'android':console.log('安卓')// 这里直接调用原生的方法，我们上面定义的self.openReport(globalConfig.imageRootUrl+self.evaluationSuitability.filePath)break;case 'ios':console.log('IOS')//这里跳转web-view页面self.navigateTo('/pages/evaluationSuitability/pdf?file='+self.evaluationSuitability.filePath)break;default:console.log('微信开发者工具')self.navigateTo('/pages/evaluationSuitability/pdf?file='+self.evaluationSuitability.filePath)break;}}

记录一次微信小程序实现预览pdf相关推荐

微信小程序：预览pdf，ppt，word等文件
wx.openDocument 可打开文件类型有: doc doc 格式 docx docx 格式 xls xls 格式 xlsx xlsx 格式 ppt ppt 格式 pptx pptx 格式 pd ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
微信小程序打开预览下载的文件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用 wx.openDocument(obj) 方法预览 wx.downloadFile({url: 'htt ...
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
uniapp微信小程序老预览失败，或者上传失败（已解决）
uniapp微信小程序提示报错老是提示超过了2M 但是我改完之后还是提示超过2M的错误 message:Error: 系统错误,错误码:80058,preloadRule [pages/index ...
unicloud开发微信小程序调试预览、体验版无法获取数据
unicloud开发微信小程序使用的云空间是阿里的.使用腾讯自家的配置上简单些,但开始收费了.使用阿里的云空间需要在小程序平台配置域名白名单.问题出在,我已经配置了阿里云空间的域名,在使用体验版小程序 ...
微信小程序----图片预览
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载效果图原理使用wx.chooseImage选择本地图片: 使用wx.preview ...
微信小程序手机预览请求不到数据？
本地开发调试小程序时,用手机预览需要有如下设置: 1.微信开发者工具中,本地设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服 ...

记录一次微信小程序实现预览pdf

记录一次微信小程序实现预览pdf相关推荐

最新文章

热门文章