最新需求是在手机实现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>

Logo

前往低代码交流专区

更多推荐