版本：pdfh5@1.4.7 vue2+.net Core 6.0webapi
首先安装依赖包：
?1npm install pdfh5 --save
简单使用
方法一：pdf文件在前端（直接通过pdfurl参数填写相对路径即可）
前端渲染
[/span>template
[/span>div id="demo"
[/span>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",
});
},
};
方式二：pdf文件在后端（常用）（需要后端获取文件二进制数组然后通过data参数填写返回的二进制数组）如果返回的是Base64编码则需要atob()转换为二进制字符串。
vue
[/span>template
[/span>div id="demo"
[/span>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， //代码效果参考：http://hnjlyzjd.com/xl/wz_24591.html
默认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
//代码效果参考：http://hnjlyzjd.com/hw/wz_24581.html
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
