当前位置: 首页 > 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…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...