uniapp(移动端H5、APP、小程序兼容)实现点击下载文档

目录

一、移动端H5实现下载预览文档

二、小程序、APP下载预览文档

一、移动端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} = fileif (documentFile) {let url = API.file + documentFileuni.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: '失败请重新下载',});},});},