js实现在线预览(PC)图片、pdf、excel、docx

js实现图片预览

参考:添加链接描述

  1. 图片预览
    本来用的是element-plus自带的组件el-image,但是去不掉缩略图,所以换成了el-imag-viewer组件(图片可拖拽),由于用的vite没有require方法,需要自己处理一下图片才能显示。
    参考1:巧用element-ui自带隐藏的图片查看器el-image-viewer浏览图片(附兼容IE骚操作)
    参考2:vue3中使用require导入图片

  2. pdf预览
    用iframe自带的:src=“url”属性显示不出来pdf,未找到原因,后面绑了一个ref=“pdfRef”,使用pdfRef.value.setAttribute(‘src’,url)可以正常显示出pdf文件。
    参考:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java分布式全局唯一Id:id生成要求、为什么不用UUID、生成分布式雪花Id

文章目录 为什么需要分布式全局唯一IdId生成规则部分硬性要求Id生成系统的可用性要求为什么不用UUID生成分布式雪花IdPOM代码示例API生成18位雪花Id生成13位雪花Id 为什么需要分布式全局唯一Id 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识。 如在美团点评的金…

23史上最全版---SQL注入详解

漏洞原因 一些概念: SQL:用于数据库中的标准数据查询语言。 web分为前端和后端,前端负责进行展示,后端负责处理来自前端的请求并提供前端展示的资源。 而数据库就是存储资源的地方。 而服务器获取数据的方法就是使用SQL语句进…

【开源】基于Vue+SpringBoot的数据可视化的智慧河南大屏

项目编号: S 059 ,文末获取源码。 \color{red}{项目编号:S059,文末获取源码。} 项目编号:S059,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 数据模块 …

Linux: Ftrace: function_graph 里面有irq处理的函数

Linux: ftrace: echo function_graph &#xff1e; current_tracer 在做这个函数调用图的时候&#xff0c;会发现这个函数调用非常的大&#xff0c;有些是irq的处理函数&#xff0c;也放在其中&#xff0c;前后有标记&#xff1a; Line 18702: 1) < | Line 22335: 1) …

AntV和AntD之间的区别与联系

前言&#xff1a;最近在调研前端的一些框架&#xff0c;技术栈主要是用react&#xff0c;所以找到了2个十分相似解决方案&#xff0c;拿来对比一下&#xff08;antd和antv都是基于react&#xff09; antd对比antv antd antv 解决方案企业级 UI 设计语言数据可视化解决方案提供…

springboot使用Validator参数校验

引用&#xff1a;https://www.cnblogs.com/yang-yz/p/17576507.html Validator校验框架遵循了 jsr-303验证规范(参数校验规范) JSR : java specification requests 为了解决开发人员在校验参数方面&#xff0c;少写代码 依赖&#xff1a; <dependency><groupId>o…

《数字中台建设总体方案》

《数字中台建设总体方案》 制定数字中台战略规划&#xff1a;制定符合企业实际情况的数字中台战略规划&#xff0c;明确建设目标、重点任务和时间表。确定数字中台架构&#xff1a;根据企业业务需求和特点&#xff0c;确定数字中台的架构&#xff0c;包括技术架构、应用架构和数…

20 动态规划解最长回文子序列

问题描述&#xff1a;给定一个字符串s&#xff0c;找到其中最长的回文子序列&#xff0c;并返回该序列的长度&#xff0c;可以假设s的最大长度为1000&#xff1b; 暴力解法&#xff1a;直接两个循环&#xff0c;遍历所有子串&#xff0c;并统计子串的最大长度&#xff1b; pu…

ftp的服务安装配置

安装 yum install -y vsftpd # 是否安装成功 rpm -qa | grep vsftpd # 是否开机启动 systemctl list-unit-files | grep vsftpd # 开机启动 systemctl enable vsftpd.service # ftp端口 netstat -antup | grep ftp # 状态 service vsftpd status service vsftpd start service…

java项目日常运维需要的文档资料

一、前言 java项目开发完成&#xff0c;部署上线&#xff0c;进入项目运维阶段&#xff0c;日常工作需要准备哪些资料和文档?当项目上线后&#xff0c;运行一段时间&#xff0c;或多或少会遇到一些运维上的问题&#xff0c;比如服务器磁盘饱满&#xff0c;服务器CPU&#xff0…

如何理解微服务体系结构中的 CQRS

本文翻译自 How To Understand CQRS In Microservices Architecture&#xff0c;原作者 OLEKSII。 问题描述 在典型的软件应用程序中&#xff0c;有一个负责写入和读取操作的数据存储。通常&#xff0c;应用程序实现一些 CRUD 操作&#xff0c;并且非常简单。你存储了一些东西并…

一文读懂中间件

前言&#xff1a;在程序猿的日常工作中&#xff0c; 经常会提到中间件&#xff0c;然而大家对中间件的理解并不一致&#xff0c;导致了一些不必要的分歧和误解。“中间件”一词被用来描述各种各样的软件产品&#xff0c;在不同文献中有着许多不同的中间件定义&#xff0c;包括操…

JS:绘制日历,结合vue3食用

思路解析&#xff1a;假设展示2023年12月的日历 ①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay ②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay ③根据自己的需求在startDay和lastDay的前后补0&#xff0c…

Hadoop学习笔记(HDP)-Part.13 安装Ranger

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

粒子群优化算法的实践

粒子群优化算法的实践 flyfish 粒子群优化算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;或者粒子群算法 红叉的地方是理想之地&#xff0c;这些粒子都想去&#xff0c;总结8个字是信息共享&#xff0c;个人决策。 上完图之后&#xff0c;上代码&a…

Vue JAVA开发常用模板

1.VsCode添加模板 左下角设置》用户代码片段 新建全局代码片段》将模板粘贴仅文件&#xff08;prefix用于指定触发关键字&#xff09; 添加成功过后输入配置的关键字即可使用 1.1 vue2模板 {// Example:"Print to console": {"prefix": "vue2",…

vue实现数字千分位格式化 如6,383,993,037,937.463

1.封装文件&#xff1a;numberToCurrency.js /**实现数字千分位格式化 如6,383,993,037,937.463 */ export function numberToCurrencyNo(value) {if (!value) return 0// 获取整数部分const intPart Math.trunc(value)// 整数部分处理&#xff0c;增加,const intPartFormat …

使用 Go Modules 管理依赖:简明教程

一、GoLang 中包的介绍和定义 包&#xff08;package&#xff09;是多个 Go 源码的集合&#xff0c;是一种高级的代码复用方案Go 语言为我们提供了很多内置包&#xff0c;如 fmt、strconv、strings、sort、errors、times、encoding/json、os、io 等Golang 中的包可以分为三种&…

C++ 实现的Ping类的封装

Ping 使用 Internet 控制消息协议&#xff08;ICMP&#xff09;来测试主机之间的连接。当用户发送一个 ping 请求时&#xff0c;则对应的发送一个 ICMP Echo 请求消息到目标主机&#xff0c;并等待目标主机回复一个 ICMP Echo 回应消息。如果目标主机接收到请求并且网络连接正常…

SpringCloud+Nacos项目集成Seata分布式事务

上一篇&#xff1a; 《 Seata-分布式事务介绍 》&#xff1a; 简单介绍了分布式事务的实现方式&#xff0c;以及详细讲述了Seata-AT模式的两阶段提交步骤流程。 完整示例项目代码地址&#xff1a; https://gitee.com/cnyunze/yz-seata.git Seata快速上手 安装教程Seata Server…