创建 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 = thisuni.showLoading({title: '加载中...'})uni.downloadFile({//需要预览的文件地址url: url,success: (res) => {if (res.statusCode === 200) {//下载成功，得到文件临时地址console.log('下载成功', res.tempFilePath);//条件编译，若为h5端则直接赋值文件地址			// #ifdef H5let newUrl = res.tempFilePath// #endif//条件编译，若为App端，则需要将本地文件系统URL转换为平台绝对路径	// #ifdef APP-PLUSlet newUrl = plus.io.convertLocalFileSystemURL(res.tempFilePath)// #endifuni.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>