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

vue移动端实现vue-pdf在线预览与展示,并且解决页面汉字空白的问题

vue移动端实现pdf的页面在线预览展示,CMapReaderFactory可以解决文字不展示、空白问题

//1、安装依赖vue-pdf

npm install --save vue-pdf

//2、使用组件

<pdf v-for="i in numPages" ref="pdfs" :src="pdfUrl" :key="i" :page="i"></pdf>

//3、js文件

<script>
//引入pdf
important pdf from "vue-pdf";
important CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"
export default{components:{ pdf },data(){pdfUrl:"",numPages:[]},created(){this.getPdf();//调用方法},//获取pdfmethods:{//接口获取pdfgetPdf(){getPdf({fcn:3 }).then(res=>{if(res.code === '0'){ //需要转换为base64位this.pdfUrl =  "data:application/pdf;base64," + res.data.pdfUrl;this.pdfUrl = pdf.createLoadingTask(this.pdfUrl ,CMapReaderFactory);this.pdfUrl .promise.then(pdf => {this.$nextTick(() => {this.numPages = pdf.numPages}).catch((err) => {console.error('pdf 加载失败', err)})});}})}
}</script>

相关文章:

vue移动端实现vue-pdf在线预览与展示,并且解决页面汉字空白的问题

vue移动端实现pdf的页面在线预览展示&#xff0c;CMapReaderFactory可以解决文字不展示、空白问题 //1、安装依赖vue-pdf npm install --save vue-pdf//2、使用组件 <pdf v-for"i in numPages" ref"pdfs" :src"pdfUrl" :key"i" …...

代码随想录算法训练营第四十九天 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

打卡第49天&#xff0c;买卖股票系列了 今日任务 ● 121. 买卖股票的最佳时机 ● 122.买卖股票的最佳时机II 121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#x…...

【职场篇】程序员是否吃青春饭?程序员在35岁之后是否需要转行?

你们好 那么众所周知呢像空姐 还有模特这种职业呢 都是吃青春饭的 那么到了一定年龄呢 他们可能就不做这一行了 那么其实程序员这个职业呢 有的人认为他也是吃青春饭的 普遍人都认为呢 如果程序员做到35岁呢 没有转管理岗位 可能以后就没有什么前途了 可能就要考虑换别的行业了…...

( “树” 之 DFS) 226. 翻转二叉树 ——【Leetcode每日一题】

226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[…...

实验7---myBatis和Spring整合

实验七 myBatis和Spring整合 一、实验目的及任务 通过该实验&#xff0c;掌握mybatis和spring整合方法&#xff0c;掌握生成mapper实现类的两种生成方式。 二、实验环境及条件 主机操作系统为Win10&#xff0c;Tomcat,j2sdk1.6或以上版本。 三、实验实施步骤 略 四、实验报告内…...

DJ3-4 传输层(第四节课)

目录 一、TCP 概述 二、TCP 报文段的首部字段格式 三、TCP 往返时延的估计和超时 1. 估计往返时间 2. RTT 估计例子 3. 估计往返时间的偏差 4. 设置重传超时间隔 一、TCP 概述 全双工服务&#xff1a;允许在同一时间同一连接上&#xff0c;数据能够双向传输。注意&#…...

2023爱分析·商业智能应用解决方案市场厂商评估报告:数聚股份

目录 1. 研究范围定义 2. 商业智能应用解决方案市场分析 3. 厂商评估&#xff1a;数聚股份 4. 入选证书 1. 研究范围定义 商业智能&#xff08;BI&#xff09;是在实现数据集成和统一管理的基础上&#xff0c;利用数据存储和处理、分析与展示等技术&#xff0c;满足企…...

Kotlin方法执行顺序

方法的执行顺序 主构造函数init代码块次构造函数...

Ubuntu系统配置SonarQube + cppcheck + Jenkins

SonarQube1. postgresql安装及配置1.1 安装postgresql1.2 创建sonarqube用户1.3 设置数据库2. 安装sonarqube2.1 设置sonarqube2.2 修改sonarqube目录权限2.3 sonar.properties2.4 设置systemd管理sonarqube2.5 web3. 配置sonarscanner3.1 下载3.2 配置4. 配置cppcheck4.1 下载…...

Spring @Valid 不生效 问题记录

校验的简单使用&#xff1a; 在Spring中&#xff0c;我们可以使用Valid注解对实体进行校验。在Controller的方法参数中添加Valid注解&#xff0c;然后在实体类的属性上添加校验注解&#xff0c;例如NotNull、Size等。例如&#xff1a; RestController public class UserContr…...

五步教你如何注册一个公司网站

在今天的数字化时代&#xff0c;每个公司都需要一个强大的线上存在感。注册一个公司网站是实现这一目标的第一步。但是&#xff0c;对于许多公司而言&#xff0c;这个过程可能有些困难。因此&#xff0c;在本文中&#xff0c;我将介绍一个五步计划&#xff0c;让您轻松注册一个…...

CSS绘制气泡对话框样式(有边框)

1、效果图 2、难点和思路 难点&#xff1a;上面那个带边框的小三角不好实现 思路&#xff1a;画两个不同大小的div&#xff0c;使其基本重叠&#xff08;两个大小不同&#xff0c;不完全重叠&#xff0c;让红色的露出一点边边&#xff09;&#xff0c;让白色div放到最上层&…...

12款 Macmini A1347 跑 Stable Diffusion,20多分钟一张图

设备 2012款 Macmini A1347 12款 mini A1347 跑 Stable Diffusion 要20多分钟一张图 来欣赏一下20分钟画出来的图片 a black and white cat 环境&#xff1a;...

流量控制和拥塞控制的原理和区别

文章目录先介绍下重传机制和滑动窗口超时重传快速重传SACK方法Duplicate SACK滑动窗口发送方缓存窗口接收方缓存窗口流量控制小结拥塞控制慢开始算法拥塞避免算法快重传快恢复先介绍下重传机制和滑动窗口 超时重传 重传机制的其中一个方式&#xff0c;就是发送数据时&#xf…...

金融机构断卡行动中外部数据

“断卡行动”&#xff0c;近几年逐渐走入大众视野&#xff0c;是国家在从根源上整治网络及金融犯罪层面的重大举措。相信很多朋友在日常生活中已经有所体会了&#xff0c;比如我们在办理电话卡及银行卡的时候要经过很多审核机制&#xff0c;同时发卡后还会限制卡片的一些转账等…...

携程总监的单元测试是怎么样写的?

大家都知道&#xff0c;开发软件的时候为代码编写单元测试是很好的。但实际上&#xff0c;光有测试还不够&#xff0c;还要编写好的测试&#xff0c;这同样重要。 要做到这一点&#xff0c;考虑遵循一些固执的原则&#xff0c;对测试代码给予一些关爱&#xff1a; 1. 保持测试…...

算法每日一题:P2089 烤鸡 -DFS练习

&#x1f61a;一个不甘平凡的普通人&#xff0c;日更算法学习和打卡&#xff0c;期待您的关注和认可&#xff0c;陪您一起学习打卡&#xff01;&#xff01;&#xff01;&#x1f618;&#x1f618;&#x1f618; &#x1f917;专栏&#xff1a;每日算法学习 &#x1f4ac;个人…...

Spring中的循环依赖是什么?如何解决它?

循环依赖是指两个或多个Bean之间相互依赖&#xff0c;导致它们无法被正确地初始化。在Spring中&#xff0c;当两个或多个Bean之间存在循环依赖时&#xff0c;Spring容器无法决定哪个Bean应该先初始化&#xff0c;因此会抛出BeanCurrentlyInCreationException异常&#xff0c;从…...

不良事件报告系统源码,PHP医院安全(不良)事件报告系统源码,在大型医院稳定运行多年

PHP医院安全&#xff08;不良&#xff09;事件报告系统源码&#xff0c;不良事件系统源码&#xff0c;有演示&#xff0c;在大型医院稳定运行多年。 系统技术说明 技术架构&#xff1a;前后端分离&#xff0c;仓储模式 开发语言&#xff1a;PHP 开发工具&#xff1a;VSco…...

MySQL 查询常用操作(3)——排序 order by

MySQL中常用的查询操作&#xff0c;首先是能直接从表中直接取出数据&#xff0c;接着能对查询结果做一些简单的处理&#xff0c;比如去重等&#xff0c;然后是根据条件查询数据&#xff0c;包括精准查询、模糊查询以及按照数据的某个范围或者指定多个指标进行查询&#xff0c;值…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...