代码编织梦想

一、实现效果预览

在这里插入图片描述

  • 上下滚动和缩放查看
  • 左上角固定显示当前页码和总页数
  • 右下角一键回到顶部按钮
  • 在每页pdf上添加图片水印

二、安装插件(pdfh5)

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);
    });

四、完整使用的代码

<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>


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37831545/article/details/127995513

vue 实现手机端显示pdf-爱代码爱编程

废话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

vue 移动端word、excel、pdf预览本地测试案例-爱代码爱编程

第一步 新建一个vue项目。打开控制命令行程序(CMD),运行命令: vue init webpack “项目名称”。 第二步 安装依赖,在控制命令行程序(CMD),运行命令:npm install 或者 cnpm install. 实现预览 这里先以word为例。首先运行命令:npm install mammoth,这是预览word的一个插件,

vue预览pdf 使用pdfh5-爱代码爱编程

之前使用vue-pdf,但是安卓端一直缺字,使用了网上的方法都解决不了,无奈之下,发现了这个pdfh5。 npm引用 npm install pdfh5 js 因为后端返回的是base64,我使用了blob转换链接 let blob = this.base64ToBlob(base64); //base64去掉头 let blobU

VUE----移动端在线预览pdf 可上下滚动,大小缩放(pdfh5)-爱代码爱编程

VUE----移动端在线预览pdf 可上下滚动,大小缩放(pdfh5) 1.安装需要的工具包 npm i --save pdfh5 2.写入组件 <template> <div :class="$style.pdf" v-show="visible"> <div @click="visible = f

关于vue-pdf的使用h5-爱代码爱编程

引用 及使用 import pdf from 'vue-pdf' export default { name: 'Pdf', components:{ pdf }, data(){ return{ src: "", vuePdf: null, numPages:1, }

Vue 在线预览PDF pdfh5(移动/PC)-爱代码爱编程

移动端实现在线预览PDF,并且可以自由缩放 pdfh5 的github地址:https://github.com/gjTool/pdfh5 安装 npm install pdfh5 效果组件封装: pdfInfo.vue <template> <div :class="$style.pdf" v-show="visib

vue 手机移动端预览pdf-爱代码爱编程

最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便 首先pdf返回的是pdf文件流 接收pdf文件流的时候需要设定文件类型responseType: 'arraybuffer' 首先下载pdfh5 npm i pdfh5 主要代码 <template> <div id="app"

PC端与手机端h5页面pdf展示 pdfh5.js 与 pdf.js-爱代码爱编程

PC端与手机端h5页面pdf展示 pdfh5.js 使用pdf.js 2.13.216版本的使用 我们web经常会遇到对于pdf文件的展示,对于PC端我们可以直接通过浏览器打开pdf进行预览。但是对于手机端,我们的h5页面中连接的pdf文件在安卓上会跳转到下载,在IOS上会直接打开。对于这种需要兼容pc端与手机端的展示我们可以使用pdf.js来

vue框架移动端预览pdf文件-爱代码爱编程

1.安装插件:yarn add pdfh5  或者 npm install --save pdfh5 2.使用pdfh5插件预览pdf <template>     <div class="m-pdf">         <div id="pdf"></div>     </div> <

vue3 H5 pdf插件 iphone查看pdf失败-爱代码爱编程

项目要求在公众号H5页面查看pdf,因为是vue3,我找到了两个vue3的pdf插件, pdfvuer 这个插件一开始一切正常可以打开pdf文件,但是测试测出ios 12.几的版本不兼容显示不出来 也不报错 我就放弃了 pdfjs-dist 这款插件 同样也是iphone 不能查看,但有报错,然后找到原因是版本不行,下载  2.2.228 即可,, 

vue app手机端实现pdf、图片在ios或者安卓端预览下载功能-爱代码爱编程

需求:手机端App实现pdf、图片在线预览下载功能,当前调用ios或者安卓提供的方法实现。 效果图:   代码实现:  <div class="flex align-items just-cont m20"> <div class="flex align-items">

vue使用pdf.js实现移动端在线pdf文件预览_yujin0213的博客-爱代码爱编程

背景 产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力 方案 H5展示合同PDF,有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题 方案表现iframe的形式iOS:只能展示第一页,多页不能展示 Android: 弹出下载弹窗 PC:正常展示embed标签iO

使用vue-pdf 给pdf加水印_从此苏州|更江南的博客-爱代码爱编程

<template> <el-container> <el-main id="myIframe"> <pdf :page="pageNum" :src="fi

vue中h5移动端嵌入预览pdf文件,支持放大和分页并附完整代码。_前端小侯的博客-爱代码爱编程

要在移动端嵌入并预览PDF文件,最便捷的方式就是使用pdfh5插件,该插件成熟稳定。 1、npm安装指令:npm i pdfh5  2、首先在vue项目components目录下创建PreviewpdfH5.vue文件,添加以下代码: //封装组件 <template>   <div class="pdfBox">     &

vue展现pdf文件_cv实习生的博客-爱代码爱编程

展现pdf文件 小小吐槽安装 pdfjs-distvue代码实现(图片展示)java将pdf转换为base64踩坑 小小吐槽 接到一个小小需求,在pc端和手机端展现pdf,要求是完美展现pdf,pdf不能

vue3.0下使用pdf预览 -爱代码爱编程

pdfh5在线预览 (建议使用谷歌浏览器F12手机模式打开预览) 原文参考:https://github.com/gjTool/pdfh5 快速使用(有两种方式) 一、script标签引入方式(需下载本项目文

h5添加水印_h5拍照加水印-爱代码爱编程

1.创建一个js文件 import dayjs from 'dayjs' const ID = '1.23452384164.123412415' const WIDTH = 300; const HEIGHT = 150