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

解决如下:

相关推荐
艾小码7 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
赵庆明老师6 小时前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
雪芽蓝域zzs6 小时前
uniapp AES 加密解密
开发语言·uni-app·c#
我是高手高手高高手6 小时前
uni-app x 左右滑动效果
uni-app
灵感__idea8 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel8 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
_小许_8 小时前
Go语言实现HTML转PDF
golang·pdf·html
苏打水com11 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld11 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
嫂子的姐夫12 小时前
11-py调用js
javascript·爬虫·python·网络爬虫·爬山算法