uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能
永远不会太晚 人气:0以下代码兼容三端,app,h5,微信小程序,经过个人测试
手机端有两种方法,使用renderjs或者uniapp的api
两者的区别
- 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件
- 使用uniapp的api则可以直接下载并直接预览,不需要用户操作
- 根据场景需求进行选择即可
<template> <div> <!-- #ifdef APP-PLUS --> <button @click="test.exportPDF">预览和下载pdf(renderjs)</button> <button @click="exportPDF">预览和下载pdf(uniapp api)</button> <!-- #endif --> <!-- #ifndef APP-PLUS --> <button @click="exportPDF">预览和下载pdf</button> <!-- #endif --> </div> </template> <!-- #ifdef APP-PLUS --> <script module="test" lang="renderjs"> export default { methods: { exportPDF() { const Url = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf" const a = document.createElement("a") a.href = Url a.download = "download" a.click() } } } </script> <!-- #endif --> <script> export default { methods: { exportPDF() { // #ifdef H5 window.open( "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf" ) // #endif // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名 // #ifdef MP-WEIXIN uni.downloadFile({ url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf", success: res => { console.log(res) if (res.statusCode === 200) { // 预览pdf文件 uni.openDocument({ filePath: res.tempFilePath, showMenu: true, // 右上角菜单,可以进行分享保存pdf success: function(file) { console.log("file-success", file) } }) } } }) // #endif // #ifdef APP-PLUS uni.downloadFile({ url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf", success: res => { console.log(res) if (res.statusCode === 200) { // 保存pdf文件至手机,一般安卓端存储路径为:手机存储/dcim/camera文件夹下 uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { uni.showToast({ title: "文件已保存至/DCIM/CAMERA文件夹下", icon: "none" }) setTimeout(function() { // 预览pdf文件 uni.openDocument({ filePath: res.tempFilePath, showMenu: true, success: function(file) { console.log("file-success", file) } }) }, 1500) }, fail: function() { uni.showToast({ title: "保存失败,请稍后重试!", icon: "none" }) } }) } } }) // #endif } } } </script>
总结
加载全部内容