uniapp使用H5实现预览pdf文件

最新推荐文章于 2025-06-25 20:33:40 发布

m0_52611940

最新推荐文章于 2025-06-25 20:33:40 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app pdf javascript

本文链接：https://blog.csdn.net/m0_52611940/article/details/132736273

本文介绍了如何在Vue项目中使用web-view预览PDF文件，包括处理解压后的文件路径，解决乱码和跨域问题的方法，以及针对PDF.js版本更新导致的问题给出的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
下载后把压缩包解压到自己的项目的static文件夹下的pdf文件下，如图

新建一个文件名为filePreview.vue

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

<script>
	export default {
		data() {
			return {
				viewerUrl:'../../static/pdf/web/viewer.html',
				allUrl: '.'
			}
		},
		onLoad(options) {
			this.allUrl = `${this.viewerUrl}?file=${options.url}`;
			// this.allUrl = this.viewerUrl + '?file=' + options.url
		}
	}
</script>

在下载文件事件

<view @click=”getContractPdf“>下载文件</view>

			getContractPdf() {
				exportContractPdf({
					id: this.id
				}).then(res => {
					this.url = res.data
					uni.navigateTo({
						url: '/pages/index/filePreview?url=' + this.url
					})
				})
			},

1.如果预览文件是乱码情况或者在pc上报ocale.properties的请求返回404
解决：就是pdfjs下载版本有问题，下载以前的老版本

2.如果出现跨域问题直接修改源代码在viewer.js中，也可以全局搜素file origin does not match viewer,注释该代码块
解决如下：
在这里插入图片描述