1. 下载pdfjs

https://download.csdn.net/download/qq812457115/86339338

2. pdfjs解压后放到static里
在这里插入图片描述

3. 实现

<template>
	<view style="padding: 20px;">
		地址:<input type="text" v-model="pdfUrl" style="margin: 20px 0;">
		<view style="display: flex;justify-content: space-between;">
			<button @click="handleDownloadFile">下载</button>
			<button @click="getList">获取列表</button>
		</view>
		<view>
			<view v-for="item in pdfList" @click="previewPDF(item.filePath)" style="background:#2C405A;color: white;margin-top:20px;">PDF:{{item.filePath}}
			</view>
		</view>
		<web-view v-if="allUrl" :src="allUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allUrl: "",
				viewerUrl: '/static/pdfjs/web/viewer.html',
				pdfUrl: 'http://abcfile.vaiwan.com/profile/upload/2022/06/07/上会系统测试用_20220607200050A001/上会系统测试用/陈美娟同志考察材料.pdf',
				pdfList:[]
			}
		},
		methods: {
			/* 点击下载 */
			handleDownloadFile() {
				const downloadTask = uni.downloadFile({
					url: this.pdfUrl,
					success: ({
						statusCode,
						tempFilePath
					}) => {
						if (statusCode === 200) {
							uni.saveFile({
								tempFilePath,
								success: (res) => {
									this.getList()
								},
								fail: (e) => console.log('下载失败', e)
							})
						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			},
			/* 点击获取保存文件列表 */
			handleGetSaveFileList() {
				let that = this
				uni.getSavedFileList({
					success: function(res) {
						that.pdfList = res.fileList
						console.log(that.pdfList)
					}
				})
			},
			/* 预览PDF */
			previewPDF(url) {
				const path = plus.io.convertLocalFileSystemURL(url)
				let fileUrl = encodeURIComponent(path) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
				this.allUrl = this.viewerUrl + '?file=' + fileUrl
			}
		}
	}
</script>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐