uniapp 使用pdfjs完成预览效果【超简单详细】

我也是琢磨好久，看了一些博主的文章自己弄出的的，总之踩的坑挺多

首先我们要知道pc和移动端是不同的，pc可以直接查看，移动端的话你用哪些标签嵌套访问都是会跳转到浏览器提示你下载的，不能预览。

我在这里给大家总结了一些怎么去在移动端直接预览，这里我们要用到一个插件pdfjs

大家可以去官网下载也可以到这里下载

pdfjs插件【pdf预览】-Javascript文档类资源-CSDN下载

先给大家看下效果图

下载好之后直接放到static目录下

然后你就可以在你需要预览的页面上开始预览pdf

 

<template>
	<view class="content">
		 <iframe
		      width="100%"
		      height="500"
		      scrolling="no"
		      :src="url"
		    ></iframe>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				viewerUrl: '/static/html/web/viewer.html',
				fileUrl: 'pdf访问路径',
			};
		},
		onLoad() {
		this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
		console.log(this.url)
		console.log('4445')
		},
		created() {
			 
		},
		methods: {}
	};
</script>

<style>
</style>

很简单欢迎大家交流。。。。。。。。。。