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

纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)

纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)

  • 一.安装依赖
  • 二、主要代码

预览效果链接: https://github.com/501351981/vue-office
插件文档链接: https://501351981.github.io/vue-office/examples/docs/config/

一.安装依赖

//docx文档预览组件
npm install @vue-office/docx vue-demi//excel文档预览组件
npm install @vue-office/excel vue-demi//pdf文档预览组件
npm install @vue-office/pdf vue-demi
//html生成图片
npm install html2canvas

二、主要代码

<template><div class="index"><div class="select-file"><input id="input" type="file" /></div><div class="file-preview" ref="excelContainer"><!-- <VueOfficeDocx v-if="src" style="height: 600px;" :src="src" /> --><VueOfficeExcel class="file-content" v-if="src" style="height: 1280px" :src="src" /><!-- <VueOfficePdf v-if="src" style="height: 600px" :src="src" /> --></div><button @click="generateImage">Generate Image</button></div>
</template>
<script>
// import VueOfficeDocx from '@vue-office/docx'
// import '@vue-office/docx/lib/index.css'import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'// import VueOfficePdf from '@vue-office/pdf'import html2canvas from 'html2canvas'
export default {data() {return {src: '',}},components: {// VueOfficeDocx,VueOfficeExcel,//  VueOfficePdf},mounted() {this.addInputEventListener()},methods: {/*** application/msword;charset=utf-8* application/pdf;charset=utf-8* application/vnd.ms-excel*/addInputEventListener() {const input = document.querySelector('#input')input.addEventListener('input', e => {const fileBlob = e.target.files[0]// 第一种方式(通过window.URL.createObjectURL将Blob文件流转为一个路径)this.src = window.URL.createObjectURL(new Blob([fileBlob]))// 第二种方式(转为base64编码)const fileReader = new FileReader()fileReader.readAsDataURL(fileBlob)fileReader.onload = e => {this.src = e.target.result}// 第三种方式(获取到buffer)fileBlob.arrayBuffer().then(buffer => {this.src = buffer})})},generateImage() {const element = this.$refs.excelContainerhtml2canvas(element, { useCORS: true }).then(canvas => {const image = canvas.toDataURL('image/png')const link = document.createElement('a')link.href = imagelink.download = 'excel_image.png'link.click()}).catch(error => {console.error('Error generating image:', error)})},},
}
</script>
<style scoped>
.index {width: 100%;height: 100%;padding: 15px;box-sizing: border-box;
}
.select-file {width: 100%;height: 35px;border-bottom: 1px dashed #ccc;margin-bottom: 15px;
}
.file-preview {width: 100%;height: 100%;border: 1px dashed #007acc;
}
</style>

在这里插入图片描述

没了~

链接: https://www.jb51.net/article/278400.htm

相关文章:

纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)

纯前端上传word,xlsx,ppt,在前端预览并下载成图片&#xff08;预览效果可以&#xff0c;下载图片效果不太理想&#xff09; 一.安装依赖二、主要代码 预览效果链接: https://github.com/501351981/vue-office 插件文档链接: https://501351981.github.io/vue-office/examples/d…...

WPS Office找回丢失的工作文件

WPS office恢复办公文件方法有两种. 1.通过备份中心可以查看近期编辑 office 历史版本进行恢复. 2.缓存备份目录可以查看编辑过的 office 文件的历史版本&#xff0c;新版本 WPS 可以在配置工具-备份清理找到&#xff0c;2019 年旧版本 WPS 可以在新建任意 office 文件-文件-选…...

【MATLAB源码-第106期】基于matlab的SAR雷达系统仿真,实现雷达目标跟踪功能,使用卡尔曼滤波算法。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 雷达系统参数设定&#xff1a; - 工作频率&#xff1a;选择一个适合的工作频率&#xff0c;例如X波段&#xff08;8-12 GHz&#xff09;。 - 脉冲重复频率&#xff08;PRF&#xff09;&#xff1a;设定一个适当的PR…...

【机器学习】scikit-learn机器学习中随机数种子的应用与重现

随机数种子是为了能重现某一次实验生成的随机数而设立的&#xff0c;相同的随机数种子下&#xff0c;生成的随机数序列一样 一、随机数种子基础应用 在python中简单运用随机数种子 import random random.seed(1) a random.sample(range(0,100),10) random.seed(2) b random.…...

欧洲编程语言四巨头

从左往右&#xff0c;依次是 尼克劳斯沃斯 (Niklaus Wirth)&#xff0c;迪杰斯特拉&#xff08;Edsger Dijkstra&#xff09;&#xff0c;霍尔&#xff08;Tony Hoare&#xff09; 尼克劳斯沃斯 (Niklaus Wirth) 瑞士人&#xff0c;一生发明了8种编程语言&#xff0c;其中最著…...

检查密码(字符串)

本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用户设置的密码必须由不少于6个字符组成&#xff0c;并且只能有英文字母、数字和小数点 .&#xff0c;还必须既有字母也有数字。 输入格式&#xff1a; 输入第一行给出一个正整数 N&#xff08;≤…...

Pointnet++改进注意力机制系列:全网首发LSKAttention大核卷积注意力机制 |即插即用,实现有效涨点

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入LSKAttention注意力机制,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二...

C++常用库函数大小写转换

在我们在编写代码时大小写转换是基础知识&#xff0c;这篇博客将通过介绍C常用库函数来回顾和学习一种不一样的大小写转换 目录 一、islower/isupper函数二、tolower/toupper函数三、ASCLL码 一、islower/isupper函数 islower和isupper函数是C标准库中的字符分类函数&#xff…...

基于springboot+html的汽车销售管理系统设计与实现

基于springboothtml的汽车销售管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 前言 随着汽车市场的快速发展&#xff0c;汽车销售企业面临着越来越大的管理…...

pyside6 界面美化库的使用

使用qt_material库&#xff0c;在库中进行导入后&#xff0c;直接使用库提供的皮肤即可非常简单 example&#xff1a; # -*- coding: utf-8 -*- # 使用例子 import sys # from PySide6 import QtWidgets # from PySide2 import QtWidgets from PySide6 import QtWidgets from…...

通过Docker搭建4节点的Tendermint集群

Tendermint&#xff1a;0.34.24 Docker&#xff1a;20.10.21 Docker-Compose&#xff1a;2.20.2 OS&#xff1a;Ubuntu 20.04 Go&#xff1a;1.19.2 Linux/amd64 1 修改Tendermint源码 1.1 修改监听IP 为什么要将127.0.1修改成0.0.0.0呢&#xff1f;因为容器内的服务如果是以…...

element plus 表格组件怎样在表格中显示图片

官方给的&#xff1a; <el-table-column label"Thumbnail" width"180"><template #default"scope"><div style"display: flex; align-items: center"><el-image :preview-src-list"srcList"/><…...

cad快速看图软件免费版(手机在线cad快速看图)

cad快速看图软件免费版(手机在线cad快速看图) 很多机械设计师日常工作过程中涉及到多种格式的cad图纸&#xff0c;cad图纸大多都需要cad设计软件才能打开&#xff0c;然而很多小伙伴并没有下载相应的cad设计软件&#xff0c;这种情况下如何进行cad快速看图呢&#xff1f; 今天…...

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 2. lable控件的 tips 实现方法1 &#xff1a;代码…...

.NET 8.0 本机 AOT

在软件开发领域&#xff0c;优化性能和简化效率仍然至关重要。.NET 平台二十年来不断创新&#xff0c;为开发人员提供了构建弹性且高效的软件解决方案的基础架构。 与本机 AOT&#xff08;提前&#xff09;编译相结合&#xff0c;取得了显着的进步。本文深入研究.NET Native AO…...

phpcms v9未审核推荐信息出现在推荐列表中【BUG修复】

修改文件&#xff1a;phpcms/modules/content/class/content_tag.class.php 调整过的方法&#xff1a; public function __construct() {$this->db pc_base::load_model(content_model);$this->position pc_base::load_model(position_model);$this->position_da…...

Linux第20步_在虚拟机上安装“Visual Studio Code”

1、双击windows系统桌面上的“FileZilla Client.exe”&#xff0c;打开FTP客户端&#xff0c;点击03软件下的Visual Studio Code&#xff0c;发现code_1.50.1-1602600906_amd64。 2、点击“文件”&#xff0c;然后点击“站点管理器”&#xff0c;见下图操作&#xff1a; 3、点…...

【服务器数据恢复】Raid5热备盘同步失败导致lvm结构损坏的数据恢复案例

服务器数据恢复环境&#xff1a; 两组由4块磁盘组建的raid5磁盘阵列&#xff0c;两组raid5阵列划分为lun并组成了lvm结构&#xff0c;ext3文件系统。 服务器故障&#xff1a; 一组raid5阵列中的一块硬盘离线&#xff0c;热备盘自动上线并开始同步数据。在热备盘完成同步之前&am…...

react+AntDesign 之 pc端项目案例

1.环境搭建以及初始化目录 CRA是一个底层基于webpack快速创建React项目的脚手架工具 # 使用npx创建项目 npx create-react-app react-jike# 进入到项 cd react-jike# 启动项目 npm start2.安装SCSS SASS 是一种预编译的 CSS&#xff0c;支持一些比较高级的语法&#xff0c;…...

实验笔记之——基于COLMAP的Instant-NGP与3D Gaussian Splatting的对比

之前博客进行了COLMAP在服务器下的测试 实验笔记之——Linux实现COLMAP-CSDN博客文章浏览阅读794次&#xff0c;点赞24次&#xff0c;收藏6次。学习笔记之——NeRF SLAM&#xff08;基于神经辐射场的SLAM&#xff09;-CSDN博客NeRF 所做的任务是 Novel View Synthesis&#xf…...

实战环境搭建-linux下安装悟空CRM

下载地址如下: 链接:https://pan.baidu.com/s/1OI9EA8Nc8ymWlERS9i0vjg?pwd=ws5c 提取码:ws5c 上传crm的程序包,如下图: 输入 unzip 72crm-java-master.zip 进行解压 create database crm9; use crm9; source /opt/72crm-java-master/docs/crm9.sql 修改/home/wukongcr…...

Redis 7.0性能大揭秘:如何优化缓存命中率?

Redis 7.0&#xff0c;这货不仅仅是一个简单的缓存工具&#xff0c;它更是一款高性能的数据结构服务器。现在&#xff0c;大家都知道缓存命中率对性能影响特别大&#xff0c;但怎么优化它呢&#xff1f; 本文&#xff0c;已收录于&#xff0c;我的技术网站 ddkk.com&#xff0…...

【深度学习每日小知识】Data Augmentation 数据增强

数据增强是通过对原始数据进行各种转换和修改来人工生成附加数据的过程&#xff0c;旨在增加机器学习模型中训练数据的大小和多样性。这对于计算机视觉领域尤为重要&#xff0c;因为图像经常被用作输入数据。 计算机视觉中的数据增强 数据增强的主要目标是解决过拟合问题&…...

网络调试 UDP1,开发板用动态地址-入门6

https://www.bilibili.com/video/BV1zx411d7eC?p11&vd_source109fb20ee1f39e5212cd7a443a0286c5 1, 开发板连接路由器 1.1&#xff0c;烧录无OS UDP例程 1.2&#xff0c;Mini USB连接电脑 1.3&#xff0c;开发板LAN接口连接路由器 2. Ping开发板与电脑之间通信* 2.1 根据…...

【Gin实战教程】快速入门

Gin是一个轻量级的Web框架&#xff0c;使用Go语言开发。它具有高性能、易用性和灵活性的特点&#xff0c;是构建可扩展的Web应用程序的理想选择。 首先&#xff0c;Gin是一个高性能的框架。它基于Go语言的原生HTTP包进行开发&#xff0c;利用了Go语言的并发特性和协程模型&…...

WPF真入门教程26--项目案例--欧姆龙PLC通讯工具

1、案例介绍 前面已经完成了25篇的文章介绍&#xff0c;概括起来就是从0开始&#xff0c;一步步熟悉了wpf的概念&#xff0c;UI布局控件&#xff0c;资源样式文件的使用&#xff0c;MVVM模式介绍&#xff0c;命令Command等内容&#xff0c;这节来完成一个实际的项目开发&#…...

C++ OpenGL 3D Game Tutorial 2: Making OpenGL 3D Engine学习笔记

视频地址https://www.youtube.com/watch?vPH5kH8h82L8&listPLv8DnRaQOs5-MR-zbP1QUdq5FL0FWqVzg&index3 一、main类 接上一篇内容&#xff0c;main.cpp的内容增加了一些代码&#xff0c;显得严谨一些&#xff1a; #include<OGL3D/Game/OGame.h> #include<i…...

Redis小计(4)

目录 1.Set和Get操作 2.mset和mget 3.mset&#xff0c;mget&#xff0c;set后加参数的优点 4.incr,incrby&#xff0c;incrbyfloat 1.Set和Get操作 flushall&#xff1a;清除所有k-v键值对。&#xff08;删库跑路小技巧&#xff09; set k v[ex | px]&#xff1a;设置超时…...

【React】常用Hook函数的梳理和总结(第二篇)

1. 前言 本篇梳理和总结React中常用的Hook函数。 欢迎大家来到Hook的世界&#xff0c;真的贼好用~ 2. 常用Hook函数 Hook说明示例useState(initialState) 功能&#xff1a;为函数组件添加状态变量&#xff0c;输入可是基本数据类型或引用数据类型&#xff0c;也可以是不带参数…...

【JaveWeb教程】(15) SpringBootWeb之 响应 详细代码示例讲解

目录 SpringBootWeb请求响应2. 响应2.1 ResponseBody2.2 统一响应结果2.3 案例2.3.1 需求说明2.3.2 准备工作2.3.3 实现步骤2.3.4 代码实现2.3.5 测试2.3.6 问题分析 SpringBootWeb请求响应 2. 响应 前面我们学习过HTTL协议的交互方式&#xff1a;请求响应模式&#xff08;有…...

慈溪做无痛同济 网站/推广平台都有哪些

课程首页地址&#xff1a;http://blog.csdn.net/sxhelijian/article/details/7910565&#xff0c;本周题目链接&#xff1a;http://blog.csdn.net/sxhelijian/article/details/8806111 【项目3-分数类中的运算符重载】实现分数类中的运算符重载&#xff0c;在分数类中可以完成分…...

便捷的网站建设软件/凡科建站的免费使用

Mybatis 框架课程第三天第1章 Mybatis 连接池与事务深入1.1Mybatis 的连接池技术1.1.1Mybatis 连接池的分类1.1.2Mybatis 中数据源的配置1.1.3Mybatis 中DataSource 的存取1.1.4Mybatis 中连接的获取过程分析1.2Mybatis 的事务控制1.2.1JDBC 中事务的回顾1.2.2Mybatis 中事务提…...

阿里网站域名指向怎么做/速推网

写在前面&#xff1a;从九月一号开始&#xff0c;也就是今天起&#xff0c;学校实行内外网统一登陆的手段&#xff0c;真的是....&#xff0c;每次上网都要登录一下&#xff0c;挺麻烦的&#xff0c;打开浏览器&#xff0c;输入内网登陆网址登陆&#xff0c;注销的时候也要输入…...

网站域名使用怎么做分录/全球疫情最新数据消息

1 在linux命令行底下通过python -V查看python版本号suiycsuiyc-A76GMV:~/sycworkspace/simple-sample$ python -V 2>&1 | awk {print $2}输出结果示例&#xff1a;2.7.32 直接在命令行中输入python示例&#xff1a;suiycsuiyc-A76GMV:~/sycworkspace/simple-sample$ pyt…...

网站建设asp编程/电商中seo是什么意思

前奏 我们都知道 nginx 是一款优秀的反向代理服务&#xff0c;用过 nginx 的也应该都知道 upstream&#xff0c;upstream 节点一般置于 http 节点大括号中&#xff0c;常规在 upstream 中配置需要被负载均衡的服务器列表。 比较多的使用做如下示意&#xff1a; #user nobody…...

flash html网站模板/关键词采集软件

path表示需要查找的路径&#xff0c;string表示需要包含的字符\字符串 grep -rnw path -e "string"只查找包含特定string的所有.c和.h文件 grep --include\*.{c,h} -rnw -rnw path -e "string" 除去所有.o文件&#xff0c;查找其他文件是否包含特定strin…...