uniapp PDF 预览和下载

创建 index.vue

<template>
	<view>
		
		<view class="box">
		
			<view class="item" >
				<view class="title">
					<span></span>
					<text>文件</text>
				</view>
				<view class="list" v-for="(item,index) in pdfList" :key="index">
					<view class="l">
						<view class="icon">
							<image src="@/static/PDF.png" mode=""></image>
						</view>
						<view class="name">
							{{info.assembly_file_name}}({{index+1}})
						</view>
					</view>
					<view class="btn">
						<view class="yl" @click="clickYl(item)">
							预览
						</view>
						<view class="xz" @click="clickXz(item,info.assembly_file_name)">
							下载
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		infoApi
	} from "@/api/index.js"

	export default {
		data() {
			return {
				pdfList: [],
				info: {},

			}
		},

		onLoad() {
			
		},

		methods: {
			
			
			clickYl(url) {
				let _this = this
				uni.showLoading({
					title: '加载中...'
				})

				uni.downloadFile({
					//需要预览的文件地址
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							//下载成功，得到文件临时地址
							console.log('下载成功', res.tempFilePath);
							//条件编译，若为h5端则直接赋值文件地址			
							// #ifdef H5
							let newUrl = res.tempFilePath
							// #endif

							//条件编译，若为App端，则需要将本地文件系统URL转换为平台绝对路径	
							// #ifdef APP-PLUS
							let newUrl = plus.io.convertLocalFileSystemURL(res.tempFilePath)
							// #endif
							uni.navigateTo({
								url: '/pages/index/pdf?url=' + newUrl
							})
						} else {
							uni.showToast({
								title: '预览失败',
								icon: "none"
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '预览失败',
							icon: "none"
						})
					}
				})


			},
			clickXz(fileUrl, attachmentName) {
				uni.downloadFile({
					//需要预览的文件地址
					url: fileUrl,

					success: (res) => {
						if (res.statusCode === 200) {
							uni.hideLoading();
							//下载成功，得到文件临时地址
							console.log('下载成功', res.tempFilePath);
							let newUrl = res.tempFilePath
							// 创建一个临时的 <a> 元素用于下载
							const link = document.createElement('a');
							link.href = newUrl;
							link.setAttribute('download', attachmentName);
							document.body.appendChild(link);
							link.click();
							document.body.removeChild(link);
							URL.revokeObjectURL(link.href);
							uni.showToast({
								title: '下载成功',
								icon: 'none',
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: 'none',
							})
						}

					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							title: '下载异常',
							icon: 'none',
						})
					}
				});


			},

		

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #F6F7FB;
	}

	.bgc {
		width: 100%;
		height: 88rpx;
		position: relative;
		background: linear-gradient(109deg, #E8F5F7, #fde1c4 100%);


	}

	.box {
		margin: 32rpx;

		.item {
			padding: 32rpx;
			margin-bottom: 48rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background-color: #fff;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				span {
					display: inline-block;
					width: 8rpx;
					height: 32rpx;
					background: #f98518;
					border-radius: 4rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang HK, PingFang HK-500;
					font-weight: 500;
					text-align: LEFT;
					color: #333333;
					line-height: 32rpx;
					margin-left: 16rpx;
				}
			}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;

				.l {
					display: flex;
					align-items: center;
					flex: 1;

					.icon {
						width: 56rpx;
						height: 68rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}




					.name {
						width: 75%;
						font-size: 28rpx;
						font-family: PingFang HK, PingFang HK-400;
						font-weight: 400;
						text-align: LEFT;
						color: #333333;
						margin-left: 22rpx;
					}


				}

				.btn {
					display: flex;

					.yl,
					.xz {
						font-size: 24rpx;
						font-family: PingFang HK, PingFang HK-400;
						font-weight: 400;
						text-align: LEFT;
						color: #f98518;
					}

					.yl {
						margin-right: 32rpx;
					}
				}
			}

			.lists {

				.items {
					width: 100%;
					background: #ffffff;
					border-radius: 24rpx;
					box-sizing: border-box;
					margin-bottom: 32rpx;

					.name {
						font-size: 24rpx;
						font-family: PingFang HK, PingFang HK-500;
						font-weight: 400;
						text-align: LEFT;
						color: #333333;
						width: 100%;
						margin-bottom: 12rpx;

					}


				}
			}
		}

	}
</style>

2：创建PDF.vue

<template>
	<view>
	
		<web-view :src="pdfUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pdfUrl:'',
				from:''
			}
		},
		onLoad({url}) {
			/**
			 * 浏览情景
			 */
			// 浏览情景1:浏览本地的pdf文件
			// this.pdfUrl = '/hybrid/html/web/viewer.html?file=https://beoka-file.oss-cn-beijing.aliyuncs.com/beoka_oxy/img/1000001435995357.pdf'
			
			// 浏览情景2:浏览在线的pdf文件
			this.pdfUrl = '/static/hybrid/html/web/viewer.html?file='+encodeURIComponent(url)
		},
		
	}
</script>

<style>

</style>