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

版本：pdfh5@1.4.7 vue2+.net Core 6.0webapi

首先安装依赖包：

npm install pdfh5 --save

 

简单使用

方法一：pdf文件在前端（直接通过pdfurl参数填写相对路径即可）

前端渲染

<template>
  <div id="demo"></div>
</template>

<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
export default {
  data() {
    return {
      pdfh5: null,
    };
  },
  mounted() {
    this.pdfh5 = new Pdfh5("#demo", {
      pdfurl: "/20220112_19_3.docx.pdf",
    });
  },
};
</script>

 

方式二：pdf文件在后端（常用）（需要后端获取文件二进制数组然后通过data参数填写返回的二进制数组）如果返回的是Base64编码则需要atob()转换为二进制字符串。

vue

<template>
  <div id="demo"></div>
</template>

<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { getPdf } from "@/api/student";
export default {
  data() {
    return {
      pdfh5: null,
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      let params = {
        filePath: "Upload/Tables/SP_BPM_Report/2023/8/20220112_19_3.docx.pdf",
      };
      // 请求后端数据获取文件二进制数据
      let response = await getPdf(params); // {"code":200,"byteArr":""}
      if (!response) return;
      this.pdfh5 = new Pdfh5("#demo", {
        data: atob(response.byteArr), //如果PDF数据是BASE64编码的，请先使用atob()将其转换为二进制字符串。
      });
    },
  },
};

.NET Core后端接口

using System.IO;

[HttpGet, Route("getpdf")]
public ActionResult getPdf(string filePath)
{
    if (string.IsNullOrWhiteSpace(filePath)) return BadRequest("路径为空！");
    string fullPath = Path.Combine(Path.GetFullPath("./wwwroot/"), filePath);
    if (!File.Exists(fullPath)) return BadRequest("文件不存在！");
    return Ok(new { byteArr = File.ReadAllBytes(fullPath), code=200 });
}

 

参数配置列表

this.pdfh5 = new Pdfh5("#demo", {
    // 参数配置
    pdfurl : './1.pdf',
    responseType: 'blob',
    ...
});

参数名称	类型	取值	作用
pdfurl	String	-	pdf地址
responseType	String	blob 、 arraybuffer 默认 blob	请求pdf数据格式
URIenable	Boolean	true、false， 默认false	true开启地址栏file参数
data	Array(arraybuffer)	-	pdf文件流 ，与pdfurl二选一(二进制PDF数据。使用类型化数组（Uint8Array）可以提高内存使用率。如果PDF数据是BASE64编码的，请先使用atob（）将其转换为二进制字符串。)
renderType	String	"canvas"、"svg"，默认"canvas"	pdf渲染模式
pageNum	Boolean	true、false， 默认true	是否显示左上角页码
backTop	Boolean	true、false， 默认true	是否显示右下角回到顶部按钮
maxZoom	Number	最大倍数3	手势缩放最大倍数
scale	Number	最大比例5，默认1.5	pdf渲染的比例
scrollEnable	Boolean	true、false， 默认true	是否允许pdf滚动
zoomEnable	Boolean	true、false， 默认true	是否允许pdf手势缩放
cMapUrl	String	"	解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
limit	Number	默认0	限制pdf加载最大页数
logo	Object	{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径（建议使用png透明图片），width水印宽度，height水印高度，以每页pdf左上角为0点，x、y为偏移值。 默认false	给每页pdf添加水印logo（canvas模式下使用）
goto	Number	默认0	加载pdf跳转到第几页
textLayer	Boolean	true、false， 默认false	是否开启textLayer，可以复制文本（canvas模式下使用）【处于测试阶段，位置偏移严重】
background	Object	{color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background属性语法相同，默认false	是否开启背景图模式

 

方法列表

this.pdfh5.scrollEnable(false);

this.pdfh5.show(() => {
    console.log(1);
});

this.pdfh5.download("1.pdf", () => {
    console.log("下载完成");
});

方法名	传参	传参取值	作用
scrollEnable	Boolean	true、false， 默认true	是否允许pdf滚动(需要在pdf加载完成后使用)
zoomEnable	Boolean	true、false， 默认true	是否允许pdf手势缩放(需要在pdf加载完成后使用)
show	Function	带一个回调函数	pdfh5显示
hide	Function	带一个回调函数	pdfh5隐藏
reset	Function	带一个回调函数	pdfh5还原
destroy	Function	带一个回调函数	pdfh5销毁
on	(String, Function)	String：监听的事件名，Function：监听的事件回调	on方法监听所有事件
goto	Number	Number:要跳转的pdf页数	pdf跳转到第几页（pdf加载完成后使用）
download	(String, Function)	String：下载pdf的名称，默认download.pdf，Function：下载完成后的回调	下载pdf

 

on方法监听所有事件

this.pdfh5.on("scroll", function (scrollTop,currentNum) {
     console.log("scrollTop:" + scrollTop);
     console.log("currentNum:" + currentNum);
});

事件名	回调	作用
init	Function	监听pdfh5开始初始化
ready	Function	监听pdf准备开始渲染，此时可以拿到pdf总页数
error	Function(msg,time)	监听加载失败，msg信息，time耗时
success	Function(msg,time)	监听pdf渲染成功，msg信息，time耗时
complete	Function(status, msg, time)	监听pdf加载完成事件，加载失败、渲染成功都会触发。status有两种状态success和error
render	Function(currentNum, time, currentPageDom)	监听pdf渲染过程，currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
zoom	Function(scale)	监听pdf缩放，scale缩放比例
scroll	Function(scrollTop,currentNum)	监听pdf滚动，scrollTop滚动条高度,currentNum当前页码
backTop	Function	监听回到顶部按钮的点击事件回调
zoomEnable	Function(flag)	监听允许缩放，flag：true，false
scrollEnable	Function(flag)	监听允许滚动，flag：true，false
show	Function	监听pdfh5显示
hide	Function	监听pdfh5隐藏
reset	Function	监听pdfh5还原
destroy	Function	监听pdfh5销毁