在小程序中,有时数据中含有一些必要的文档需要下载,当我们与后端交互得到了文档的URL后,无法直接预览,需要将其下载,然后再预览。
UI代码如下
<view class='category-item'>
<block wx:for="{{fileTypeList}}">
<view bindtap='previewFile' data-url='{{item.url}}'>
<label>文档:</label>{{item.name}}
</view>
</block>
</view>
其中fileTypeList是后端返回的数据,内部包含了Url和Name两个字段。同时在View中绑定了一个下载文件的事件。
previewFile: function (event) {
var that = this;
var url = event.currentTarget.dataset.url;
if (url === undefined || url === null || url.length <= 0) {
wx.showToast({
title: 'URL为空',
})
return;
}
var index1 = url.lastIndexOf(".");
var suffixName = url.substring(index1 + 1, url.length);//后缀名
if (suffixName === undefined || suffixName === null || suffixName.length <= 0) {
wx.showToast({
title: '无法从URL中解析出后缀名',
})
return;
}
suffixName = suffixName.toLowerCase();
var imageSuffixArr = ["bmp", 'jpg', 'jpeg', 'png', 'gif'];
for (var i = 0; i < imageSuffixArr.length; i++) {
if (suffixName == imageSuffixArr[i]) {
wx.previewImage({
urls: [url],
})
return;
}
}
var supportSufixArr = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
var isSupport = false;
for (var i = 0; i < supportSufixArr.length; i++) {
if (suffixName == supportSufixArr[i]) {
isSupport = true;
break;
}
}
if (!isSupport) {
wx.showToast({
title: '不支持' + suffixName,
})
return;
}
wx.showLoading({
title: '加载中..',
})
wx.downloadFile({
url: url,
success: function (res) {
var filePath = res.tempFilePath;
console.log(filePath);
wx.openDocument({
filePath: filePath,
success: function () {
console.log("打开文档成功:" + url);
wx.hideLoading();
},
fail: function (r) {
console.log(r);
wx.hideLoading();
wx.showToast({
title: '打开失败',
duration: 2000
})
},
complete: function (r) {
console.log(r);
wx.hideLoading();
}
})
},
fail: function (r) {
console.log("下载失败:" + url + "." + r);
wx.hideLoading();
wx.showToast({
title: '下载失败',
duration: 2000
})
}
})
}
在PreviewFile事件中,先依据url提取文件的后缀,来判断是否是图片,如果是图片则直接调用wx.previewImage来预览图片。如果不是图处,那就判断是否是支持预览的文档。如果是支持预览的文档则下载该文档后然后预览。
需要注意:下载文档的时候,必须要在小程序的后台将URL的域名配置到下载的列表中,同时需要采用https,否则会下载失败。在没的手机中,对https协议支持版本不同,所以必须要支持多版本的HTTPS才好,不然有的手机会用不了(可能会出现socket hang up的错误提示。),有的手机可以用。这样又会成为一个神坑了。
---------------------
作者:_学而时习之_
来源:CSDN
原文:https://blog.csdn.net/xxdddail/article/details/78443261?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!