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,注释该代码块

解决如下:

相关推荐
十八朵郁金香14 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
拉不动的猪24 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
家有两宝,感恩遇见39 分钟前
pdf文件上传下载记录
pdf
一滴水的眼泪1 小时前
读取实验室原始记录单PDF内容
pdf
南清的coding日记1 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
望风的懒蜗牛1 小时前
android studio开发UniComponent<SurfaceView>组件
android·uni-app·android studio
yoyoma1 小时前
object 、 map 、weakmap区别
前端·javascript
shyshi1 小时前
vercel 部署 node 服务和解决 vercel 不可访问的问题
前端·javascript
.生产的驴1 小时前
React 模块化Axios封装请求 统一响应格式 请求统一处理
前端·javascript·react.js·前端框架·json·ecmascript·html5
雾岛听风来1 小时前
Android开发中常用高效数据结构
前端·javascript·后端