uniapp app端在线预览pdf

前言

uniapp中的在线预览pdf，而不是采用官方下载pdf文件，然后用手机的第三方软件进行预览，本文章主要说的再没有内置预览pdf工具的同事如何在线预览pdf

提示：以下是本篇文章正文内容，下面案例可供参考

一、uniapp app端在线预览pdf

uniapp中的在线预览pdf，而不是采用官方下载pdf文件，然后用手机的第三方软件进行预览，本文章主要说的再没有内置预览pdf工具的同事如何在线预览pdf

二、使用步骤

1.引入库

将pdfjs-dist@2.4.456下载下来，存放在static目录下

2.点击跳转页面采用web-view预览

代码如下（示例）：

<template>
	<view>
		<web-view :src="link"></web-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	
	let link = ref("");
	onLoad((options) => {
		if (options.link) {
			console.log("options.link=====",options.link)
			link.value = "/static/pdf/web/viewer.html?file="+encodeURIComponent(options.link);
		}
	})
</script>

<style>
</style>

运行的过程中如果出现跨域问题，在viewer.mjs文件中搜索file origin does not match viewer，找到后将判断注释（允许PDF.js跨域），需按照如下方式处理：

踩坑

希望我踩的坑能帮助到你，亲测有效