uniapp使用H5实现预览pdf文件

下载后把压缩包解压到自己的项目的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,注释该代码块

解决如下:

相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106326 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
Light606 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度
linux·pdf·可观测性·异步队列·plt转pdf·权限治理·进度查询
ftswsfb6 小时前
PDF文件基础-计算机字体
pdf
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~8 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱9 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.9 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios