uniapp 附件（图片、pdf、word、excle）上传、在线预览 （Android、Ios）（附送250套精选微信小程序源码）

已于 2024-04-01 14:55:37 修改
阅读量937 收藏 13
点赞数 4
分类专栏： Uniapp 文章标签： uni-app pdf
于 2024-04-01 14:37:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwzhang1101/article/details/137231640
版权

一、PDF预览

1、下载PDF预览相关文件

2、使用步骤

  • 在  static  文件夹下新建  pdf  文件夹，将解压文件放进  pdf  文件夹下（看网上很多博主把文件夹放在根目录里，我反正之前试到最后始终无法打开预览请求的PDF文件！  避坑  ：放在  static 文件夹下就没问题了）
  • 如图所示：

tool.js写打开pdf方法

//PDF文件预览-Android（IOS直接打开）
	openPDF : (filePath) => {
		//检查终端
		uni.getSystemInfo({
			success: function(e) {
				//如果是安卓用第三方
				if (e.platform == 'android' || e.platform == 'windows') {
					//filepath带参数的 所以用缓存带过去
					uni.setStorageSync('openPDF_filePath', filePath)
					uni.navigateTo({
						url: `/pages/openPDF/index`
					})
				} else {
					//ios直接打开pdf
					uni.showLoading({
						title: '文档打开中...',
						mask: true
					})
					uni.downloadFile({
						url: filePath,
						complete: (res) => {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: function(e) {
									uni.hideLoading()
									console.log('打开文档成功');
								}
							});
	
						}
					});
				}
			}
		})
	},

页面/pages/openPDF/index

<template>
	<view style="width: 100%;" >
		<web-view  :src="webViewUrl"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			webViewUrl: '',
		}
	},
	methods : {
	},
	onLoad(options) {
		//https://www.sichewang.com/62a00a5e11c381654655582.pdf
		let path = uni.getStorageSync('openPDF_filePath')
		let fileUrl = encodeURIComponent(path)
		this.webViewUrl = `/static/openPDF/html/web/viewer.html?file=${fileUrl}`
	}
}
</script>

<style>
</style>

main.js全局引入tool.js

import tool from '@/utils/tool'


Vue.prototype.$tool = tool

使用

if (this.fjClickObj.file_name.includes('pdf')) {
					let url = this.$Api.url + '/get_uploads?sys=602&url=' + this.fjClickObj.url;
					console.log(url)
					this.$tool.openPDF(url)
				}

二、word、excle 预览

if (this.fjClickObj.file_name.includes('doc') || this.fjClickObj.file_name.includes('xls')) {
					let that = this
					let url = this.$Api.url + '/get_uploads?sys=602&url=' + this.fjClickObj.url;
					console.log(url)
					uni.downloadFile({
						url: url,
						success: function(res) {
							let filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);
							console.log(filepathss)
							setTimeout(
								() =>
								uni.openDocument({
									filePath: filepathss,
									showMenu: false,
									success: function() {
										console.log("打开文档成功");
									},
									fail: function() {
										uni.showToast({
											title: '暂不支持此类型',
											duration: 2000,
											icon: "none",
										});
									}
								}),
								1000
							);
						},
						fail: function(res) {
							console.log(res); //失败
						}
					});
				}

三、图片预览

1、简单预览

uni.previewImage({
						current: index,
						urls: urls,
						success: function(e) {
							console.log('预览成功');
						}
					})

2、预览加长按保存

//图片预览
	previewImage : (urls, current = 0) => {
		uni.previewImage({
			current: current,
			urls: urls,
			longPressActions: {
				itemList: ['保存图片'],
				success: function(data) {
					var url = urls[data.index]
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 先下载图片
					uni.downloadFile({
					    url,
					    success: (res) => {
					        // 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
					        uni.saveImageToPhotosAlbum({
					            filePath: res.tempFilePath,
					            success: () => {
									uni.showToast({ title: "保存成功！" , icon:'none'});
					            },
					            fail: () => {
									uni.showToast({ title: "保存失败", icon : 'none' });
					            },
					        });
					    },
					});
				}
			}
		});
	},

四、附件上传（图片、PDF、word、excle）

uploadImg(eleName, index) {
				var vue = this;
				uni.getSystemInfo({
					success: function(e) {
						vue.deviceType = e.platform
					}
				})
				let device = this.deviceType.toLowerCase() == ('ios' || 'macos') ? 'ios' : 'android'
				console.log(device)
				if (device == 'android') {
					uni.showActionSheet({
						itemList: ['选择图片', '选择文件'],
						success: (res) => {
							console.log(res)
							if (res.tapIndex == 0) {
								// 从相册中选
								vue.$store.commit('setIsHideByChooseFile', true)
								uni.chooseImage({
									count: 9,
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['album'], //从相册选择
									success: (image) => {
										console.log(image)
										var temp = ''
										if (image.tempFiles && image.tempFiles.length > 0) {
											image.tempFiles.forEach(item6 => {
												// #ifdef H5
												temp = item6.name
												// #endif

												// #ifdef APP-PLUS
												temp = item6.path.substring(item6.path
													.lastIndexOf('/') + 1, item6.path
													.length)
												// #endif

												//H5
												console.log(temp)

												//获取扩展名
												var nameKZ = temp.substring(temp
													.lastIndexOf(".") + 1, temp.length);
												console.log(nameKZ);

												if (nameKZ.includes('doc') || nameKZ
													.includes('xls') || nameKZ.includes(
														'pdf') || nameKZ.includes('png') ||
													nameKZ.includes('jpg') || nameKZ
													.includes('jpeg') || nameKZ.includes(
														'bmp')) {} else {
													uni.showToast({
														title: '附件只能上传图片、pdf、word、excel',
														icon: 'none'
													});
													return
												}

												let tempUrl = ''
												let tempName = ''
												//逐个上传   单张图片上传
												uni.showLoading({
													title: '附件上传中...'
												});
												this.$Api.uploadFile([item6.path], 390000,
													res => {
														console.log(res)
														tempUrl = this.$Api.url +
															'/get_uploads?sys=602&url=' +
															res[0].file_path
														tempName = res[0].file_name
														console.log(tempUrl)

														let data = {
															url: tempUrl,
															file_url: res[0].file_path,
															file_name: tempName,
															file_size: (item6
																	.size / 1024)
																.toFixed(1) + 'kb',
															file_ext: temp
																.substring(temp
																	.lastIndexOf(
																		'.') + 1,
																	temp.length)
														}

														this.arrs_otherProfile.push(
															data)
														console.log(this
															.arrs_otherProfile)
														this.$forceUpdate()
														uni.hideLoading();
													}, e => {
														uni.hideLoading();
													})
											})
										}
									}
								});
							} else if (res.tapIndex == 1) {
								var _this = this
								// 选择文件
								vue.$store.commit('setIsHideByChooseFile', true)
								chooseFile(url => {
									console.log(url)
									// /storage/emulated/0/DCIM/Screenshots/IMG_20221105_151817.jpg
									//获取扩展名
									var nameKZ = url.substring(url.lastIndexOf(".") +
										1, url.length);
									console.log(nameKZ);
									if (nameKZ.includes('doc') || nameKZ.includes(
											'xls') || nameKZ.includes('pdf') || nameKZ
										.includes('png') || nameKZ.includes('jpg') ||
										nameKZ.includes('jpeg') || nameKZ.includes(
											'bmp')) {
									} else {
										uni.showToast({
											title: '附件只能上传图片、pdf、word、excel',
											icon: 'none'
										});
										return
									}
									//获取文件名
									var name = url.substring(url.lastIndexOf("/") + 1,
										url.length);
									console.log(name);
									uni.showLoading({
										title: '附件上传中...'
									});
									_this.$Api.uploadFile([url], 390000, res => {
										console.log(res)
										let file_path = _this.$Api.url +
											'/get_uploads?sys=602&url=' + res[
												0].file_path
										let data = {
											url: file_path,
											file_url: res[0].file_path,
											file_name: name,
											file_ext: name.substring(name
												.lastIndexOf('.') + 1,
												name.length)
										}
										_this.arrs_otherProfile.push(data)
										console.log(_this.arrs_otherProfile)
										uni.hideLoading();
									}, e => {
										console.log(e)
										uni.hideLoading();
									})
								})
							}
						}
					})
				} else if (device == 'ios') {
					vue.$store.commit('setIsHideByChooseFile', true)
					// 从相册中选
					uni.chooseImage({
						count: 9,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (image) => {
							console.log(image)
							var temp = ''
							if (image.tempFiles && image.tempFiles.length > 0) {
								image.tempFiles.forEach(item6 => {
									// #ifdef H5
									temp = item6.name
									// #endif

									// #ifdef APP-PLUS
									temp = item6.path.substring(item6.path.lastIndexOf('/') + 1, item6
										.path.length)
									// #endif

									//H5
									console.log(temp)

									//获取扩展名
									var nameKZ = temp.substring(temp.lastIndexOf(".") + 1, temp
									.length);
									console.log(nameKZ);

									if (nameKZ.includes('doc') || nameKZ.includes('xls') || nameKZ
										.includes('pdf') || nameKZ.includes('png') || nameKZ.includes(
											'jpg') || nameKZ.includes('jpeg') || nameKZ.includes('bmp')|| 
											nameKZ.includes('BMP') || nameKZ.includes('JPEG') ||nameKZ.includes('JPG') ||nameKZ.includes('PNG')
										) {} else {
										uni.showToast({
											title: '附件只能上传图片、pdf、word、excel',
											icon: 'none'
										});
										return
									}

									let tempUrl = ''
									let tempName = ''
									//逐个上传   单张图片上传
									uni.showLoading({
										title: '附件上传中...'
									});
									this.$Api.uploadFile([item6.path], 390000, res => {
										console.log(res)
										tempUrl = this.$Api.url + '/get_uploads?sys=602&url=' +
											res[0].file_path
										tempName = res[0].file_name
										console.log(tempUrl)

										let data = {
											url: tempUrl,
											file_url: res[0].file_path,
											file_name: tempName,
											file_size: (item6.size / 1024).toFixed(1) +
												'kb',
											file_ext: temp.substring(temp.lastIndexOf(
												'.') + 1, temp.length)
										}

										this.arrs_otherProfile.push(data)
										console.log(this.arrs_otherProfile)
										this.$forceUpdate()
										uni.hideLoading();
									}, e => {
										// errorBack && errorBack(e)
										uni.hideLoading();
									})
								})
							}
						}
					});
				}
			},

Androd 选择附件的文件

var chooseFile = function(callback, acceptType) {
    
    var CODE_REQUEST = 1000;
    var main = plus.android.runtimeMainActivity();
    if(plus.os.name == 'Android') {
        console.log("666");
        var Intent = plus.android.importClass('android.content.Intent');
        var intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        if(acceptType) {
            intent.setType(acceptType);
        } else {
            intent.setType("*/*");
        }
        main.onActivityResult = (requestCode, resultCode, data)=>{
			console.log(data)
            if(requestCode == CODE_REQUEST) {
                const uri = data.getData();
				
                plus.android.importClass(uri);
                const Build = plus.android.importClass('android.os.Build');
                const isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
				console.log(Build.VERSION.SDK_INT)
				console.log(Build.VERSION_CODES.KITKAT)
                const DocumentsContract = plus.android.importClass('android.provider.DocumentsContract');
				console.log(uri.getScheme())
                if(isKitKat && DocumentsContract.isDocumentUri(main, uri)) {
					console.log(uri.getAuthority())
                    if("com.android.externalstorage.documents" == uri.getAuthority()) {
                        console.log("6666");
                        var docId = DocumentsContract.getDocumentId(uri);
                        var split = docId.split(":");
                        var type = split[0];
                        console.log(type);
                        if("primary" == type) {
                            var Environment = plus.android.importClass('android.os.Environment');
							console.log(Environment.getExternalStorageDirectory() + "/" + split[1]);
                            callback(Environment.getExternalStorageDirectory() + "/" + split[1]);
                        } else {
                            var System = plus.android.importClass('java.lang.System');
                            var sdPath = System.getenv("SECONDARY_STORAGE");
							console.log(sdPath)
                            if(sdPath) {
                                callback(sdPath + "/" + split[1]);
                            }
                        }
                    }
                    else if("com.android.providers.downloads.documents" == uri.getAuthority()) {
						console.log("7777");
                        var id = DocumentsContract.getDocumentId(uri);
                        var ContentUris = plus.android.importClass('android.content.ContentUris');
                        var contentUri = ContentUris.withAppendedId(
                        Uri.parse("content://downloads/public_downloads"), id);
                        callback(getDataColumn(main, contentUri, null, null));
                    }
                    else if("com.android.providers.media.documents" == uri.getAuthority()) {
						console.log("8888");
                        var docId = DocumentsContract.getDocumentId(uri);
                        var split = docId.split(":");
                        console.log(split);
                        var type = split[0];
                        console.log(type);
                        var MediaStore = plus.android.importClass('android.provider.MediaStore');
                        if("image" == type) {
                            contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
                        } else if("video" == type) {
                            contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
                        } else if("audio" == type) {
                            contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
                        }else{
                             contentUri = MediaStore.Files.getContentUri("external");
                        }
 
                        console.log(contentUri);
                        var selection = "_id=?";
                        var selectionArgs = new Array();
                        selectionArgs[0] = split[1];
 
                        callback(getDataColumn(main, contentUri, selection, selectionArgs));
                    }
                }
 
                else if("content" == uri.getScheme()) {
					console.log("9999");
					console.log("9999",main);
					console.log("9999",uri);
                    callback(getDataColumn(main, uri, null, null));
                }
                else if("file" == uri.getScheme()) {
					console.log("0000");
					console.log(uri.getPath());
                    callback(uri.getPath());
                }
            }
        }
        main.startActivityForResult(intent, CODE_REQUEST);
    }
}
 
function getDataColumn(main, uri, selection, selectionArgs) {
        plus.android.importClass(main.getContentResolver());
        let cursor = main.getContentResolver().query(uri, ['_data'], selection, selectionArgs,
        null);
        plus.android.importClass(cursor);
        if(cursor != null && cursor.moveToFirst()) {
        var column_index = cursor.getColumnIndexOrThrow('_data');
        var result = cursor.getString(column_index);
		console.log(result);
        cursor.close();
        return result;
        }
        return null;
}
export default chooseFile

 附送250套精选项目源码

源码截图

源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

梦之归途
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java web在线预览pdf、word、excel
11-15
使用maven构建工具。前端使用pdf插件。后台搭建的springmvc框架，主要用于web在线预览pdf、word、excel文件。不需要安装office等其他插件
uniapp 微信小程序预览excle、pdf、word等文件（支持微信内转发）
cmmboy1990的博客
01-27 2655
1.代码 previewFile() { uni.showLoading({ title: '加载中' }) uni.downloadFile({ url: "https://...../gwy.xls", //后端返回的文件地址 filePath: wx.env.USER_DATA_PATH + '/gwy.xls', // filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.' +
uniapp开发H5，实现H5上传文件（PDF），并可以预览下载删除
JPQLGZPW的博客
02-29 786
总共需要用到四个API，
微信小程序预览 word、excel、ppt、pdf 等文件
热门推荐
RealizeInnerSelf丶
08-30 1万+
目录微信小程序预览 word、excel、ppt、pdf 等文件预览效果前言注意点实现代码微信小程序预览 word、excel、ppt、pdf 等文件 预览效果 前言 微信官方提供了相关的 API 来预览常见文件，目前支持如下格式的文件 总结一下就是先用 wx.downloadFile API 把文件下载下来，再用 wx.openDocument API 把它打开 wx.downloadFi...
uniapp实现小程序预览、保存、转发pdf/word/excel等文件
weixin_49256908的博客
01-21 7169
用到uni.downloadFile结合uni.openDocument实现功能，无需uni.saveFile也能实现下载文件到本地 以上面的word文档为例，点击调用uni.downloadFile拿到指定文件下载后存储的路径 (本地路径)filePath，然后在调用uni.openDocument，设置showMenu属性为true，该属性是开启右上角是否有可以转发分享的功能，然后加上filePath属性，地址就是uni.downloadFile的filePath，此时点击右上角的三个点就可以转发保存
uniapp H5预览excle、pdf、word等文件
cmmboy1990的博客
01-27 7193
1.代码 previewFile() { uni.showLoading({ title: '加载中' }) uni.downloadFile({ url: "https://..../gwy.xls", //后端返回的文件地址 // filePath: wx.env.USER_DATA_PATH + '/gwy.xls', // filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.'
pdf转word、pdf转excle、word转pdf、excel转pdf、pdf拆分软件（python）内含源码！
04-02
此软件可以完成pdf转word、pdf转excle、word转pdf、excel转pdf、pdf拆分，由python编写，内含源码！
SaveAsPDFandXPS.exe office pdf转换插件-word、excle、ppt另存为PDF转换软件
10-08
office pdf转换插件，用于安装到office软件中使word、excle、ppt可以一键另存问PDF文档格式，方便迅速，widows系统适用.
PDF转换图片、word、Excel
09-21
PDF转换软件
C#模仿百度文库实现附件在线预览
09-17
利用微软com组件，对上传附件进行在线预览（ppt，word，excle，txt，PNG，pdf....常用格式），下载代码运行即可。（vs2010. com组件版本：12.0.0.0.0）
UniApp 项目中的生命周期详解：从诞生到逝去
weixin_47238919的博客
04-22 562
通过本文的介绍，相信你对 UniApp 中的生命周期有了更加深入的理解。合理利用生命周期钩子函数可以更好地管理应用程序的状态和行为，从而提升应用的用户体验和开发效率。
uniapp 页面滚动到指定位置的方法
--=
04-23 379
uniapp 页面滚动到指定位置的方法
从零开始：UniApp 项目搭建指南
weixin_47238919的博客
04-22 510
通过本文的指南，相信你已经对如何搭建一个 UniApp 项目有了更加清晰的认识。UniApp 的跨平台特性为移动应用开发带来了全新的可能性，希望你能够在未来的项目中充分发挥其优势，创造出更加优秀的应用作品。
uniapp实现相册、拍照及视频录制功能
最新发布
qq_40063198的博客
04-25 399
uniapp实现相册、拍照及视频录制功能
使用uni-app开发app时遇到mqtt.js不可用的问题
Alan_Walker688的博客
04-24 948
使用uni-app开发app时遇到mqtt.js不可用的问题踩坑与记录。
uniapp 阿里云点播 视频播放
shelter123456的博客
04-25 396
以下是uniapp 阿里云点播（加密）**
uniapp制作安卓原生插件踩坑
qq_28844947的博客
04-25 543
uniapp制作安卓原生插件踩坑记录
uniApp设置和清除定时器
yy_demo的博客
04-22 404
在onHide或者是onUnload中销毁定时器，一般来说tabbar页面的切换会触发onHide，其他是onUnload，当然这也不是一定的，不确定的话可以先在这两个生命周期中console.log。首先是在data中定义一个变量，用来存放定时器。在适当的地方创建定时器。
Android 将excle转化为PDF
05-26
可以使用 Java Excel API 和 iText 库来实现将 Excel 转换为 PDF 的功能。以下是一些示例代码，可以帮助你开始： 1. 添加依赖项 在 build.gradle 文件中添加以下依赖项： ``` dependencies { implementation 'net.sourceforge.jexcelapi:jxl:2.6.12' implementation 'com.itextpdf:itextpdf:5.5.13.2' } ``` 2. 读取 Excel 文件 使用 JExcel API 读取 Excel 文件，并将其保存到内存中。以下是一个示例代码： ```java Workbook workbook = Workbook.getWorkbook(new File("path/to/excel.xls")); Sheet sheet = workbook.getSheet(0); ``` 3. 创建 PDF 文档 使用 iText 库创建 PDF 文档，并将 Excel 数据写入 PDF 中。以下是一个示例代码： ```java Document document = new Document(); PdfWriter.getInstance(document, new FileOutputStream("path/to/pdf.pdf")); document.open(); // 添加表格 PdfPTable table = new PdfPTable(sheet.getColumns()); for (int row = 0; row < sheet.getRows(); row++) { for (int col = 0; col < sheet.getColumns(); col++) { table.addCell(sheet.getCell(col, row).getContents()); } } document.add(table); document.close(); ``` 以上就是将 Excel 转换为 PDF 的基本步骤。你可以根据自己的需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦之归途

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值