uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5

这篇具有很好参考价值的文章主要介绍了uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载。在此功能的开发中,我常遇到以下四个问题:

  • 图片预览功能实现,但是PDF,word,xls文件无法打开。
  • 安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件。
  • 图片第一次可以打开,第二次就报404,找不到文件。
  • 预览不仅要满足安卓和ios系统,也要使浏览器+企业微信H5也要可以打开文件预览。

二、 图片预览功能实现,但是PDF,word,xls文件无法打开

uni.previewImage()是uniapp的图片预览API,经常与uni.chooseImage()一起使用,不过本文中我们只用到uni.previewImage()即可。注:此API只支持打开图片类型文件。

根据官网文档所说,他只有一个必填参数,那就是urls,也就是图片的路径,因为这个参数是一个数组,我用时,直接把路径放到了一个数组里用,current这个参数是url的索引值,不写就默认是0。

       	// 预览图片
        let url = 'https://www.123.com/'
		uni.previewImage({
            current: 0,
			urls: [url],
			success: function(data) {
					console.log('预览成功');
				},
			fail: function(err) {
					console.log(‘预览失败++err.errMsg);
				}	
		});

三、安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件。

uni.downloadFile():把文件下载到本地,返回的是文件下载后的临时路径。必传参数url,string类型。
uni.saveFile(OBJECT):把文件保存到本地。
uni.openDocument():在新页面打开打开文件,支持doc, xls, ppt, pdf, docx, xlsx, pptx格式,常常与文件下载连用。

使用简例如下:

uni.downloadFile({
    url: url,
    success: function(res) {
             var filePath = res.tempFilePath;
             uni.saveFile({
                 tempFilePath:filePath,
                 success:function(res){
                     //保存成功并打开文件
                     uni.openDocument({
                        filePath: filePath,
                        success: (res) => console.log('成功打开文档'),
                        fail:(res)=>{
						uni.showToast({
                            icon:'none',
                            title:'文件打开失败',
                            duration:2000
                        })
                       }
                    })
                 }
             })
        }
});

在此功能是初始版本中,因为我发现此方法jpg,png等图片格式也都可以打开,抱着侥幸心理,我就不管是什么类型,就都用的这一套代码下载预览,后来安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件,改了好几个版本,都没从根本上解决问题。

后来我发现,每次打开图片,安卓手机都是直接打开到相册,但是ios的却是在app页面基础上直接打开,我怀疑是ios系统下载缓存机制与安卓不同,才会出现这样的问题,后来想了一套更加完善的方法(在第六章中展现)。

四、图片第一次可以打开,第二次就报404,找不到文件

这个问题好像是因为我们后端的原因,根据后端要求,让我在每次访问图片链接时,后面都拼接上时间戳,保证每次访问的链接结尾都不一样即可解决。

五、预览不仅要满足安卓和ios系统,也要使浏览器也可以打开文件预览

浏览器使用window.open(url,'_blank')即可打开,_blank是规定在新开页面打开文件,_self是在当前页面打开文件。
注:此方法在浏览器可以打开,但是发布到H5时,不一定有效。原以为H5的打开就类似于浏览器的打开方式,因此见浏览器可以打开,便没有测试。最近突然发现,此方法只能用于浏览器。企业微信H5端想要打开的话,则需要用window.location.assign(url);

六、最终版本-兼容安卓、ios、浏览器

下面便是我屡败屡战,实践出来的最终结果,既满足了安卓、ios、浏览器三端的兼容问题,又满足了不管图片还是文件都可以预览的条件。

知识补充:通过使用#ifdef、#endif、#ifdef指示符,我们可以区隔一些特定的代码。

let url = data.url
let type = data.type

//如果是app走这里
//#ifdef APP-PLUS
let times = Date.parse(new Date());//拼接时间戳(根据自己项目需要考虑是否拼接)
uni.downloadFile({
    url: url+'?code='+times,
    success: function(res) {
    var filePath = res.tempFilePath;
    if (type=== 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif' ) {
        //如果是图片走这里
		uni.previewImage({
            current: 0,
            urls: [url],
	})
    }else{
        //如果是文件走这里
		uni.openDocument({
            filePath: filePath,
            success: (res) => console.log('成功打开文档'),
            fail:(res)=>{
                uni.showToast({
                    icon:'none',
                    title:'文件打开失败',
                    duration:2000
                    })
            }
        })
    }
}
});
//#endif
//#ifdef H5
//如果是浏览器走这里
window.open(url,'_blank');
//如果是H5走这里,如果这里没效果,可以把window.open(url,'_blank');注释掉试试
window.location.assign(url);
//#endif

创作不易,可以朝我竖一个大拇指嘛~文章来源地址https://www.toymoban.com/news/detail-409173.html

到了这里,关于uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue/uniapp —— 兼容ios与安卓问题

    ① css样式无效:安卓可,ios不可 ② 富文本外层包裹:安卓可,ios不可 ③ 提取富文本文字后加css样式:安卓可,ios可,不完美的解决办法

    2024年02月16日
    浏览(41)
  • Vue3实现PDF文件预览 (低版本浏览器兼容)

    前言:         最近和小伙伴们一起合作完成一个企业级知识库项目,其中一个功能就是后端把所有格式的文件转换为PDF,前端实现渲染PDF文件从而实现预览,干了整整一周(考虑到低版本浏览器的兼容),试用了几种方案(iframe预览已被废弃,不适用本项目,想了解的同学

    2024年01月20日
    浏览(39)
  • vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放(兼容微信浏览器)

    安装  npm install weixin-js-sdk 引入 template     div class=\\\"circle_box\\\"         div id=\\\"content\\\"/div          img class=\\\"img_0\\\" src=\\\"https://img.yzcdn.cn/vant/cat.jpeg\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\" class=\\\"img_1\\\" v-show=\\\"playbool\\\" src=\\\"@/assets/decompression/pressure_audio_play.png\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\"

    2023年04月23日
    浏览(98)
  • 图片链接或pdf链接通过浏览器打开时,有时可以直接预览,有时却是下载,为什么?

    在前端开发中,有时候需要对一些文件链接进行特殊处理,比如对于一些图片链接或者PDF链接,有时我们需要通过浏览器打开进行预览,有时又不希望通过浏览器进行打开,而是希望能够直接下载到本地。但现实效果却往往跟我们相反,我们希望浏览器打开时,他却直接下载

    2024年02月10日
    浏览(60)
  • element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)

    目录 1.组件源码  2.html 代码 3.组件源码  此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的,word、excel是直接下载、pdf浏览器打开的形式,如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。 1.组

    2024年02月11日
    浏览(69)
  • H5项目中使用微信JS-SDK(以H5项目批量上传图片为例,兼容IOS及安卓)

    H5项目中使用微信图片上传相关sdk,主要用于解决 1.安卓手机无法一次选择多张图片进行上传问题;2.控制IOS系统手机一次可无限量选择图片上传的问题 一、准备工作:公众号配置 验证所需使用的sdk是否符合需求 可在使用场景中,打开微信官方提供的 微信SDKDemo 链接,或企业

    2024年02月07日
    浏览(48)
  • uniapp微信小程序 图片&文件上传并且支持图片和文件预览(pdf等文件预览)巨细教学!

    首先呢,小程序打开pdf等文件有下面几种办法: 用微信自带的wx.downloadFile() + wx.openDocument() 使用web-view,uni-app中webview可以直接加载pdf文件 可以使用网上说的pdf.js去实现(我没有用到这个,就不介绍了) 网上查到很多资料显示安卓是可以通过上面第一种办法,但是ios用第一个

    2024年02月04日
    浏览(64)
  • uniapp判断是图片还是pdf,如果是pdf则进行下载预览

    一、附件中有图片也有pdf,需要进行预览,图片可直接预览,而pdf是下载后再预览 二、主要代码

    2024年04月26日
    浏览(39)
  • uniapp文件下载并预览

    大概就是这样的咯,文件展示到页面上,点击文件下载并预览该文件;   通过点击事件 handleDownLoad(file.path) ,file.path为文件的地址;   功能代码: 样式的话,大家根据自己需求写吧,我只功能代码展示出来就可以了;

    2024年02月13日
    浏览(48)
  • 解决selenium使用chrome下载文件(如pdf)时,反而打开浏览器的预览界面

    在初始化浏览器的时候,添加以下配置即可: 使用如下程序初始化,可以避免很多问题: 在需要下载文件时,只需要直接 browser.get(网络文件URL) 即可直接下载文件到配置的 \\\"C:UsersUser4Downloads\\\" 路径下:

    2024年02月04日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包