vue pdf.js统计pdf的页数

2023-11-02

参考链接作者原文展示了PDF,我只需要一部分功能

<template>
  <div class="preview-pdf">
    <h1>PDF页数为{{pdfPages}}</h1>
   
  </div>
</template>
<script>
const PDFJS = require('pdfjs-dist')
PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.13.216/build/pdf.worker.js'
export default {
  data() {
    return {
      pdfPages: '' // 页数

    }
  },
  mounted() {
    this.getPdfUrl()
  },
  methods: {
    getPdfUrl() {
      // todo 请求后台,获取pdf的url,这里用的是线上的地址
      const url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
      const loadingTask = PDFJS.getDocument(url)
      loadingTask.promise.then(pdf => {
        this.pdfPages = pdf.numPages
      })
    }

  }
}
</script>
<style lang="less" scoped>
.preview-pdf {
  h1 {
    margin: 30px auto;
    text-align: center;
    font-family: '宋体';
    letter-spacing: 2px;
  }
}
</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue pdf.js统计pdf的页数 的相关文章

  • Vue js引用警告 “export ‘default‘ (imported as ‘xxx‘) was not found

    问题原因 ES6 编译器识别问题 如果在public js这样写会有警告export default imported as xxx was not found export const myMixin 解决办法 修改组件中引用js的地方
  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error
  • Vue中的import from

    Vue中的import from 大家都知道 import from 是用来引入一些文件的 在vue中 可能有 js文件 json文件 vue文件 在JS和JSON文件引入的时候 往往需要写入一些 例如数组 export const a 例
  • vue-lazyload基础实例(基于vue2.0和vue-router2.0)

    首先引入依赖 import Vue from vue import Router from vue router import VueLazyload from vue lazyload 配置vue lazyload Vue use Vue
  • vue prop属性使用方法小结

    Prop 一 基本用法 Prop的基本用法很简单 作用是在子组件中接收父组件的值 父组件传值
  • 8.全配置自动生成模块前后端

    文章目录 学习资料 配置式开发全新的模块 快速实现 字典管理 代码生成器详细属性设置 全智能模块开发 查询调整 多表连接 药品模块 生产厂家下拉框 学习资料 https www bilibili com video BV13g411Y7GS
  • vue——vue-video-player插件实现rtmp直播流

    更新 flash已不可再使用 大家另寻出路吧 安装前首先需要注意几个点 vue video player插件 其实就是 video js 集成到 vue 中 所以千万不要再安装 video js 可能会出错 视频流我这个项目选择rtmp格式
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • 前端将List列表转化为树型结构(reduce函数)

    主要用到了reduce 函数 for循环可以做到的事情reduce 都可以做到 甚至操作起来更加简单方便和高雅 reduce 为数组中的每一个元素依次执行回调函数 不包括数组中被删除或从未被赋值的元素 reduce语法 array redu
  • JS实现成才网注册系统(网页数据验证)

    主代码
  • 快速入手 vue3 defindeModel 双向绑定数据,赶快了解下

    彩蛋 在vue3 3x 版本中 官方 RFC 放出了 一个新特性 defineModel 它将让我们在自定义组件上双向绑定数据更加快捷 举个 以前我们父子组件双向数据绑定要在子组件里声明对应的props emts computed 子组件
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • (vue)el-popover鼠标移入提示效果

    vue el popover鼠标移入提示效果 效果 代码
  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果
  • 基于springboot+vue实现位置的多分馆图书馆推荐系统演示【附项目源码+论文说明】

    基于springboot实现位置的多分馆图书馆推荐系统演示 摘要 时代的变化速度实在超出人类的所料 21世纪 计算机已经发展到各行各业 各个地区 它的载体媒介 计算机 大众称之为的电脑 是一种特高速的科学仪器 比人类的脑袋要灵光无数倍 什么
  • vue中的防抖和节流

    在Vue中 防抖和节流是两种常用的优化技术 用于限制事件的触发频率 以提高页面性能 防抖 Debounce 是指在事件被触发后 等待一段时间后再执行回调函数 如果在这段等待时间内 事件又被触发 则重新计时 防抖通常用于限制重复触发频率较高的
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码
  • 30天精通Nodejs--第二十二天:express-认证和授权

    目录 引言 理解JWT及其工作原理 安装与引入JWT库 生成JWT令牌 验证JWT令牌 注意事项与最佳实践 结语 引言 在现代Web应用开发中 JSON Web Tokens JWT 作为一种轻量级 自包含且安全的标准 已被广泛用于实现用户

随机推荐

  • Pycharm2022安装及python环境的搭建

    一 安装Pycharm 首先进入pycharm的官网https www jetbrains com pycharm download section windows 选择社区版进行下载 运行启动安装向导的pycharm 2022 2 4 e
  • cookie注入

    什么是cookie Cookies 确定身份 在服务器产生 存储在客户端的一小段文本信息 格式为字典 键值对 cookie分类 会话级 保存在内存 浏览器关闭则丢失 持久级 保存至硬盘 只有 当失效时间到了才会清除 一般都是持久化比较多 打
  • 设计模式(二十一) 状态模式

    状态模式也是一种行为型模式 当我们的程序中需要一些状态转换 对于不同的状态需要不同的行为时 我们就可以考虑使用状态模式 下面用交通灯来当例子 我们需要红黄绿三种颜色的状态 interface State void show class Re
  • Springboot Logback日志多文件输出(按日期和大小分割)

    在早期的日志Slf4j Log4j使用方式中 我们使用最多的就是LoggerFactory来获取一个Logger实例 logback的原理也一样 本文示例文件分割按照日志大小和日期进行分割 目录 配置logback xml 配置需要的pro
  • 【Unity入门计划】Unity2D动画(2)-脚本与混合树实现玩家角色动画过渡

    目录 1 玩家角色移动伴随的简单动画 1 1 行走 1 2 停留 1 3 攻击敌人 触发型 1 4 受伤 触发型 1 5 跳跃 1 6 下蹲 2 动画间的过渡 3 过渡的判断逻辑 3 1 行走与停留 移动速度 3 2 受伤 攻击 bool变
  • 如何从一个服务器拷文件到另一个服务器

    scp sftp rsync 如果文件很多或者很大建议rsync SecureCRT与SshClient不同的就是 SecureCRT没有图形化的文件传输工具 不过也不影响 用命令来实现的话 其实会方便快捷很多 第一种方式 上传文件只需在s
  • Java中Validator的使用

    原文 Java中Validator的使用 荼白 CSDN博客 java validator 很多时候都需要校验穿的参数是否符合规则 但是这种校验的代码会重复很多 所以引入 validator 来校验参数 这样可以省去很多冗余的代码 目录 p
  • 【Caffe】Windows下调用生成的classification.exe单张图片分类错误问题

    第一次更新 2017 10 25 本人环境 1 Caffe工程已经编译好 2 Matlab接口可用 问题概述 在用Caffe自带的程序对图片进行分类时 Matlab接口下识别率与训练时test的准确率一致 但使用VS接口 即直接调用工程生成
  • java ibatis 操作数据库延迟_javaweb项目,为什么过段时间,跟数据库就失去连接呀?...

    Cause org apache commons dbcp SQLNestedException Cannot get a connection pool exhausted at com ibatis sqlmap engine mapp
  • 【.Net实用方法总结】 整理并总结System.Data中DataColumnCollection类及其方法介绍

    作者简介 博主是一位 Net开发者 同时也是RPA和低代码平台的践行者 个人主页 会敲键盘的肘子 系列专栏 Net实用方法总结 专栏简介 博主针对 Net开发和C站问答过程中遇到的问题进行总结 形成本专栏 希望可以帮助到您解决问题 座右铭
  • 如何创建一个csv格式的文件

    function downloadFile fileName content var aTag document createElement a var blob new Blob ufeff content type text txt c
  • 复旦nlp实验室 nlp-beginner 任务一:基于机器学习的文本分类

    实现基于logistic softmax regression的文本分类 参考 文本分类 神经网络与深度学习 第2 3章 数据集 Classify the sentiment of sentences from the Rotten Tom
  • 【蓝桥杯Python】基础练习17:矩阵乘法

    试题 基础练习 矩阵乘法 目录 题目 资源限制 问题描述 输入格式 输出格式 样例输入 样例输出 解答 Python源代码 题目 资源限制 时间限制 1 0s 内存限制 512 0MB 问题描述 给定一个N阶矩阵A 输出A的M次幂 M是非负
  • 多因素方差分析_多因素方差分析(1)

    之前介绍的方差分析 称之为是单因素方差分析 one way ANOVA 主要研究单个因素对因变量的影响 多因素方差分析 是研究多个 2个或2个以上 自变量对因变量的影响 可以直观表现为以下公式 单因素方差分析 Yi a b Xi e 多因素
  • c语言变参宏和利用变参宏的一些简单的打印实现

    一些函数 如printf 接受数量可变的参数 stdvar h头文件提供了工具 让用户自定义带可变参数的函数 通过把宏参数列表中最后的参数写成省略号 即3个点 来实现这一功能 这样 预定义宏 VA ARGS 可用在替换部分中 表明省略号代表
  • Java的运算符及开发环境的安装

    一 运算符 1 赋值运算符 变量名 表达式 符合赋值运算符 2 算术运算符 整除 求余 在后 先用再加 在前 先加再用 3 关系运算符 如 gt lt gt lt char类型是可以比较 因为char类型存储的是对应的ASCII 判断一个字
  • 哪些循环依赖问题Spring解决不了?

    前言 大家都知道 Spring 解决了循环依赖的问题 网上也可以搜到 Spring 是使用三级缓存来解决循环依赖的 但有些时候循环依赖问题还是会导致启动报错 也就说明 在某些情况下 Spring 是没有办法解决循环依赖问题的 我们就来探究一
  • JIRA工作流节点状态变化前弹出窗口填写日志或者备注

    一 定义弹出框的页面 1 进入问题管理页面 并点添加屏幕 2 自定义弹出页面的名称 3 点击添加后会进入配置页面 配置页面所包含的字段 二 在工作流中配置页面 1 进入工作流编辑页面双击需要添加弹出页面的流程 2 在弹出框中页面栏选择刚刚配
  • Python爬虫必备:浏览器开发者工具的使用,非常详细

    最近很多小伙伴说 不会用浏览器开发者工具 今天我们就一起来深入了解一下开发者工具 以谷歌浏览器为例 谷歌浏览器开发者工具中的Network 是我们学习经常用到的 那么你都知道他们每个功能的意义吗 因本人经常有360极速浏览器 谷歌内核 所以
  • vue pdf.js统计pdf的页数

    参考链接作者原文展示了PDF 我只需要一部分功能