做的一个h5页面需要预览pdf文件，第一次尝试使用embed标签直接展示，简单方便，但是在ios手机上显示正常，但是在安卓机上出现问题，有兼容问题；紧接着尝试使用vue-pdf插件，也是出现同样的问题，最后选择了pdfh5.js插件，中间也出现了不少问题，最后解决实现预览；

pdfh5插件地址跟着readme选择自己适用的方法，我这里选择的第二种，因为是使用的vue项目

首先要npm安装一下

npm install pdfh5

然后使用

<template>
  <div id="app">
	<div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
	data() {
	  return {
	    pdfh5: null
	  };
	},
	mounted() {
		//实例化
	  this.pdfh5 = new Pdfh5("#demo", {
		pdfurl: "../../static/test.pdf"
	  });
	  //监听完成事件
	  this.pdfh5.on("complete", function (status, msg, time) {
		console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
	  })
	}
  }
</script>

<style>
	@import "pdfh5/css/pdfh5.css";
	*{
	padding: 0;
	margin: 0;
	}
	html,body,#app {
	width: 100%;
	height: 100%;
	}
</style>

以上都是官方提供的，下面还有很多api可以使用，需要的可以去官网查看，这里写一下，我遇到的一些问题及解决方法；

一、安装之后，按照文档的格式，放进自己的项目中后，出现报错

分析是css样式没找到，出现错误的地方在下图地方

这里，pdfh5.css文件没有引入到，所以出现这个错误，我的解决办法就是，在官方项目中，直接下载一下pdfh5.css样式文件，然后放到自己项目中，然后引入，成功实现。

只需要这一个文件即可。

二、自己的项目需要循环显示预览的文件

我这里做的是封装一个字组件PdfView文件，然后引入到循环显示的地方

出现了一个问题，显示的一直是最后一个文件，分析原因组件没有做唯一性，只渲染了最后一个，最后在原先组件中传递一个index做唯一性

这里标签上的id和实例对象中的id选择器对应一下就好了，最后实现循环显示预览的pdf文件，最后也加了一个error提示的小弹窗。