H5预览PDF

安装插件

cnpm install pdfh5

实现代码：

<template>
	<view>
		<div id="pdf-content"></div>
	</view>
</template>

<script>
	import Pdfh5 from "pdfh5";
	import "pdfh5/css/pdfh5.css";

	export default {
		data() {
			return {
				pdfh5: '',
			};
		},
		onLoad(options) {
			this.$common.Init.call(this);
			this.$request(this.$api.Weike.sectionInfo, options).then((res) => {
				console.log(res);
				let file = res.data.type_config.content_pdf;
				this.loadPDF(file)
			});
		},
		methods: {
			loadPDF(pdfUrl) {
				this.pdfh5 = new Pdfh5("#pdf-content", {
					pdfurl: pdfUrl,
				});
				this.pdfh5.scrollEnable(true); // 允许pdf滚动
				// 监听pdf准备开始渲染，此时可以拿到pdf总页数
				this.pdfh5.on("ready", function() {
					console.log("总页数:" + this.totalNum);
				});
				// 监听pdf加载完成事件，加载失败、渲染成功都会触发
				this.pdfh5.on("complete", (status, msg, time) => {
					console.log("状态:" + status + "，信息:" + msg + "，耗时:" + time + "毫秒");
				});
			},
		}
	};
</script>