目录
一、移动端H5实现下载预览文档
用uniapp开发微信公众号网页H5实现下载文档功能时,在微信开发者工具上点击下载调试会显示告警。
1.为了防止在手机上也打开不了链接情况,在点击下载的同时可以去复制文档链接,在手机浏览器打开
//复制链接
uni.setClipboardData({
data: url,
success: function() {
console.log('success'); //调用方法成功
}
})
2.利用a标签实现打开文档链接,这个方法在移动端H5可以直接打开,亲测有效!!!
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名,默认是'下载'
oA.target = "_blank"
oA.href = url; //临时路径再保存到本地
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
完整代码
// 点击下载文件
//file带有文件路径的数据
handleFile(file) {
console.log(file);
let {
documentFile
} = file
if (documentFile) {
let url = API.file + documentFile
uni.setClipboardData({
data: url,
success: function() {
console.log('success'); //调用方法成功
}
})
console.log(url);
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名,默认是'下载'
oA.target = "_blank"
oA.href = url; //临时路径再保存到本地
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
},
二、小程序、APP下载预览文档
直接使用uniapp的api
//签订合同下载
Download() {
//下载文档
uni.downloadFile({
url: 'url',//下载地址接口返回
success: (data) => {
if (data.statusCode === 200) {
//文件保存到本地
uni.saveFile({
tempFilePath: data.tempFilePath, //临时路径
success: function(res) {
uni.showToast({
icon: 'none',
mask: true,
title: '文件已保存:' + res.savedFilePath, //保存路径
duration: 3000,
});
setTimeout(() => {
//打开文档查看
uni.openDocument({
filePath: res.savedFilePath,
success: function(res) {
// console.log('打开文档成功');
}
});
}, 3000)
}
});
}
},
fail: (err) => {
console.log(err);
uni.showToast({
icon: 'none',
mask: true,
title: '失败请重新下载',
});
},
});
},