小程序下载PDF文件并保存在本地(适用IOS安卓)

本文介绍了在微信小程序中实现下载PDF发票的功能,包括iOS和安卓平台的处理方式。iOS通过提示用户复制下载链接在Safari预览,安卓则利用FileSystemManager的saveFile和openDocument功能,将文件保存到手机下载管理器中。
摘要由CSDN通过智能技术生成

项目需要要做个下载功能,下载PDF版发票并保存在本地文件中。
下载文件:用uni.downloadFile或wx.downloadFile下载文件,拿到返回文件的本地临时路径。
保存文件:
1.IOS端
ios不能直接下载在本地,需用用户自己复制下载链接,后在Safari浏览器中预览下载。js功能代码如下:

	//先弹窗提醒用户复制链接
	uni.showModal({
		title: '复制发票链接',
		content: '请点击确定,复制发票链接,在Safari浏览器中预览下载',
		showCancel: false,
		success: function (res) {
			if (res.confirm) {
				this.copyLink(item)
			}
		}
	});
	//复制链接
	copyLink(item){
		uni.setClipboardData({
			data: item,   // 要复制的路径
			success: function(res) {
				uni.getClipboardData({
					success: function(data) {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail: function(data1) {
						console.log(data1,'复制回调');						
					}
				});
			}
		});
	}

2.安卓端
存储文件的话,建议使用FileSystemManager对象中的方法,旧的uni.saveFile不维护了。
FileSystemManager是微信小程序文件管理器,通过 wx.getFileSystemManager 获取。但是保存文件后,返回的存储后的文件路径 (本地路径)格式是wxfile://store_eXXXXXXX,很难找到,在网上看华为手机存储的路径有三个,三个路径“tencent/MicroMsg/WeiXin”、“tencent/MicroMsg/Download”、“Android/data/com.tencent.mm/MicroMsg/Download”,在手机上没找到,所以用了别的方法。
方法:使用wx.getFileSystemManager().saveFile下载文件,再使用wx.openDocument()打开文件,配置一定要加上showMenu字段,这样打开预览的文件右上角就会出现···,点击···即可保存文件。这样文件会直接保存在手机下载管理器中,非常容易找到。
具体使用的js功能代码如下:

	uni.downloadFile({
		url: item,// 文档地址
		success: (data) => {
			if (data.statusCode == 200) {
				wx.getFileSystemManager().saveFile({
					tempFilePath: data.tempFilePath, //临时路径
					success: function (res) {// 保存路径
						wx.openDocument({
							filePath: res.savedFilePath,
							showMenu: true,
							success: function(res) {
							},
							fail(error) {}
						})
					}
				});
			}
		}, fail: (err) => { 
			showToast("失败请重新下载" )
		},
	});
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
iOS 设备上预览二进制流的 PDF 文件,可以使用 `wx.downloadFile()` 方法下载文件,然后使用 `wx.openDocument()` 方法打开文件。但是,由于 iOS 设备的一些限制,可能会导致无法正常预览 PDF 文件。 如果您遇到 iOS 设备无法预览 PDF 文件的问题,可以尝试以下两种方法: 1. 使用第三方组件 可以使用第三方组件来实现 PDF 文件的预览,例如 `pdf.js`。您可以将 PDF 文件转换为 `base64` 格式,然后使用 `pdf.js` 解析显示。 2. 使用 WebView 使用 `WebView` 控件来加载 PDF 文件,但是需要注意的是,iOS 设备的 `WebView` 控件并不支持直接加载二进制流的 PDF 文件,需要将二进制流转换为 `base64` 格式后再进行加载。具体实现可以参考以下代码: ``` wx.downloadFile({ url: 'your_pdf_url', success: function (res) { var filePath = res.tempFilePath; wx.getFileSystemManager().readFile({ filePath: filePath, encoding: 'base64', success: function (res) { var base64 = res.data; wx.setStorageSync('pdfBase64', base64); // 将 base64 数据存储到本地缓存中 wx.navigateTo({ url: 'webview?url=' + encodeURIComponent('data:application/pdf;base64,' + base64) // 跳转 WebView 页面 }); }, fail: function (res) { console.log(res); } }); }, fail: function (res) { console.log(res); } }); ``` 在 WebView 页面中,可以通过 `window.location.href` 来获取 PDF 文件的 `base64` 数据,并使用 `PDFObject` 或其他第三方库来显示 PDF 文件。具体实现可以参考以下代码: ``` <web-view src="{{url}}" bindmessage="onMessage"></web-view> Page({ onMessage: function (e) { var base64 = wx.getStorageSync('pdfBase64'); // 从本地缓存中获取 base64 数据 var data = JSON.parse(e.detail.data); if (data.type === 'getPdfBase64') { e.target.postMessage({ type: 'pdfBase64', data: base64 }); // 将 base64 数据传递给 WebView 页面 } } }); ``` 以上代码仅供参考,具体实现可以根据实际需求进行调整。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值