js实现在线预览(PC)图片(jpg、png)、pdf、excel(xlsx)、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文件。
    参考:vue 在线预览 word ,Excel,pdf,图片 数据流 内网文件流 亲测有效(word 目前支持docx文件以及doc文件(doc需要后端处理))

  3. Excel预览(Docx预览一样的)
    xlsx插件无问题,但是需要将arraybuffer转成文件流再做处理才可以,我没用XLSX插件,用的是vue-office插件(没有使用fetch,用的常规的post请求方式,则需要将arraybuffer转成文件流才能显示出来,对了,不能忘记设置样式高度,否则也显示不出来)。
    注意:vue-office插件只能预览xlsx格式的excel表格,不能预览xls格式的。而且有默认展示的行、列数,如果想展示更多需要自己设置,表格的宽高目前也不能自适应,看源代码有提供一个方法transformData,但需要循环遍历才能修改宽高(且宽高的值只能接收数字形式)。具体可见源码:vue-office插件属性使用说明文档
    安装vue-office插件:npm install @vue-office/excel
    xlsx插件预览excel参考:vue 在线预览 word ,Excel,pdf,图片 数据流 内网文件流 亲测有效(word 目前支持docx文件以及doc文件(doc需要后端处理))
    参考:上传文件预览
    参考npm插件文档:添加链接描述

  4. 将arraybuffer转成文件流

	let fileReader = new FileReader()fileReader.readAsArrayBuffer(file) // file就是接收到的arraybufferfileReader.onload =  () => {this.src = fileReader.result}

参考:Blob,ArrayBuffer,File,FileReader,Buffer,TypeArray 的作用和区别
参考:二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别

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

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

相关文章

c++新经典模板与泛型编程:const修饰符的移除与增加

const修饰符的移除 让你来写移除const修饰符&#xff0c;你会怎么样来写&#xff1f; &#x1f602;&#x1f602;trait类模板&#xff0c;如下 #include <iostream>// 泛化版本 template<typename T> struct RemoveConst {using type T; };// 特化版本 template…

docker-compose 常用命令和指令

目录 1. 概要 2. 常用的docker-compose命令 2.1、image 2.2、build 2.3、command 2.4、links 2.5、external_links 2.6、ports 1.7、expose 1.8、volumes 1.9、volumes_from 1.10、environment 1.11、networks 1. 概要 默认的模板文件是 docker-compose.yml&…

阿里云(云服务器)上搭建项目部署环境

目录 安装docker docker安装MySQL5.7.37 安装MySQL 方式一&#xff1a;docker中MySQL时区调整 方式二&#xff1a;docker中MySQL时区调整 docker安装MySQL8.0.27 docker安装redis5.0.14 云服务器上安装jdk1.8 安装docker 1、先卸载docker&#xff0c;因为有一些服务器…

西南科技大学C++程序设计实验十(函数模板与类模板)

一、实验目的 1. 掌握函数模板与类模板; 2. 掌握数组类、链表类等线性群体数据类型定义与使用; 二、实验任务 1. 分析完善以下程序,理解模板类的使用: (1)补充类模板声明语句。 (2)创建不同类型的类对象,使用时明确其数据类型? _template<typename T>__…

c-语言->数据在内存的存储

系列文章目录 文章目录 系列文章目录前言 前言 目的&#xff1a;学习整数在内存的储存&#xff0c;什么是大小端&#xff0c;浮点数的储存。 1. 整数在内存中的存储 在讲解操作符的时候&#xff0c;我们就讲过了下⾯的内容&#xff1a; 整数的2进制表⽰⽅法有三种&#xff0…

设计模式之观察者模式(主题对象发生变化,通知各个观察者)

当涉及到电商场景时&#xff0c;观察者模式可以用于处理多种情况&#xff0c;比如订单状态更新、库存变化、用户积分变化等。下面是一个简化的订单状态更新的观察者模式案例。 1.首先&#xff0c;定义一个主题接口 OrderSubject /*** Description:主题&#xff0c;用于管理观察…

基于Java会员管理系统

基于Java会员管理系统 功能需求 1、会员信息管理&#xff1a;该系统需要提供会员信息管理功能&#xff0c;包括会员的姓名、性别、年龄、联系方式等基本信息。同时&#xff0c;还需要提供会员的消费记录、积分、优惠券等信息的管理。 2、会员注册和登录&#xff1a;系统需要…

动手学习深度学习-跟李沐学AI-自学笔记(3)

一、深度学习硬件-CPU和GPU 芯片&#xff1a;Intel or AMD 内存&#xff1a;DDR4 显卡&#xff1a;nVidia 芯片可以和GPU与内存通信 GPU不能和内存通信 1. CPU 能算出每一秒能运算的浮点运算数&#xff08;大概0.15左右&#xff09; 1.1 提升CPU利用率 1.1.1 提升缓存…

自动驾驶学习笔记(十六)——目标跟踪

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo 社区开发者圆桌会》免费报名—>传送门 文章目录 前言 匹配关联 轨迹记录 状态预测 总结 前…

【文件上传系列】No.2 秒传(原生前端 + Node 后端)

上一篇文章 【文件上传系列】No.1 大文件分片、进度图展示&#xff08;原生前端 Node 后端 & Koa&#xff09; 秒传效果展示 秒传思路 整理的思路是&#xff1a;根据文件的二进制内容生成 Hash 值&#xff0c;然后去服务器里找&#xff0c;如果找到了&#xff0c;说明已经…

【智能家居】七、人脸识别 翔云平台编程使用(编译openSSL支持libcurl的https访问、安装SSL依赖库openSSL)

一、翔云 人工智能开放平台 API文档开发示例下载 二、编译openSSL支持libcurl的https访问 安装SSL依赖库openSSL(使用工具wget)libcurl库重新配置&#xff0c;编译&#xff0c;安装运行&#xff08;运行需添加动态库为环境变量&#xff09; 三、编程实现人脸识别 四、Base6…

12.4每日一题(备战蓝桥杯顺序结构程序设计)

12.4每日一题&#xff08;备战蓝桥杯顺序结构程序设计&#xff09; 题目1000: 【入门】AB Problem题目描述输入输出样例输入样例输出来源/分类 题解 1000: 【入门】AB Problem题目 2124: 计算(ab)c的值题目描述输入输出样例输入样例输出来源/分类 题解 2124: 计算(ab)c的值题目…

UML案例分析

首先需要花大约20分钟来思考解决这个问题&#xff0c;如果对问题不是很熟悉&#xff0c;也可以在完成题目之后&#xff0c;找相关的资料翻阅&#xff08;例如看UML类图的基本情况&#xff0c;UML状态图的基本情况&#xff0c;然后结合这些信息 做一个自我评价&#xff0c;看这个…

matlab 最小二乘拟合空间直线(方法三)

目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示四、相关链接博客长期更新,GPT与爬虫自重,你也未必能爬到最新版本。 一、算法原理 1、算法过程 空间直线的点向式方程为:

poe与chatgpt那个功能更强大

在当前的人工智能领域&#xff0c;Poe Al Chat以其卓越的聊天能力和实用的功能&#xff0c;受到了大家的广泛关注和喜爱。本文好为您个绍Poe Al Chat的功能&#xff0c;以及我们国内用户如何进行充值订阅。Poe Al Chat是一个基于OpenAl的GPT模型开发的人工智能聊天工具。它能够…

基于Springboot的校园失物招领系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的校园失物招领系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

Docker镜像和容器的简单操作

1.镜像管理 搜索镜像&#xff1a; 这种方法只能用于官方镜像库 搜索基于 centos 操作系统的镜像 # docker search centos 按星级搜索镜像&#xff1a; 查找 star 数至少为 100 的镜像&#xff0c;默认不加 s 选项找出所有相关 ubuntu 镜像&#xf…

为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)

首先&#xff0c;需要知道的是为 setTimeout 或 setInterval 提供一个字符串作为第一个参数&#xff0c;这本身并不是一个错误。它是完全合法的JavaScript代码。这里的问题更多的是性能和效率的问题。很少有人解释的是&#xff0c;如果你把字符串作为setTimeout或setInterval的…

46.0/基本的 HTML 标签(详细版)

目录 46.1 标题 46.2 段落 Paragraph, 46.3 换行 46.4 HTML 注释 46.5 空格 46.6 水平线 46.7 控制网页中文字的标记 46.8 居中标记 46.9 预格式化文本 46.10 网页背景 46.1 标题 标记解释 标题使用 <h1> 至 <h6> 标签进行定义。 <h1> 定…

uniapp如何制作一个收缩通讯录(布局篇)

html&#xff1a; <view class"search"><view class"search_padding"><u-search change"search" placeholder"请输入成员名称" v-model"keyword"></u-search></view></view> <view…