当前位置：首页 > news >正文

uniapp 微信小程序和h5处理文件(pdf)下载+保存到本地+预览功能

news 2025/9/14 7:05:06

uniapp实现微信小程序下载资源功能和h5有很大的不同，后台需返回blob文件流

1.微信小程序实现下载资源功能

步骤1：下载文件

uni.downloadFile({url:url,//调接口返回urlsuccess:(res)=>{uni.hideLoading();if(res.statusCode==200){var tempFilePath = res.tempFilePath;saveFile(tempFilePath);}else{uni.showToast({icon:'none',title:'报告下载失败'})}},fail:err=>{uni.hideLoading();uni.showToast({icon:'none',title:'报告下载失败'})reject(err);}
})

步骤2：保存文件

saveFile(tempFilePath){//保存到本地//文件保存到本地uni.saveFile({tempFilePath:tempFilePath,//临时路径success:res=>{uni.showToast({icon:'none',	mask:true,title:'文件已保存'+res.savedFilePath,//保存路径duration:3000})setTimeOut(()=>{//打开文档查看uni.openDocument({filePath:res.savedFilePath,success:res=>{console.log('打开文档成功');}})},3000)}})
}

步骤3：打开文档查看

//打开文档查看
uni.openDocument({filePath:res.savedFilePath,success:res=>{console.log('打开文档成功');}
})

2.H5实现下载资源功能

步骤1：获取下载文件

uni.downloadFile({url:url,//调接口返回的urlsuccess:res=>{uni.hideLoading();if(res.statusCode==200){var tempFilePath = res.tempFilePath;saveFile(tempFilePaht);}else{uni.showToast({icon:'none',title:'报告下载失败'})}},fail:err=>{uni.hideLoading();uni.showToast({icon:'none',title:'报告下载失败'})reject(err);}
})

步骤2：保存文件

saveFile(url){//保存到本地try{const fileName = '报告名称';//new Blob 实例化文件流//let url = fileData//const url = window.URL.createObjectURL(new Blob([fileData],{type:'application/pdf'}))const link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download',fileName);document.body.appendChild(link);link.click();//下载完成移除元素document.body.removeChild(link);//释放掉blob对象window.URL.revokeObjectURL(url)uni.showToast({title:'下载成功'})}catch(error){uni.showToast({title:'下载失败'})}
}