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

AI助手开发实战:从资源索引到生产级系统搭建指南

1. 项目概述&#xff1a;一个为AI助手开发者准备的“藏宝图” 如果你正在开发一个AI助手应用&#xff0c;或者正打算将大语言模型的能力集成到你的产品里&#xff0c;那你大概率会遇到一个经典难题&#xff1a;面对市面上眼花缭乱的模型、API和工具&#xff0c;我到底该怎么选&…...

荣品RV1126 SDK编译避坑指南:从环境配置到分区调整,手把手解决常见编译错误

RV1126 SDK编译实战&#xff1a;从环境搭建到分区优化的全流程解决方案 1. 开发环境配置与初始化 RV1126开发环境的搭建是整个开发流程的第一步&#xff0c;也是后续所有工作的基础。一个稳定、高效的开发环境能够显著提升开发效率&#xff0c;减少不必要的错误。 首先需要确保…...

5分钟快速上手:使用res-downloader实现视频号批量下载的终极指南

5分钟快速上手&#xff1a;使用res-downloader实现视频号批量下载的终极指南 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader …...

Go语言AI编程助手SDK:提升Cursor代码理解与生成精准度

1. 项目概述&#xff1a;一个为AI编程而生的Go语言SDK如果你是一名Go语言开发者&#xff0c;同时又在深度使用Cursor这样的AI辅助编程工具&#xff0c;那么你很可能已经感受到了一个痛点&#xff1a;如何让AI更精准、更高效地理解你的代码库&#xff0c;并在此基础上进行智能操…...

Apache Burr:用状态机模式构建Python流式应用

1. 项目概述&#xff1a;一个用于构建流式应用的Python框架最近在折腾一些实时数据处理和模型推理的项目&#xff0c;从简单的日志分析到复杂的在线推荐&#xff0c;总感觉现有的工具链要么太重&#xff0c;要么太散。想要一个既能处理流式数据&#xff0c;又能轻松集成机器学习…...

从单一AI到智能体集群:构建模块化AI协作系统的核心原理与实践

1. 项目概述&#xff1a;当AI学会“开会”&#xff0c;一个开源智能体集群的诞生最近在GitHub上看到一个挺有意思的项目&#xff0c;叫daveshap/OpenAI_Agent_Swarm。光看名字&#xff0c;你可能会觉得这又是一个调用OpenAI API的简单封装库。但如果你点进去&#xff0c;花上十…...

ComfyUI-Manager终极指南:3步掌握AI绘画插件管理技巧

ComfyUI-Manager终极指南&#xff1a;3步掌握AI绘画插件管理技巧 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom…...

82.人工智能实战:大模型多环境治理怎么做?从开发、测试、预发到生产的 Prompt、模型、知识库隔离方案

人工智能实战:大模型多环境治理怎么做?从开发、测试、预发到生产的 Prompt、模型、知识库隔离方案 一、问题场景:测试环境改了 Prompt,结果生产回答变了 很多大模型项目早期只有一个环境: 一套 Prompt 一个知识库 一个模型地址 一个配置表开发、测试、运营都在同一套配置…...

【限时解密】ElevenLabs未文档化的/v1/text-to-speech/{voice_id}/with-timing接口:获取逐词时间戳+音素级对齐数据(仅剩3个Beta白名单通道)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs英文语音生成的核心能力与技术定位 ElevenLabs 是当前业界领先的 AI 语音合成平台&#xff0c;其英文语音生成能力建立在自研的端到端神经声学模型&#xff08;如 ElevenMultilingualV2&…...

CircuitPython串口调试与REPL交互:嵌入式开发的效率倍增器

1. 项目概述&#xff1a;为什么串口交互是嵌入式开发的“生命线”如果你刚开始接触CircuitPython或者任何基于微控制器的嵌入式开发&#xff0c;可能会觉得写代码、上传、看结果这个过程有点“黑盒”。代码上传后&#xff0c;板子默默运行&#xff0c;除了闪烁的LED&#xff0c…...