需求及遇到的问题描述
在公众号网页中预览PDF文件，起初想到的是使用ifram，使用结果，在web端浏览没有问题（根据域名配置不同可能会出现PDF所在的域名打开直接下载，无法预览），但是在移动端只能展示pdf的第一页，不能上下滑动预览全部。也有说使用h5新标签embed的，但是总是提示‘已禁止在此网页上运行flash’，本来想省事，不找插件实现需求，可是遇到太多坑，无奈下选择了pdfh5插件。我的项目技术是vue
image.png
pdfh5使用
- 安装
yarn add pdfh5
- 核心代码
<template>
<div>
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import axios from 'axios';
export default {
name: 'Image',
data() {
return {
url: "",
pdfh5: null
};
},
created(){
this.url = this.$route.query.url
},
mounted(){
//实现方式一
axios
.get(this.url, {
responseType: 'arraybuffer'
})
.then(res => {
this.pdfh5 = new Pdfh5('#demo', {
data: res.data
});
});
//实现方式二
//先实例化
// this.pdfh5 = new Pdfh5("#demo", {
// pdfurl: this.url
// });
// this.pdfh5.on("complete", function (status, msg, time) {
//console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
//})
}
};
</script>
