Uniapp——安卓PDF下载并预览

一只漫步前行的羊

已于 2022-08-06 11:51:14 修改

阅读量840

点赞数 1

分类专栏： Uniapp 文章标签： javascript 前端 vue.js

于 2022-06-08 14:04:14 首次发布

本文链接：https://blog.csdn.net/qq812457115/article/details/125183260

版权

Uniapp 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

该博客介绍了如何在前端应用中实现PDF文件的下载和预览功能。通过下载并使用PDF.js库，将解压后的文件放入静态资源目录。用户可以输入PDF文件地址，点击下载按钮将文件保存到本地，然后通过获取本地文件列表展示预览选项。点击预览时，利用web-view组件加载PDF.js的viewer.html并传递文件路径实现预览。

摘要由CSDN通过智能技术生成

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>