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

标签：pdfh5 vue return filePath pdfurl blob pdf true

版本：[email protected] vue2+.net Core 6.0webapi

方法一：通过访问后端获取二进制数据来渲染

前端渲染

<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/[email protected]/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));
}

方法二：通过访问后端资源地址 暂时没搞明白（说我跨域无法访问，但是明明设置跨域了）   详细api参数参考：https://blog.csdn.net/fade999/article/details/98869904

标签：pdfh5,vue,return,filePath,pdfurl,blob,pdf,true
From： https://www.cnblogs.com/xxeeblog/p/17838404.html