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. 错误:…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源:全方位解析 Vue 模板(<template> 部分)中的表达式、指令绑定(如 v-bind, v-on)和插值({{ }})都在一个特定的作用域内求值。这个作用域由当前 组件…...
热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露,数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据,严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能,但SEMR…...
