vue+pdfh5实现将pdf渲染到页面上

<template>
  <vol-box ref="box" :width="width" :height="height">
    <div id="demo" ref="render"></div>
  </vol-box>
</template>
​
<script>
import Pdfh5 from "pdfh5"; 
import "pdfh5/css/pdfh5.css";
let _this
  export default {
    name:'',
    data () {
      return {
        width: document.documentElement.clientWidth,    // 当前窗口宽度
        height: document.documentElement.clientHeight,  // 当前窗口高度
        pdfh5: null,
      };
    },
    mounted() {
        _this = this
        this.open(pdfurl)
    },
    methods: {
        open(pdfurl) {
            //清除上一次渲染
            this.$nextTick(() => {
                let render = this.$refs.render
                render.innerHTML = ''
            })
            this.loadpdf(pdfurl)
        },
        async loadpdf(pdfurl){
            //获取二进制文件流
            let param = {
                filePath: pdfurl.replace(this.http.ipAddress, ''),
            }
            let blob = await this.http.get('api/RDQ_Report/GetPdf',param,true)
            if (!blob || (blob && blob.status === false)) return
            //实例化
            this.pdfh5 = new Pdfh5("#demo", {
                data:atob(blob),
                //cMapUrl:"https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
                responseType: "arraybuffer", // blob arraybuffer
                // withCredentials: true,
                // renderType: "svg",
                // maxZoom: 3, //手势缩放最大倍数 默认3
                // scrollEnable: true, //是否允许pdf滚动
                // zoomEnable: true, //是否允许pdf手势缩放
            });
            //监听完成事件
            this.pdfh5.on("complete", function (status, msg, time) {
                console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
                _this.$refs.render.style.height = `${_this.height}px`
            })
        }
    },
  }
</script>
<style lang='less' scoped>
#demo{
    width: 100%;
    height: 508px;
}</style>

[HttpGet, Route("[action]"), AllowAnonymous]
public IActionResult GetPdf(string filePath)
{
    var rc = WebResponseContent.Instance;
    if (string.IsNullOrWhiteSpace(filePath)) return JsonNormal("error");
    var fullPath = filePath.MapPath(true);
    if (!File.Exists(fullPath)) return JsonNormal("文件不存在！");
    return Json(File.ReadAllBytes(fullPath));
}