vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,经过一番查询,采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuffer'首先下载pdfh5npm i pdfh5主要代码<template><div id="app"><div id="demo"></div>
·
最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便
首先pdf返回的是pdf文件流
接收pdf文件流的时候需要设定文件类型responseType: 'arraybuffer'
首先下载pdfh5
npm i pdfh5
主要代码
<template>
<div id="app">
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
import { test } from '../../api/home'
export default {
name: 'App',
data () {
return {
pdfh5: null
}
},
async mounted () {
const pdf1 = await test() // 请求文件流接口
// 实例化
this.pdfh5 = new Pdfh5('#demo', {
data: pdf1.data,
// pdfurl: "../../static/test.pdf" // 如需使用在线url链接pdf注释上行代码,放开此行, 引号里面填自己的链接
scale: 5
})
// 监听完成事件
// this.pdfh5.on('complete', function (status, msg, time) {
// console.log('状态:' + status + ',信息:' + msg + ',耗时:' + time + '毫秒,总页数:' + this.totalNum)
// })
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
html,body,#app {
width: 100%;
height: 100%;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)