阅读 795

h5页面预览pdf,使用pdfh5.js插件,循环显示pdf文件

做的一个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可以使用,需要的可以去官网查看,这里写一下,我遇到的一些问题及解决方法;

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

image.png

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

image.png

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

image.png 只需要这一个文件即可。

image.png

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

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

image.png

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

image.png

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

文章分类
前端
文章标签