vue项目中使用vue-pdf或pdf.Js,实现在页面上预览pdf内容
一。vue-pdf
1. 安装vue-pdf
npm install --save vue-pdf
2.页面引入 js部分
import pdf from "vue-pdf";data(){return {pdfUrl: "",pageTotal: 0,}
}mounted(){this.pdfUrl = pdf.createLoadingTask(pdf文件路径url);// 获取页码this.pdfUrl.promise .then((pdf) => (this.pageTotal = pdf.numPages)).catch((error) => {});
}
3.html部分
<pdfv-for="item in pageTotal":src="pdfUrl":key="item":page="item"></pdf>
二、pdfJs
需要下载PDF.js库。您可以从官方GitHub仓库(https://github.com/mozilla/pdf.js)下载最新版本的PDF.js。
1.引入
Vue项目中找到public/index.html文件,并在文件的标签内添加以下代码以引入PDF.js库
<script src="./pdfjs/build/pdf.js"></script>
2.Vue 组件中使用元素展示 PDF 页面
<template><div><canvas ref="pdfCanvas"></canvas></div>
</template>
3.使用 PDF.js 提供的 API 加载和渲染 PDF 文件
mounted() {this.loadPDF();},methods: {async loadPDF() {const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替换为您的PDF文件路径const loadingTask = window.PDFJS.getDocument(pdfUrl);const pdf = await loadingTask.promise;const canvas = this.$refs.pdfCanvas;const context = canvas.getContext('2d');const page = await pdf.getPage(1); // 加载第一页const viewport = page.getViewport({ scale: 1 });canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);}}
4.页面切换和缩放
<template><div><canvas ref="pdfCanvas"></canvas><button @click="previousPage">Previous Page</button><button @click="nextPage">Next Page</button></div>
</template>
5.页面切换和缩放功JavaScript部分
data() {return {pdf: null,currentPage: 1};},mounted() {this.loadPDF();},methods: {async loadPDF() {// ...},async previousPage() {if (this.currentPage > 1) {this.currentPage--;await this.renderPage(this.currentPage);}},async nextPage() {if (this.currentPage < this.pdf.numPages) {this.currentPage++;await this.renderPage(this.currentPage);}},async renderPage(pageNumber) {const page = await this.pdf.getPage(pageNumber);const viewport = page.getViewport({ scale: 1 });const canvas = this.$refs.pdfCanvas;const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);}}
相关文章:
vue项目中使用vue-pdf或pdf.Js,实现在页面上预览pdf内容
一。vue-pdf 1. 安装vue-pdf npm install --save vue-pdf2.页面引入 js部分 import pdf from "vue-pdf";data(){return {pdfUrl: "",pageTotal: 0,} }mounted(){this.pdfUrl pdf.createLoadingTask(pdf文件路径url);// 获取页码this.pdfUrl.promise…...
为什么静态成员函数不能是虚函数
在面向对象编程中,静态成员函数和虚函数都是常见的概念,但它们之间存在着本质上的差异。由于其特性上的差异,静态成员函数不能声明为虚函数。下面我们来探讨一下为什么静态成员函数不能是虚函数。 我在网上查到最多的说法是静态函数没有this指…...
python环境移植(本机windows到离线windows环境)
Python环境整体迁移(包括无网络情况)_python 迁移 新老无法联网-CSDN博客...
蓝桥杯day9刷题日记
P8649 [蓝桥杯 2017 省 B] k 倍区间 思路:前缀和的题,对k取余相同的数就可以得到k的倍数 #include <iostream> #include <string> using namespace std; long long ans; int n,k; long long q[100010]; long long sum[100010];int main() …...
阿里云数据库Cassandra的产品价格
本文介绍阿里云数据库Cassandra的价格。 支持的地域 当前开通的地域如下: 中国站点:华东1(杭州)、华东2(上海)、华南1(深圳)、华北1(青岛)、华北2ÿ…...
离散制造企业MES与流程企业MES的区别
制造行业根据加工过程管控主要分为两大类:离散型与流程型。 离散型主要是通过对原材料的物理形状改进或组合,使其成为产品并增值,如机械加工、家用电器、电子电气行业等。 流程型则主要是采用物料或化学的方法对原材料进行混合、分离、加热…...
中国象棋C++
题目描述 在中国象棋中正所谓新手玩车,熟手玩炮,老手玩马,由此可见象棋中炮的地位还是比较高的。 给定一个nm的棋盘,全部摆满炮,我们视所有炮都不属于同一阵营,他们之间可以相互攻击但不能不进行攻击直接移…...
记录一下目前为止的算法成长
每日笔记 复习曲线 间隔1天、3天、7天、15天、30天,然后以一个月为周期复习 2023. 12. 24 一定要每天早中晚都要复习一下 早中午每段一两道, 而且一定要是同一个类型, 不然刷起来都没有意义 11.29 开始向着面试刷题跟进! 每天刷4题左右 ,一周之内一定要是统一类…...
AI大模型学习在数控系统工艺优化与智能制造中的应用
目录 1.工艺优化: 2.预测维护: 3.质量控制: 4.自动编程: 5.人机协作: 6.系统集成: AI大模型学习在数控系统工艺优化与智能制造中的应用主要体现在以下几个方面: 1.工艺优化: …...
安卓findViewById 的优化方案:ViewBinding与ButterKnife(一)
好多小伙伴现在还用findViewById来获取控件的id, 在这里提供俩种替代方案:ViewBinding与ButterKnife; 先来说说ButterKnife ButterKnife ButterKnife是一个专注于Android系统的View注入框架,在过去的项目中总是需要很多的findViewById来查…...
map和set(三)——红黑树
1、红黑树的概念及性质 1.1概念 概念: 红黑树是一种二叉搜索树,以颜色(Red or Black)互斥来限制每条路径不会比另外的路径长出两倍,来达到近似平衡 1.2性质 红黑树的性质: 每个节点不是黑色就是红色根节点是黑色的如果一个节点是…...
Day26 HashMap
Day26 HashMap 文章目录 Day26 HashMap一、应用场景二、特点三、基本用法四、面试题 一、应用场景 1、概念: HashMap是Java集合框架中的一种实现类,用于存储键值对。 2、好处: HashMap是一个常用的集合类,适用于需要快速查找和插…...
某蓝队面试经验
背景 据小道消息说今年的国护疑似提前到了五月份,所以最近也是HW面试的一个高峰期啊,这里分享一下上次长亭的蓝队面试问题(附本人的回答,仅供参考) 面试问答 1、谈谈作为蓝队护网过程使用过厂商的设备 这里我回答的…...
【Linux】 centos7安装卸载SQL server(2017、2019)
一、安装配置 准备一个基础Linux配置: 内存为20GB 运行内存为2GB的系统(数据库小于2GB安装不了) 1、网络配置 我们需要进行网络的连接 进入 cd /ect/sysconfig/network-script/ 编辑文件ifcfg-ens33 vi ifcfg-ens33 Insert键进行编辑 把ONBOO…...
面试算法-110-课程表
题目 你这个学期必须选修 numCourses 门课程,记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出,其中 prerequisites[i] [ai, bi] ,表示如果要学习课程 ai 则 必须 先学习课程 bi 。 …...
注册前后端php的检测
首先,在HTML表单中添加一个用于输入密码的文本框,并在其后面添加一个用于显示密码格式要求提示的元素,例如一个 <span> 标签。 <input type"password" id"passwordInput"> <span id"passwordHint…...
Redis:什么是redis?①
一、思想 Redis是一个开源的高性能基于内存key-value数据库,常用作数据库、缓存或消息代理 二、数据类型 String List...
【课程】MyBatisPlus视频教程
MyBatis-Plus是一款非常强大的MyBatis增强工具包,只做增强不做改变. 在不用编写任何SQL语句的情况下即可以极其方便的实现单一、批量、分页等操作。 本套教程基于MyBatis-Plus新2.3版本,详细讲授:集成Mybatis-Plus、 通用CRUD、EntityWrapper条件构造器、ActiveRec…...
如何使用人工智能和ChatGPT来优化营销转化率
人工智能 (AI) 和营销的交集正在彻底改变企业与客户互动的方式,最终改变营销转化率。人工智能能够分析大量数据、理解模式和自动执行任务,它不仅是一项创新技术,而且是营销领域的根本性转变。这种转变允许更加个性化、…...
Ubuntu 22.04上构建libvirt源码错误解决
当在Ubuntu 22.04上构建libvirt源码时,可能会遇到一些错误。下面是一些常见错误及其解决方法: 1. 错误:Program xmllint’未找到或不可执行 解决方法:安装libxml2-utils sudo apt-get install libxml2-utils2. 错误:…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
