当前位置: 首页 > news >正文

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

为什么静态成员函数不能是虚函数

在面向对象编程中&#xff0c;静态成员函数和虚函数都是常见的概念&#xff0c;但它们之间存在着本质上的差异。由于其特性上的差异&#xff0c;静态成员函数不能声明为虚函数。下面我们来探讨一下为什么静态成员函数不能是虚函数。 我在网上查到最多的说法是静态函数没有this指…...

python环境移植(本机windows到离线windows环境)

Python环境整体迁移(包括无网络情况)_python 迁移 新老无法联网-CSDN博客...

蓝桥杯day9刷题日记

P8649 [蓝桥杯 2017 省 B] k 倍区间 思路&#xff1a;前缀和的题&#xff0c;对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的价格。 支持的地域 当前开通的地域如下&#xff1a; 中国站点&#xff1a;华东1&#xff08;杭州&#xff09;、华东2&#xff08;上海&#xff09;、华南1&#xff08;深圳&#xff09;、华北1&#xff08;青岛&#xff09;、华北2&#xff…...

离散制造企业MES与流程企业MES的区别

制造行业根据加工过程管控主要分为两大类&#xff1a;离散型与流程型。 离散型主要是通过对原材料的物理形状改进或组合&#xff0c;使其成为产品并增值&#xff0c;如机械加工、家用电器、电子电气行业等。 流程型则主要是采用物料或化学的方法对原材料进行混合、分离、加热…...

中国象棋C++

题目描述 在中国象棋中正所谓新手玩车&#xff0c;熟手玩炮&#xff0c;老手玩马&#xff0c;由此可见象棋中炮的地位还是比较高的。 给定一个nm的棋盘&#xff0c;全部摆满炮&#xff0c;我们视所有炮都不属于同一阵营&#xff0c;他们之间可以相互攻击但不能不进行攻击直接移…...

记录一下目前为止的算法成长

每日笔记 复习曲线 间隔1天、3天、7天、15天、30天&#xff0c;然后以一个月为周期复习 2023. 12. 24 一定要每天早中晚都要复习一下 早中午每段一两道, 而且一定要是同一个类型, 不然刷起来都没有意义 11.29 开始向着面试刷题跟进! 每天刷4题左右 ,一周之内一定要是统一类…...

AI大模型学习在数控系统工艺优化与智能制造中的应用

目录 1.工艺优化&#xff1a; 2.预测维护&#xff1a; 3.质量控制&#xff1a; 4.自动编程&#xff1a; 5.人机协作&#xff1a; 6.系统集成&#xff1a; AI大模型学习在数控系统工艺优化与智能制造中的应用主要体现在以下几个方面&#xff1a; 1.工艺优化&#xff1a; …...

安卓findViewById 的优化方案:ViewBinding与ButterKnife(一)

好多小伙伴现在还用findViewById来获取控件的id, 在这里提供俩种替代方案&#xff1a;ViewBinding与ButterKnife&#xff1b; 先来说说ButterKnife ButterKnife ButterKnife是一个专注于Android系统的View注入框架&#xff0c;在过去的项目中总是需要很多的findViewById来查…...

map和set(三)——红黑树

1、红黑树的概念及性质 1.1概念 概念&#xff1a; 红黑树是一种二叉搜索树&#xff0c;以颜色(Red or Black)互斥来限制每条路径不会比另外的路径长出两倍&#xff0c;来达到近似平衡 1.2性质 红黑树的性质&#xff1a; 每个节点不是黑色就是红色根节点是黑色的如果一个节点是…...

Day26 HashMap

Day26 HashMap 文章目录 Day26 HashMap一、应用场景二、特点三、基本用法四、面试题 一、应用场景 1、概念&#xff1a; HashMap是Java集合框架中的一种实现类&#xff0c;用于存储键值对。 2、好处&#xff1a; HashMap是一个常用的集合类&#xff0c;适用于需要快速查找和插…...

某蓝队面试经验

背景 据小道消息说今年的国护疑似提前到了五月份&#xff0c;所以最近也是HW面试的一个高峰期啊&#xff0c;这里分享一下上次长亭的蓝队面试问题&#xff08;附本人的回答&#xff0c;仅供参考&#xff09; 面试问答 1、谈谈作为蓝队护网过程使用过厂商的设备 这里我回答的…...

【Linux】 centos7安装卸载SQL server(2017、2019)

一、安装配置 准备一个基础Linux配置&#xff1a; 内存为20GB 运行内存为2GB的系统&#xff08;数据库小于2GB安装不了&#xff09; 1、网络配置 我们需要进行网络的连接 进入 cd /ect/sysconfig/network-script/ 编辑文件ifcfg-ens33 vi ifcfg-ens33 Insert键进行编辑 把ONBOO…...

面试算法-110-课程表

题目 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示如果要学习课程 ai 则 必须 先学习课程 bi 。 …...

注册前后端php的检测

首先&#xff0c;在HTML表单中添加一个用于输入密码的文本框&#xff0c;并在其后面添加一个用于显示密码格式要求提示的元素&#xff0c;例如一个 <span> 标签。 <input type"password" id"passwordInput"> <span id"passwordHint…...

Redis:什么是redis?①

一、思想 Redis是一个开源的高性能基于内存key-value数据库&#xff0c;常用作数据库、缓存或消息代理 二、数据类型 String List...

【课程】MyBatisPlus视频教程

MyBatis-Plus是一款非常强大的MyBatis增强工具包,只做增强不做改变. 在不用编写任何SQL语句的情况下即可以极其方便的实现单一、批量、分页等操作。 本套教程基于MyBatis-Plus新2.3版本,详细讲授&#xff1a;集成Mybatis-Plus、 通用CRUD、EntityWrapper条件构造器、ActiveRec…...

如何使用人工智能和ChatGPT来优化营销转化率

人工智能 &#xff08;AI&#xff09; 和营销的交集正在彻底改变企业与客户互动的方式&#xff0c;最终改变营销转化率。人工智能能够分析大量数据、理解模式和自动执行任务&#xff0c;它不仅是一项创新技术&#xff0c;而且是营销领域的根本性转变。这种转变允许更加个性化、…...

Ubuntu 22.04上构建libvirt源码错误解决

当在Ubuntu 22.04上构建libvirt源码时&#xff0c;可能会遇到一些错误。下面是一些常见错误及其解决方法&#xff1a; 1. 错误&#xff1a;Program xmllint’未找到或不可执行 解决方法&#xff1a;安装libxml2-utils sudo apt-get install libxml2-utils2. 错误&#xff1a…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...