uniapp使用pdf.js在线查看附件

效果图

 

pdf.js下载地址：官网下载地址

下载之后

第一步
将文件放在static文件下，之前我按其他的教程放在pages同级下打开是我的页面首页

 第二步

我用的iframe

<iframe style="width: 100%;height: 100%;" scrolling="no" frameborder="0" id="dtdt-map" class="dtdt-map" :src="pdfpath"></iframe>

//我的path是后端返回的文件地址
var pdfpath = path.substring(0, index + 1) + "pdf";

//如果带参数，带数字还是用js解码一下,/static/hybrid/html/web/viewer.html为存放的pdf.js路径
pdfpath = `/static/hybrid/html/web/viewer.html?file=` + encodeURIComponent(pdfpath)

 第三步
修改源代码

1 pdf.js是不支持跨域文件加载的 ，会报 “file origin doesnot match viewer”错误。改一下源码。把下面图片上代码注释掉。

 我封装成了一个组件，完整代码

<file-view>组件部分

<template name="modal">
	<view class="">
		<!-- 页面附件展示 -->
		<view class="file">
			<view class=" " v-for="(item,index) in fjArra" :key="index" style="margin-top: 10upx;">
				<view style="min-width: 205upx;">
					<view class="" style="color: #3F8EF7;" @click="handlePictureCardPreview(item.url,item.name)">
						{{index+1}}. {{item.name}}
					</view>
				</view>
			</view>
		</view>

		<!-- pdf查看弹框 -->
		<view class="modalInputBg" v-show="modalData.showModal" @tap="modalData.showModal = false">
			<view class="modalInput">
				<view class="modalDiv">
					<view class="title">
						<iframe style="width: 100%;height: 100%;" scrolling="no" frameborder="0" id="dtdt-map"
							class="dtdt-map" :src="modalData.url"></iframe>
					</view>
					<view class="bottom">
						<view class="bottomCancel" @tap.stop="modalData.showModal = false">关闭</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			// 接收附件数据，格式为[{name:'xxx',url:'xxx'}]
			fjArra: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				modalData: {
					showModal: false,
					title: '标题名称',
					url: '',
					pic: '',
				},
				originalUrl:''
			}
		},

		methods: {
			onModalShow() {
				this.modalData.showModal = true
			},
			downFile() {
				window.location.href = this.originalUrl
			},
			handlePictureCardPreview(path) {
				this.modalData.pic = ''
				this.modalData.url = ''
				this.originalUrl= ''
				var index = path.lastIndexOf('.')
				var type = path.substring(index + 1, path.length).toUpperCase()
				console.log(type,'type');
				if (type == 'PNG' || type == 'JPG' || type == 'JPEG' || type == 'BMP' || type == 'GIF' ||
					type == 'WEBP' || type == 'PSD' || type == 'SVG' || type == 'TIFF') {
					this.modalData.pic = path
					// 如果是图片类型就直接查看
					uni.previewImage({
						current: this.modalData.pic,
						urls: [this.modalData.pic]
					})
				} else if (type == 'DOCX' || type == 'DOC' || type == 'TXT' || type == 'XLS' || type == 'XLSX' ||
					type == 'PPT' || type == 'PPTX' || type == 'PDF') {
					var pdfpath = path.substring(0, index + 1) + "pdf";
					pdfpath = `/static/hybrid/html/web/viewer.html?file=` + encodeURIComponent(pdfpath)
					this.modalData.url = pdfpath
					this.onModalShow()
				} else {
			         // 如果是其他类型文件就直接下载				
				    this.originalUrl = path.replace("/file-server/file/download", "/file-server/file/getFile");
					this.downFile()
				}
			},
			onDefine() {
				this.modalData.showModal = false
			},
		}
	}
</script>
<style>
	.modalInputBg {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .2);
	}

	.modalInput {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modalDiv {
		width: 90%;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.modalInput .modalDiv .title {
		text-align: center;
		/* padding: 48rpx 0 0 0; */
		letter-spacing: 2rpx;
		font-size: 44rpx;
		height: 80vh;
	}

	.modalInput .modalDiv .body {
		width: 86%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 72rpx auto;
		border: 2rpx solid #DCDEE0;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
		padding: 0 3%;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.modalInput .modalDiv .body input {
		height: 100%;
	}

	.modalInput .modalDiv .bottom {
		display: flex;
		align-items: center;
		height: 88rpx;
		border-top: 2rpx solid #DCDEE0;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
	}

	.modalInput .modalDiv .bottom view {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		height: 100%;
		line-height: 88rpx;
	}

	.modalInput .modalDiv .bottom .bottomCancel {
		border-right: 2rpx solid #DCDEE0;
	}

	.modalInput .modalDiv .bottom .bottomDefine {
		color: #3F83F7;
	}

	.file {
		margin: 0upx 40upx 30upx;
		border-bottom: 2upx solid #eee;
	}
</style>

使用：

<u--text slot="title" type="info" text="附件:"></u--text>
<file-view :fjArra='fjArra'></file-view>


    this.fjArra = []
	if (this.notication.files) {
		this.notication.files.split(',').forEach((item) => {
			if (item.trim().length > 0) {
				this.fjArra.push({
					name: decodeURIComponent(item.substring(item.lastIndexOf(
							'=') +
						     1)),
						url: item
					})
				}
			})
	 	 } else {
	   this.fjArra = []
     }