vue移动端H5预览PDF(pdfh5) 支持放大、分页、添加水印、PDF下载(vue移动端预览pdf)

编辑：rootadmin

vue移动端H5预览PDF(pdfh5) 支持放大、分页、添加水印、PDF下载预览PDF【pdfh5】一、实现效果预览二、安装插件（pdfh5）三、pdfh5的使用1、引入插件依赖2、实例化2.1 实例化参数2.2 options配置项参数列表2.3 methods 方法列表2.4 on方法监听所有事件-事件名列表2.5 pdf文件流请求示例2.6 pdf下载2.6 相关参考文档四、完整使用的代码一、实现效果预览

推荐整理分享vue移动端H5预览PDF(pdfh5) 支持放大、分页、添加水印、PDF下载(vue移动端预览pdf)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue预览html,vue移动端预览pdf,vue移动端图片预览,vue移动端预览pdf,vue移动端图片预览,vue移动端图片预览,vue移动端预览pdf,vue移动端预览pdf,内容如对您有帮助，希望把文章链接给更多的朋友！

上下滚动和缩放查看左上角固定显示当前页码和总页数右下角一键回到顶部按钮在每页pdf上添加图片水印二、安装插件（pdfh5） vue移动端H5预览PDF(pdfh5) 支持放大、分页、添加水印、PDF下载(vue移动端预览pdf)

pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。

npm i pdfh5三、pdfh5的使用1、引入插件依赖import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";2、实例化 this.pdfh5 = new Pdfh5("#pdf-content", { pdfurl: this.url, });2.1 实例化参数

2.2 options配置项参数列表

2.3 methods 方法列表

2.4 on方法监听所有事件-事件名列表

2.5 pdf文件流请求示例 // 实现方式一 axios .get(this.url, { responseType: "arraybuffer", }) .then((res) => { this.pdfh5 = new Pdfh5("#pdf-content", { data: res.data, // pdf文件流 }); }); //实现方式二 //先实例化 this.pdfh5 = new Pdfh5("#pdf-content", { pdfurl: this.url, }); this.pdfh5.on("complete", function (status, msg, time) { console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum); });2.6 pdf下载downloadPdf() { console.log("开始下载"); this.pdfh5.download();},2.6 相关参考文档

相关参考文档: vue-pdfh5-npm

四、完整使用的代码<template> <div class="m-pdf"> <div id="pdf-content"></div> </div></template><script>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";export default { name: "Pdfh5", data() { return { pdfh5: null, // 可引入网络文件或者本地文件 pdfUrl: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹） }; }, mounted() { this.initPdf(); }, methods: { initPdf() { // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件 // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印 this.pdfh5 = new Pdfh5("#pdf-content", { pdfurl: this.pdfUrl, goto: 1, // 设置每一页pdf上的水印 logo: { src: require("@/assets/images/bus/icon_head@2x.png"), x: 420, y: 700, width: 120, height: 120 }, }); this.pdfh5.scrollEnable(true); // 允许pdf滚动 // 监听pdf准备开始渲染，此时可以拿到pdf总页数 this.pdfh5.on("ready", function () { console.log("总页数:" + this.totalNum); }); // 监听pdf加载完成事件，加载失败、渲染成功都会触发 this.pdfh5.on("complete", (status, msg, time) => { console.log("状态:" + status + "，信息:" + msg + "，耗时:" + time + "毫秒"); }); }, },};</script>

本文链接地址:https://www.jiuchutong.com/zhishi/274413.html 转载请保留说明！

上一篇：macOS Big Sur更新了什么 macOS11.0值得升级吗(macos big sur更新后能改回来吗)

下一篇：苹果mac系统桌面怎么显示CD等设备? mac桌面显示cd图标的技巧(苹果mac系统桌面空间不够)