uniapp小程序预览文件，文档的实现方式

 

 

				<view class="activity_enclosure" v-if="activityData.attachmentTemplateList.length > 0">
					<view class="top_box">
						<view class="top_box_circle">
							<view class="min_circle_1"></view>
							<view class="min_circle_2"></view>
						</view>
						<view class="top_box_text">附件</view>
					</view>
					<view class="bottom_box">
						<view class="enclosure_box" v-if="activityData.attachmentTemplateList.length > 0">
							<view class="enclosure_item" v-for="(item, index) in activityData.attachmentTemplateList" :key="index">
								<text>{{ index + 1 }}、</text>
								<text>{{ item.title }}</text>
								<text class="remarks_content" v-if="item.required">（必须填写并上传）</text>
								<text>:</text>
								<view class="preview_box" @click="previewFile1(item)">点击预览</view>
								<!-- <view class="preview_box" v-else @click="previewFile(item)">不可预览</view> -->
							</view>
							<!-- item.template 这是预览的文件 -->
						</view>
						<view v-else class="no_enclosure_box">暂无信息</view>
					</view>
				</view>

js实现逻辑：

		

// 预览图片和文件成功
		previewFile1(item) {
			// 流程步骤: 利用下载文件功能 先生成临时文件 - 调用api打开临时文件里面的内容,从而生成预览的效果,但是这个未能真实的下载到本地
			// 1.pdfUrl  可以直接在浏览器打开  2.一定要在小程序后台配置该pdf的域名 让其可以下载
			uni.showLoading({
				title: '正在打开...'
			});
			uni.hideLoading();
			const downloadTask = uni.downloadFile({
				url: this.$url(item.template),  // 图片或者文件地址
				success: function(res) {
					console.log('下载的res', res);
					var filePath = res.tempFilePath;  // 临时文件存储路径
					//  文件打开文件预览
					uni.openDocument({
						filePath: encodeURI(filePath),
						// fileType: 'pdf',
						success: function(res) {
							console.log('打开文档成功');
						},
						fail: function(err) {
							uni.hideLoading();
							uni.showToast({
								title: '打开失败',
								duration: 1500,
								icon: 'none'
							});
							console.log('打开失败');
						}
					});
				},
				fail: function(err) {
					console.log('下载失败原因', err);
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {},
									fail(res) {
										console.log(res);
									}
								});
							}
						}
					});
				}
			});
			// downloadTask.onProgressUpdate(res => {
			// 	console.log('下载进度' + res.progress);
			// 	// console.log('已经下载的数据长度' + res.totalBytesWritten);
			// 	// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
			// });
			console.log(item, this.$url(item.template), '加载的当前文件');
			// this.$apiGet(`/api/file/download/${item.template}`).then(res => {
			// 	console.log(res, '下载的文件');
			// });
		},

less的css样式代码

		// 附件
		.activity_enclosure {
			margin-top: 60rpx;
			.top_box {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 18rpx;
				.top_box_circle {
					margin-right: 22rpx;
					width: 32rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.min_circle_1 {
						width: 16rpx;
						height: 16rpx;
						background: rgba(218, 0, 23, 0.7);
						border-radius: 50%;
						margin-right: -6rpx;
					}
					.min_circle_2 {
						width: 16rpx;
						height: 16rpx;
						background: rgba(1, 68, 151, 0.7);
						border-radius: 50%;
					}
				}
				.top_box_text {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
			.bottom_box {
				.enclosure_box {
					.enclosure_item {
						margin-bottom: 20rpx;
						.remarks_content {
							color: #999999;
						}
						.preview_box {
							display: inline-block;
							width: 140rpx;
							height: 40rpx;
							padding: 0rpx 14rpx;
							background: #e5ecf4;
							color: #014497;
							border-radius: 8rpx;
							margin-left: 12rpx;
						}
					}
				}
				.no_enclosure_box {
					width: 690rpx;
					// height: 48rpx;
					// line-height: 48rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
			}
		}

只能在手机上才能预览，写了后用手机扫码预览，可以成功预览，直接在开发工具上是不能预览的