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

vue预览PDF文件的几种方法

1.使用iframe标签预览PDF文件

1.1页面结构 html

 <iframe:src="fileUrl"id="iframeBox"ref="iframeRef"frameborder="0"style="width: 100%; height: 800px"></iframe>

1.2 js代码

export default {data() {return {fileUrl: "test.pdf", //文件路径};}
};

2.使用embed标签预览PDF文件

2.1页面结构 html

<embed:src="fileUrl"type="application/pdf"width="100%"height="800px"/>

2.2 js代码

export default {data() {return {fileUrl: "test.pdf", //文件路径};}
};

3.使用vue-pdf插件预览PDF文件

3.1 安装依赖

npm install vue-pdf

3.2 注册并引入组件

import pdf from "vue-pdf";
components: {pdf,},

3.3 使用组件展示PDF文件

 //html<divclass="pdf-box"><div class="pdf-tab"><div class="pdf-tab-button"><div class="btn-def btn-pre" @click.stop="prePage">上一页</div><div class="btn-def btn-next" @click.stop="nextPage">下一页</div><div class="btn-def" @click.stop="clock">顺时针</div><div class="btn-def" @click.stop="counterClock">逆时针</div></div><div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div><pdfref="pdf"class="pdf-preview":src="fileUrl":page="pageNum":rotate="pageRotate":style="{ height: customHeight + 'px' }"@num-pages="pageTotalNum = $event"@link-clicked="page = $event"></pdf></div>//jsexport default {data() {return {fileUrl: "", //文件路径pageNum: 1,pageTotalNum: 1,pageRotate: 0,customHeight: 400, // 自定义的PDF预览框高度};},components: {pdf,},computed: {//解决预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的问题pdfSrc() {//处理pdfUrl返回let src = pdf.createLoadingTask({url: this.fileUrl,//引入pdf.js字体,templcMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",cMapPacked: true,});return src;},},methods: {//上一页prePage() {var p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;},// 下一页nextPage() {var p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;},//顺时针clock() {this.pageRotate += 90;},//逆时针counterClock() {this.pageRotate -= 90;}  },
};
//css
.pdf-box {width: 100%;height: 800px;.pdf-tab {width: 100%;height: 800px;display: flex;flex-direction: column;align-items: center;.pdf-tab-button {width: 100%;display: flex;align-items: center;justify-content: space-around;.btn-def {width: 98px;height: 40px;line-height: 40px;text-align: center;color: #fff;background-color: #409eff;border-color: #409eff;border-radius: 5px;font-size: 18px;}}.page-size {width: 100%;display: flex;align-items: center;justify-content: center;font-size: 18px;}}
}

相关文章:

vue预览PDF文件的几种方法

1.使用iframe标签预览PDF文件 1.1页面结构 html <iframe:src"fileUrl"id"iframeBox"ref"iframeRef"frameborder"0"style"width: 100%; height: 800px"></iframe>1.2 js代码 export default {data() {return {…...

深度学习入门到放弃系列 - 阿里云人工智能平台PAI部署开源大模型chatglm3

通过深度学习入门到放弃系列 - 魔搭社区完成开源大模型部署调用 &#xff0c;大概掌握了开源模型的部署调用&#xff0c;但是魔搭社区有一个弊端&#xff0c;关闭实例后数据基本上就丢了&#xff0c;本地的电脑无法满足大模型的配置&#xff0c;就需要去租用一些高性价比的GPU机…...

GPT-4o,AI实时视频通话丝滑如人类,Plus功能免费可用

不开玩笑&#xff0c;电影《她》真的来了。 OpenAI最新旗舰大模型GPT-4o&#xff0c;不仅免费可用&#xff0c;能力更是横跨听、看、说&#xff0c;丝滑流畅毫无延迟&#xff0c;就像在打一个视频电话。 现场直播的效果更是炸裂&#xff1a; 它能感受到你的呼吸节奏&#xf…...

【优选算法】——Leetcode——202—— 快乐数

目录 1.题目 2. 题⽬分析: 3.简单证明&#xff1a; 4. 解法&#xff08;快慢指针&#xff09;&#xff1a; 算法思路&#xff1a; 补充知识&#xff1a;如何求⼀个数n每个位置上的数字的平⽅和。 总结概括 5.代码实现 1.C语言 2.C 1.题目 202. 快乐数 编写一个算法来…...

华大基因CEPO-尹烨说学习与生活

怎么去面对生活和事业中的不确定性&#xff1f; 尹烨说&#xff0c;人类能够对抗不确定性的唯一的办法是&#xff0c;去让自己充电。 主持人问他&#xff0c;“和你同年的也有很多人&#xff0c;他们也可能也在学习&#xff0c;你怎么就能够脱颖而出呢&#xff1f;” 他说&am…...

C#中json数据序列化和反序列化的最简单方法(C#对象和字符串的相互转换)

文章目录 将C#对象转换为json字符串Newtonsoft模块的安装用Newtonsoft将对象转换为json字符串 将json字符串转换为C#对象 将C#对象转换为json字符串 本介绍将基于C#中的第三方库Newtonsoft进行&#xff0c;因此将分为Newtonsoft模块的安装和使用两部分。该模块的优势在于只需要…...

logback 日志脱敏

工具类 CustomLogbackPatternLayoutEncoder.java import ch.qos.logback.classic.encoder.PatternLayoutEncoder;public class CustomLogbackPatternLayoutEncoder extends PatternLayoutEncoder {/*** 正则替换规则*/private LogbackReplaces replaces;/*** 使用自定义 MyLog…...

element-ui的表单中,输入框、级联选择器的长度设置

使用<el-col>控制输入框的长度 <el-form-item label"姓名" label-width"80px"><el-col :span"15"><el-input v-model"form.name" autocomplete"off"></el-input></el-col></el-form…...

深入了解 npm:Node.js 包管理工具详解

文章目录 一、npm 基本概念1.1 什么是 npm&#xff1f;1.2 package.json 文件 二、npm 常用命令2.1 初始化项目2.2 安装依赖2.2.1 安装单个包2.2.2 全局安装包2.2.3 安装开发依赖 2.3 移除依赖2.4 更新依赖2.5 查看已安装的包2.6 发布包 三、npm 高级用法3.1 使用 npm scripts3…...

记一次跨域问题

线上跨域问题&#xff0c;在自己配置确认没问题下&#xff0c;要及时找运维看看是不是nginx配置问题。 两个方面&#xff1a; 项目代码 nginx配置 SpringBoot 解决跨域问题的 5 种方案&#xff01; SpringBoot解决CORS跨域问题 SpringBoot-实现CORS跨域原理及解决方案...

第9章 负载均衡集群日常维护

一个设计良好的高可用负载均衡集群&#xff0c;交付使用以后并不能一劳永逸。欲使其高效、稳定、持续对外服务&#xff0c;日常维护必不可少。 对于高可用负载均衡集群来说&#xff0c;有两种类型的维护形式&#xff1a;常规性维护与突发性维护。突发性维护一般指故障处理&…...

鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc(上)进程通讯内容

基本概念 LiteIPC是OpenHarmony LiteOS-A内核提供的一种新型IPC&#xff08;Inter-Process Communication&#xff0c;即进程间通信&#xff09;机制&#xff0c;为轻量级进程间通信组件&#xff0c;为面向服务的系统服务框架提供进程间通信能力&#xff0c;分为内核实现和用户…...

Charger之三动态电源路径管理(DPPM)

-----本文简介----- 主要内容包括&#xff1a; 领资料&#xff1a;点下方↓名片关注回复&#xff1a;粉丝群 硬件之路学习笔记公众号 Charger的动态电源路径管理&#xff08;DPPM&#xff09; 前篇内容&#xff1a;①电池管理IC&#xff08;Charger&#xff09;了解一下&…...

大数据模型的选择与安装

大数据模型的选择和安装是一个复杂的过程&#xff0c;涉及多个因素&#xff0c;包括模型的通用能力、特定任务的性能、数据效率、评估完整性、成本以及部署的硬件和软件环境。以下是一些关于大数据模型选择与安装的考虑因素和步骤&#xff1a; 选择大数据模型的考虑因素&#…...

React 之 lazy(延迟加载)(十七)

lazy 能够让你在组件第一次被渲染之前延迟加载组件的代码。 在组件外部调用 lazy&#xff0c;以声明一个懒加载的 React 组件: import { lazy } from react;const MarkdownPreview lazy(() > import(./MarkdownPreview.js)); 配合 Suspense 实现懒加载组件 //App.js imp…...

Node.js -- 会话控制

文章目录 1. 会话介绍2. cookie 相关操作2.1 cookie 设置2.2 删除 cookie2.3 获取cookie 3. session 相关操作4. cookie 和session 的区别5. 补充知识 -- CSRF跨站请求伪造6. token 1. 会话介绍 所谓会话控制就是对会话进行控制 HTTP是一种无状态的协议&#xff0c;它没有办法…...

做抖店不能踩的几个坑,新手要照做,老玩家要听劝~

我是王路飞。 很多人都说抖店的运营很简单&#xff0c;选选品、对接一下达人&#xff0c;就可以坐等店铺出单了。 这话骗骗还没开店的小白也就得了&#xff0c;但凡做抖店超过一个月的&#xff0c;都不会相信这句话。 细心耐心是做抖店最基本的态度。 拿到一个好结果的前提…...

【Kibana】快速上手Kibana平台(KQL)

文章目录 快速使用Kibana平台常用查询语句KQL基本查询覆合查询模糊查询 目前市面上大部分的公司的日志系统都是使用ELK系统&#xff0c;因此我们进行工作必须得掌握Kibana平台的基本使用&#xff0c;这里主要说明怎么“快速使用Kibana平台”以及记录一些常用的“KQL语言”。 快…...

全方位入门git-慕课网 笔记

目录 【上传github忽略某些文件】【配置用户名和邮箱】【想要删除不需要的文件时如何进行操作】【想要给文件重命名如何操作】【想要移动文件到其他位置时如何操作】【文件有变化时&#xff0c;如何查看前后变化】【操作失误的情况下如何实现一键还原】【不再追踪时如何实现撤销…...

使用 Docker 部署 TaleBook 私人书籍管理系统

1&#xff09;项目介绍 GitHub&#xff1a;https://github.com/talebook/talebook Talebook 是一个简洁但强大的私人书籍管理系统。它基于 Calibre 项目构建&#xff0c;具备书籍管理、在线阅读与推送、用户管理、SSO 登录、从百度/豆瓣拉取书籍信息等功能。 友情提醒&#x…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...