uniapp在线预览pdf文件

1、下载hybrid

这个可以网上自己找一下,很好找的一个包,并将包放在文件中,如下图:
在这里插入图片描述

2、自定义一个展示pdf的组件

<template>
	<view style="width: 100%;height: 95vh">
		<view class="">
			<web-view :src="pdfUrl"></web-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html', //引入hybrid包
				pdfUrl: ''
			};
		},
		onLoad(e) {
			const fileUrl = encodeURIComponent(decodeURIComponent(e.pdfUrl)) //将链接编码
			this.pdfUrl = this.viewerUrl + '?file=' + fileUrl
		}
	}
</script>

<style lang="scss">

</style>

组件可直接粘贴使用,备注较为清晰

通过父组件按钮点击跳转,并将pdf的链接传递给组件,解析后将可直接在线预览pdf;

文件仅供自己参考(学习笔记)!

Logo

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

更多推荐