vue 借助插件js-table2excel 实现导出excel，并导出图片到excel。

最新推荐文章于 2025-03-20 09:36:50 发布

小泡泡c

最新推荐文章于 2025-03-20 09:36:50 发布

阅读量2.1k

点赞数

分类专栏： vxe-table 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_45325810/article/details/127550459

版权

一、界面展示

![![在这里插入图片描述](https://img-blog.csdnimg.cn/5445e013d78b47b4b1b4a38d38095933.png](https://img-blog.csdnimg.cn/4f46373a20d74f28bc93a9b989cb1b8f.png

二、excel展示

在这里插入图片描述

三、工具：table2excel

安装插件

yarn add js-table2excel

2.代码实现

<template>
  <div class="box">
    <a-button @click="exportFn">导出</a-button>
    <vxe-table :data="tableData">
      <vxe-column type="seq"></vxe-column>
      <vxe-column field="date" title=<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小泡泡c

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue及Element UI&vue-element-admin简记

生活在别处

11-21

7853

文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...

vue前端导出（可导出图片）

smile106600的博客

03-01

548

新手遇到导出需求，我们应该这样，然后那样，然后就好了。在需要导出的页面引用插件。

2 条评论您还未登录，请先登录后发表或查看评论

jquery.table2excel.js

05-08

用于网页上导出到Excel，可以是整个table或者整个div，根据id获取对象，然后导出。

vue2导出el-table中的数据为excel

paradoxaaa_的博客

03-20

178

在项目根目录下建一个export.js文件。在需要引入的页面引入。

vue js-table2excel + xlsx 文件导入导出（导出包含图片）

qq_44428688的博客

01-03

3284

如果做文件的小批量导出不用转换base64 直接用http url即可文件量或者图片过大可能会出现加载失败的情况避免这个问题是跑all方法去请求url资源转换成base64 再渲染就能够全部导出转base64的时候做了一个图片压缩不需要的可以去掉。代码中掺杂着文本匹配Id 的逻辑不需要的可以忽略 #@是个人习惯可以换成别的表格头文本描述和字段值的分隔符。需要安装以下这两个依赖包 js-table2excel 用于文件导出 xlsx 用于文件导入。

js-table2excel

weixin_44725596的博客

05-05

1860

/* eslint-disable */ let idTmr; const getExplorer = () => { let explorer = window.navigator.userAgent; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; }.

vue js-table2excel 导出excel 带多张图片，js-table2excel插件改写

tpl9236 的博客

03-08

3732

vue导出excel 多张图片

table2excel.js

09-04

table2excel.js 兼容火狐 ie 谷歌等浏览器，可直接使该插件将html中数据用excel方式导出

两小时从零学会vue-admin-template框架

drhrht的博客

03-06

7248

一、vue-admin-template 1.项目简介官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi

vue html2pdf 表格

最新发布

03-31

在 Vue 项目中实现 HTML 到 PDF 的表格导出，可以借助 `html2pdf` 插件完成此功能。以下是具体方法： #### 安装依赖首先需要安装 `html2pdf.js` 库，可以通过 npm 或 yarn 进行安装。 ```bash npm install ...

【前后端协同工作】：实现Excel文件无缝请求与下载的终极指南

![【前后端协同工作】：实现...前端负责展示用户界面，并通过API与后端服务进行通信，而后端则处理业务逻辑，并作为数据存储和检索的中心。本章节将首先介绍前后端协作的基础知识，概述如何建立高效的协作流程，为深入

jquery.table2excel.js（用于table导出Excel文件）

01-11

里面包含了jquery.table2excel.js，用于table直接导出Excel文件，有例子可以参考

table2excel.js 用于直接将table转换成Excel的js工具包

04-27

table2excel.js 用于直接将table转换成Excel的js工具包

vue 使用table2excel导出excel表格（带图片）

EvaY_Yang的博客

11-03

5845

vue 使用table2excel导出excel表格（带图片）

表格导出为Excel：js-table2excel

游离_梅格妮

09-22

711

js-table2excel的使用

JS导出带图片的Excel

qq_2827625379的博客

09-10

3222

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导出图片和数据到Excel</title> </head> <body> </body> <script> /* eslint-disable */ let idTmr; const getExplorer = () => { let