uniapp H5预览PDF支持手势缩放、分页、添加水印、懒加载、PDF下载

效果预览

项目说明

uniapp + vue2

node：v14.18.3

npm： 6.14.15

安装pdfh5.js插件

pdfh5 - npm (npmjs.com)pdfh5.js 基于pdf.js和jQuery

pdfh5 - npm (npmjs.com)

复制代码

npm install pdfh5

由于我安装最新的pdfh5.js后运行时报错

所以我选择降低版本,可能是node版本问题

html 复制代码

npm install pdfh5@1.4.2

pdfh5的使用

html 复制代码

!
<template>
	<view>
		<u-button
			:ripple="true"
			size="medium"
			type="primary"
			:custom-style="{
				backgroundColor: '#378CED !important',
				borderColor: '#378CED !important',
			}"
			@click="getInvoiceUrl('123')"
			>发票下载</u-button
		>

		<!-- 发票预览弹窗 -->
		<u-popup
			width="100%"
			:mask-close-able="false"
			closeable
			mode="center"
			v-model="popupShow"
			@open="popupOpen"
			@close="popupClose"
		>
			<view class="top-tips fs-16 w-full">请长按图片保存到相册</view>
			<scroll-view style="height: auto" scroll-y="true" scroll-x="true">
				<view ref="pdfH5Ref" id="pdfH5"></view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import Pdfh5 from "pdfh5";
import {
	invoiceListByOrderNoGet,
	invoiceSingleApplication,
	invoiceUrlGet,
} from '@/api/invoice'
export default {
	name: 'InvoiceList',
	components: {},
	props: {},
	data() {
		return {
			popupShow: false,
			pdfh5: null,
			pdfCodeArray: '',
		}
	},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		popupOpen() {
			//实例化
            // 这里使用pdfurl或data，取决后端返回的文件格式，我这里用的是pdf文件流，具体可看文档
			this.pdfh5 = new Pdfh5('#pdfH5', {
				// pdfurl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
				data: this.pdfCodeArray,
				cMapUrl: 'https://unpkg.com/pdfjs-dist@3.8.162/cmaps/', //如果是预览发票这里必须加上，否则会丢失字体
				scale: 5, //比例越大，pdf越清晰
				// responseType: "arraybuffer" // blob arraybuffer
			})
			//监听完成事件
			this.pdfh5.on('complete', (status, msg, time) => {
				this.$nextTick(() => {
					//禁止手势缩放
					// this.pdfh5.zoomEnable(false)
                    // 下载pdf
					// this.pdfh5.download()
					// 获取 pdfH5Ref 组件的引用 为解决scale值大时，canvas展示过大问题
					const pdfH5Ref = this.$refs.pdfH5Ref

					// 查找具有 viewerContainer 类名的元素
					const viewerContainer = pdfH5Ref.$el.querySelector('.viewerContainer')

					if (viewerContainer) {
						// 查找具有 pinch-zoom-container 类名的元素
						const pinchZoomContainer = viewerContainer.querySelector(
							'.pinch-zoom-container'
						)

						if (pinchZoomContainer) {
							pinchZoomContainer.style.height = 'auto' // 替换为所需的高度

							// 查找具有 pageContainer 类名的元素
							const pageContainers =
								pinchZoomContainer.querySelectorAll('.pageContainer')
							// 设置 pinch-zoom-container 元素的高度
							if (pageContainers) {
								// 循环处理每个 pageContainer
								pageContainers.forEach((pageContainer) => {
									pageContainer.style.width = '100%'
									pageContainer.style.height = '100%'
									pageContainer.style.minWidth = '100%'
									pageContainer.style.maxWidth = '100%'
									pageContainer.style.minHeight = '100%'
									pageContainer.style.maxHeight = '100%'
									// 查找当前 pageContainer 下的所有 img 元素
									const imgElements = pageContainer.querySelectorAll('img')

									if (imgElements) {
										// 设置每个 img 元素的宽度
										imgElements.forEach((imgElement) => {
											imgElement.style.width = '100%' // 替换为所需的宽度
											imgElement.style.height = '100%' // 替换为所需的宽度
										})
									}
								})
							}
						}
					}
				})
			})
		},
		popupClose() {
			this.pdfh5.destroy()
			this.pdfh5 = null
		},

		//获取发票下载地址
		getInvoiceUrl(invoiceID) {
			invoiceUrlGet({ invoiceID }).then((res) => {
				if (res.code === 200) {
                    this.popupShow = true
					this.pdfCodeArray = res.data.einvoiceUrl
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
@import "pdfh5/css/pdfh5.css";
</style>

如需开启其它功能或调用相关api请移步GitHub地址自行探索

pdfh5项目gitee地址

pdfh5项目GitHub地址