微信小程序预览二进制流文件

news/2024/7/20 2:16:22 标签: 小程序

微信小程序将后端接口返回的二进制流PDF 文件在线预览

  • 一、微信小程序的文件系统
  • 二、小程序实现文件预览
  • 三、实现效果图
  • 总结



一、微信小程序的文件系统

微信小程序文件系统参考官方文档:微信小程序文档
我们主要是把后端接口获取到的pdf二进制流,下载保存到微信的本地用户文件,下载后预览再删掉,因为本地用户文件每个用户只有200M,所以预览后删掉。

二、小程序实现文件预览

代码如下(示例):

//使用登记牌扫码查询
		usequercode() {
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					wx.showLoading({
						title: '正在识别中....'
					});
					//扫描二维码
					if (res.scanType != 'QR_CODE') {
						uni.showToast({
							title: '请扫描正确的使用登记牌二维码',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					//未携带需要的参数
					else if (res.result.indexOf('applyId') < 0 || res.result.indexOf('applyType') < 0) {
						uni.showToast({
							title: '解析二维码中存在非法参数',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					console.log('条码类型:' + res.scanType);
					console.log('条码内容:' + res.result);
					//再文件下载后的用处
					const result = res.result;
					const applyid = result.substring(result.lastIndexOf('=') + 1); //获取到条码内容,获取参数访问接口
					const applytype = result.substring(result.indexOf('=') + 1, result.indexOf('&'));
					console.log(applyid);
					console.log(applytype);

					//读取本地文件
					const fs = uni.getFileSystemManager();

					uni.request({
						url: getApp().globalData.config.url + 'enterprise/useApply/usingCodeUpload',
						method: 'POST',
						headers: { isToken: false },
						data: { applyId: applyid, applyType: applytype },
						responseType: 'arraybuffer', //此处是请求文件流,必须带入的属性
						success: res => {
							console.log(res);
							var data = res.data;
							//将接口返回的二进制数据转成pdf文件
							//uni.getFileSystemManager()
							wx.getFileSystemManager().writeFile({
								// 写文件
								filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
								data: data,
								encoding: 'binary', //二进制流文件必须是 binary
								success(res) {
									wx.openDocument({
										// 新开页面打开文档
										filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', //拿上面存入的文件路径
										success: function(res) {
											console.log(res);
											setTimeout(() => {
												wx.hideLoading();
											}, 500);
											//查看后删除本地用户文件
											//wx.getFileSystemManager().unlink({
												// 写文件
												//filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义

												//success(res) {
													//console.log(res);
												//}
											//});
										}
									});
								},
								error(error) {
									console.log(error);
								}
							});
						}
					});
				}
			});
		},

三、实现效果图

该处使用的url网络请求的数据。


总结

我本来想打开后删除的,再真机调试下没问题,但发布在手机上提示预览失败,请在其他应用打开,删除写在compltet也一样,后面考虑到服务器资源内存资源比存储性能高,由放在服务器上了pdf。


http://www.niftyadmin.cn/n/1319760.html

相关文章

如何简单地实现小程序分享页拥有返回首页按钮

最近对小程序有一定的了解,也对小程序赞赏有加,体验很好,但是分享小程序的单个页面容易有一个问题,回到首页的交互复杂,不存在后退按钮,先来看看有实现这个流程的小程序如何做这个事情--快住--全广州最走心的免费帮找租房小团队(感谢帮我找到合适的住所) 先看效果 仔细看的话…

uniapp添加水印

uniapp添加水印&#xff0c;防坑专栏一、拍照选单张添加水印二、从图库选多张添加水印三、再组件中写添加写添加水印方法四、自定义水印相机组件拍照&#xff08;位置信息当前时间&#xff09;水印相机组件一、拍照选单张添加水印 如果是单张水印的话&#xff0c;相信大家处理…

微信小程序 自定义头部导航栏 navigationStyle

但是有时候我们项目需求可能需要自定义头部导航栏&#xff0c;如下图所示&#xff1a; 现在具体说一下实现步骤及方法&#xff1a; 步骤&#xff1a; 1.在 app.json 里面把 "navigationStyle" 设置为 "custom" 这样子之后就只会保留右上角胶囊按钮了。 …

产品经理的入门之道

目录 前言 产品第一关&#xff1a;沟通理解 产品第二关&#xff1a;执行力 产品第三关&#xff1a;绘制原型 产品第四关&#xff1a;文档编写、各类图绘制 前言 因为公司新接手的项目紧急&#xff0c;那边人手不够&#xff0c;所以急忙抽调我这个想转型的产品菜鸟前去打下手…

合格的编写接口只需要明白这些

一、接口概述 根据系统功能&#xff0c;一般接口可以概括为增、删、改、查这四类&#xff0c;对于接口中的参数&#xff0c;我们都是要进行校验的&#xff0c;如 必填项和非必填项参数合法性&#xff08;防止sql注入、xxs攻击等&#xff09;时间类型、数字类型、规则验证&…

小程序的分享 onShareAppMessage(options)

在页面的js文件中定义了 onShareAppMessage 函数时&#xff0c;页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。 只有定义了该函数&#xff0c;小程序右上角的菜单中才会有转发按钮用户点击转发按钮的时候回调用该函数该函数内需要 return 一个 Object&#xf…

小程序canva绘画海报保存本地图片

获取线上图片&#xff0c;保存本地临时文件&#xff1a; wx.getImageInfo({src: img1,success: function(res1) {} }); 获取移动设备width&#xff0c;height&#xff0c;计算canvas高宽&#xff1a; // 获取系统width,heightgetSystemInfo: function() {let that this;// …